[CSS 100% Height in IE] HTML met valid CSS wel Firefox !IE - Softwareontwikkeling

dinsdag 3 februari 2009 00:12

Acties:

0 Henk 'm!

...====...

Topicstarter

Ik ben bezig met het ontwerpen van een website. zoals velen heb ik ook met het probleem gezeten van 100% dmv CSS. Ik heb het probleem nu aardig opgelost met wat trucks gevonden via Google. Probleem is nu dat de website nog niet goed weergegeven wordt in Internet Explorer. Ik heb getest in IE7.

Het gaat om de volgende website:
http://www.xs4all.nl/~rbroeder/gl/

In Firefox laat hij netjes een scrollbar zien wanneer de content in de main div een overflow geeft. In Internet Explorer laat hij de tekst volledig over de footer heen lopen en wordt geen scrollbar gegeven.

Is er iemand die mij op weg kan helpen? Ik ben nu al enkele uren bezig, en heb de website al drie keer opnieuw opgebouwd met steeds nieuwe hacks voor 100% height. Maar krijg het ondanks gevalideerde CSS en HTML niet werkend.

De code:

HTML:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
        <head>
    <title>GL</title>
    <meta name="description" content="Website van de GL" />
    <meta name="keywords" content="website" />
    <meta name="copyright" content="x" />
    <meta name="author" content="x" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="language" content="nl" />
    <meta name="Distribution" content="Global" />
    <meta name="Rating" content="General" />
    <meta name="Robots" content="INDEX,FOLLOW" />
    <meta name="Revisit-after" content="7 Days" />
<style type="text/css">
html {
    height:100%;
    max-height:100%;
    padding:0;
    margin:0;
    border:0;
    background-color:#fff;
    overflow: auto;
    /* hide overflow:hidden from IE5/Mac */
    /* \*/
    overflow: hidden;
    /* */
}

body {
    height:100%;
    max-height:100%;
    padding:0;
    margin:0;
    border:0;
    overflow: auto;
}

#content {
    display:block;
    position:absolute;
    z-index:4;
    top:163px;
    bottom:22px;
    width:100%;
    margin-left:0px;
    background-color: #fff;
}

* html #content {
    top:0;
    bottom:0;
    height:100%;
    border-top:163px solid #fff;
    border-bottom:22px solid #fff;
}

#head {
    position:absolute;
    margin-left:0px;
    top:0;
    min-width:100%;
    height:163px;
    overflow: hidden;
}

#headmenu {
    position:absolute;
    margin-left:0px;
    top:103px;
    min-width:100%;
    height:60px;
    z-index:5;
    overflow: hidden;
    background-color: #005398;
}

* html #head {
    top:2px; height:110px;
}

#foot {
    text-align:center;
    position:absolute;
    margin-left:0px;
    bottom:0;
    width:100%;
    min-width:100%;
    padding-top:0px;
    height:22px;
    background-color: #005398;
}

* html #foot {
    bottom:0px; height:22px;
}

.left {float:left; margin:10px; border:1px solid #000;}
.right {float:right; margin:10px; border:1px solid #000;}
.lefttext {float:left; width:267px; text-align:justify;}
.righttext {float:right; width:267px; text-align:justify;}

* html .lefttext {float:left; width:267px; text-align:justify;}
* html .righttext {float:right; width:267px; text-align:justify;}

#botleft {
    float: left;
    background-color: #89ba17;
    width: 267px;
    height: 22px;
}

#botmid {
    float:left;
    background-image: url('img/bottom_mid.jpg');
    background-repeat: no-repeat;
    width: 184px;
    height: 22px;
    margin-left: 15%;
}

#botright {
    float:right;
    background-image: url('img/bottom_right.jpg');
    background-repeat: no-repeat;
    width: 126px;
    height: 22px;
}

#toplogo {
    background-image: url('img/top_logo.jpg');
    background-repeat: no-repeat;
    width: 401px;
    height: 103px;
}

#topleft {
    clear: left;
    float: left;
    background-image: url('img/top_left.jpg');
    background-repeat: no-repeat;
    background-color: #005398;
    width: 190px;
    height: 60px;
}

#topmid {
    float: left;
    top: 114px;
    background-image: url('img/top_mid.jpg');
    background-repeat: no-repeat;
    width: 144px;
    height: 61px;
    margin-left: 30%;
}

#topright {
    float:right;
    background-image: url('img/top_right.jpg');
    background-repeat: no-repeat;
    width: 57px;
    height: 61px;
}

#menu {
    float: left;
    width: 267px;
    min-height: 100%;
    height: 100%;
    padding-bottom: 0px;
    background-color: #005398;
    overflow: auto;
}

#main {
    position: relative;
    overflow: auto;
    height: 100%;
    text-align: left;
    font-family: arial, sans-serif;
}

* html #main {
    overflow: auto;
}

.menutitle {
    padding-left: 30px;
    height: 23px;
    width: 237px;
    font-family: arial, sans-serif;
    font-weight: bolder;
    color: #fff;
    margin-bottom: 20px;
}

.menu_one {
    background-color: #2e7d83;
}

.menu_two {
    margin-top: 20px;
    background-color: #609a61;
}


.menu_three {
    margin-top: 20px;
    background-color: #6ea450;
}

.menu_links {

    margin-bottom: 20px;
}

.menu_links a:link, #list-menu a:active, #list-menu a:visited {
    color: #fff;
}

.menu_links a:hover {
    background: #89ba17;
    color: #fff;
}

.menu_links ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.menu_links a {
    padding-left: 30px;
    font-family: arial, sans-serif;
    color: #fff;
    display: block;
    width:237px;
    text-decoration: none; /*lets remove the link underlines*/
}

#credits {
    text-align:center;
    position:absolute;
    margin-left:120px;
    bottom:0;
    width:100%;
    min-width:100%;
    height:22px;
    font-size: small;
    color: #fff;
}

#credits a, a:hover, a:active, a:visited {
    text-decoration: none;
    color: #fff;
}

#main h1 {
    padding-top: 10px;
    padding-left: 25px;
    color: #005398;
}

#main h2 {
    padding-top: 5px;
    padding-left: 25px;
    color: #005398;
}

#main h3 {
    padding-left: 25px;
    color: #005398;
}

#main p {
    margin: 10px 25px 25px 25px;
}

</style>
</head>
<body>
<div id="head">
    <div id="toplogo">&nbsp;</div>
</div>
<div id="headmenu">
    <div id="topleft">&nbsp;</div>
    <div id="topmid">&nbsp;</div>
    <div id="topright">&nbsp;</div>
</div>

<div id="foot">
    <div id="botleft">&nbsp;</div>
    <div id="botmid"></div>
    <div id="botright">&nbsp;</div>
</div>
<div id="credits">Copyright</div>

<div id="content">
    <div id="menu">
        <div class="menutitle menu_one">
            menu_titel
        </div>
        <div class="menu_links">
            <ul>
            <li><a href="spoed.htm">item_1</a></li>
            <li><a href="spoed.htm">item_2</a></li>
            <li><a href="spoed.htm">item_3</a></li>
            <li><a href="spoed.htm">item_4</a></li>
            <li><a href="spoed.htm">item_5</a></li>
            <li><a href="spoed.htm">item_6</a></li>
            <li><a href="spoed.htm">item_7</a></li>
            </ul>
        </div>
    </div>
    <div id="main">
        <h1>Test 2008</h1>
        text
    </div>
</div>
</body>
</html>

dinsdag 3 februari 2009 01:35

Acties:

0 Henk 'm!

Verwijderd

In Internet Explorer

Welke versie?

Het was laat

[ Voor 21% gewijzigd door Verwijderd op 03-02-2009 10:40 ]

dinsdag 3 februari 2009 10:14

Acties:

0 Henk 'm!

Tehkram

Verwijderd schreef op dinsdag 03 februari 2009 @ 01:35:
[...]

Welke versie?

IE7 zoals in de post gezegd.

@compubink

Ik zie dat je nog "ouderwetse" *html hacks gebruikt, ik heb zo'n vermoeden dat IE7 hier op faalt omdat je niet in Quirks mode draait.

Lees dit artikel even en kijk of je hier iets wijzer van word:

http://molly.com/2005/12/22/star-html-and-microsoft-ie7/

dinsdag 3 februari 2009 10:29

Acties:

0 Henk 'm!

Da Weef

Sowieso is het semantisch niet allemaal even verantwoord... En waarom het wiel opnieuw uitvinden wat betreft de layout? Er zijn voldoende vergelijkbare layouts voor het grijpen die je enkel licht hoeft aan te passen:

http://www.cssplay.co.uk/layouts/

.

dinsdag 3 februari 2009 10:48

Acties:

0 Henk 'm!

MBV

De netste manier om valide CSS voor IE specifiek te maken is met conditional comments:

HTML:

<head>
  <style type="text/css">
 /*veel layout*/
  </style>
  <!--[IF IE 7]>
    <style type="text/css">
      /* IE7 hacks */
    </style>
  <![endif]-->
</head>

100% valid CSS/HTML, en geen wazige hacks die het alleen in sommige IE-versies doen.

woensdag 4 februari 2009 00:21

Acties:

0 Henk 'm!

DG.

Je moet de footer onder de main doen.
Je kunt dan de <div id="clear"></div> gebruiken
Als je dan een height in de main instelt gaat die als goed is over in een scrollbar.
Succes er mee.

woensdag 4 februari 2009 21:40

Acties:

0 Henk 'm!

Verwijderd

da's de meest ranzige oplossing ooit (en hele volksstammen die het nog toepassen). Daar is gewoon overflow voor

woensdag 4 februari 2009 23:32

Acties:

0 Henk 'm!

MBV

Hoezo? Je zal toch iets moeten clearen, als alles een float is is er geen enkele manier waarop de browser erachter komt dat er scrollbars getoond moeten worden voor de hele pagina

donderdag 5 februari 2009 10:12

Acties:

0 Henk 'm!

Clay

cookie erbij?

De overflow property bepaalt dus in hoe de content area van een block level element zich gedraagt, check bv het verschil tussen (ff ranzig):

HTML:

<p style="background:green;">
    <span style="float:left; width:100px; background:red;">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    </span>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>

en met overflow op de p:

HTML:

<p style="background:green;   overflow:auto;    ">
    <span style="float:left; width:100px; background:red;">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    </span>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>

In de eerste snippet zal de span buiten de p vallen, die heeft nml impliciet een overflow:visible, en dat betekent dat content buiten het block mag vallen.

In de tweede snippet wordt de p uitgerekt tot die de float omvat. Overflow auto (of hidden of scroll) zorgen er nml voor dat de content area meegroeit (er is nml geen fixed height), en hebben elk een verschillende oplossing om content die dan via een andere constructie alsnog zou overflowen, te behandelen.

De CSS spec legt dit ergens ook beter uit, maar ik kan het ff niet vinden

En zo heb je dus geen clear nodig. IE6 heeft nog een trap nodig (zoveelste haslayout issue dacht ik), en vanaf IE7 gaat het gewoon goed.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin