[CSS] IE6/IE7 en float:right - Softwareontwikkeling

dinsdag 21 april 2009 02:46

Acties:

0 Henk 'm!

Carpe diem

Topicstarter

Ik heb hier een layout bestaande uit 4 "rijen": header, intro, main en footer. Allemaal met een op vaste breedte gecentreerde content. Daarnaast moet er op sommige pagina's aan de rechterkant van de intro en main een floating box komen. Zo gezegd, zo gedaan.

HTML:

<!doctype html>

<html>
    <head>
        <style>

/* General ------------------------------------------------------------------ */

html, body {
    padding: 0;
    margin: 0;
    height: 100%
}

p {
    margin-top: 0; /* Fixs Mozilla positioning "bug". */
}

/* Elements ----------------------------------------------------------------- */

#container {
    position: relative;
    min-height: 100%;
    background: #ccf;
}

* html #container {
    height: 99.9%; /* Fixs IE6 positioning bug. */
}

#header {
   height: 50px;
   background: #fcc;
}

#box {
    float: right;
    width: 150px;
    background: #999;
}

#intro {
    background: #cfc;
}

#main {

}

#pushfooter {
    clear: both;
    height: 50px; /* Should be the same as #footer height. */
}

#footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    background: #fcf;
}

* html #footer {
    margin-bottom: -1px; /* Fixs IE6 positioning bug. */
}

/* Content ------------------------------------------------------------------ */

.content {
    position: relative;
    width: 700px;
    margin: 0 auto;
}

        </style>
    </head>

    <body>
        <div id="container">
            <div id="header">
                <div class="content">
                    <p>Header</p>
                </div>
            </div>

            <div class="content">
                <div id="box">
                    <p>Box: Nunc eros. Maecenas bibendum, urna in pharetra bibendum, orci tellus convallis sapien, id laoreet lorem eros et sem. Integer aliquam. Curabitur mollis. Ut tortor felis, eleifend non, semper non, eleifend eget, lorem. Sed velit purus, consectetur sed, facilisis imperdiet, lobortis in, metus. Etiam ac libero vitae ante rutrum interdum. Curabitur eleifend. Integer vel eros a sapien luctus rhoncus. Aliquam vestibulum elit.</p>
                </div>
            </div>

            <div id="intro">
                <div class="content">
                    <p>Intro: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vulputate, libero ut venenatis tempus, mauris lectus consectetur diam, at ornare lectus est id dui. Sed nisl erat, molestie sed, venenatis et, ultricies eget, nisi. Pellentesque lorem. Morbi porta arcu. Sed sit amet nisl. Praesent hendrerit volutpat nisi. Suspendisse nunc nunc, porttitor et, tristique vel, pharetra et, ipsum. Cras laoreet, purus ac pharetra pellentesque, arcu nulla imperdiet lorem, id gravida libero diam sed velit. Nullam dui. Duis at nunc. Vivamus in nisi in lorem semper facilisis. Integer ac felis nec lectus posuere aliquam. Integer lorem erat, accumsan eu, pulvinar ut, iaculis vitae, massa. Etiam venenatis nunc et ligula.</p>
                </div>
            </div>

            <div id="main">
                <div class="content">
                    <p>Main: Aenean pretium tortor. Curabitur pulvinar nulla sit amet turpis vehicula feugiat. Nunc varius imperdiet nisl. Maecenas ante. Fusce lectus dui, tempor adipiscing, posuere quis, adipiscing at, lacus. Integer ac nisl. Fusce sit amet eros. Donec et purus. Morbi quam metus, bibendum eget, mollis nec, commodo sit amet, mauris. Proin at lacus sed nunc iaculis faucibus. Nunc laoreet. Vestibulum ultricies tristique ipsum. Praesent sodales bibendum lectus. Nullam felis. Maecenas sodales. Suspendisse pulvinar, quam quis blandit viverra, massa tellus scelerisque est, a auctor nunc nisi eu felis. Nulla facilisi. Suspendisse potenti. Integer condimentum mattis urna. </p>
                </div>
            </div>

            <div id="pushfooter" />

            <div id="footer">
                <div class="content">
                    <p>Footer</p>
                </div>
            </div>
        </div>
    </body>
</html>

Werkt perfect in IE8, FF3, FF2, Safari3, Chrome1 en Opera9. In IE6 en IE7 duwt de box echter de intro en main omlaag, ondanks dat de box floating is.

Verwijderen van de content-div rondom de box-div geeft wel de gewenste gedrag mbt de float, maar daarmee komt de box helemaal rechts te zitten. Resultaat is identiek in alle genoemde browsers, behalve dat in IE6 en IE7 de content van de intro en main div's naar links wordt gedrukt (margin bug neem ik aan).

Toevoegen van display:inline aan .content geeft wel de gewenste gedrag mbt de float, maar daarmee verlies ik wel de vaste en gecentreerde content door de hele pagina. Resultaat is identiek in alle genoemde browsers.

De box-div verplaatsen naar de content van de intro-div als de eerste child geeft ook het gewenste gedrag (dit was ook het initiele ontwerp, maar om het probleem te elimineren had ik de zooi uit elkaar gehaald), maar in IE6 en IE7 duwt de box dan de main-div omlaag ipv om deze te overlappen richting de footer. De overige browsers doen het allemaal uitstekend.

De box absoluut positioneren tov de intro-div lost het euvel wel op, maar dit vormt een probleem wanneer de content van de box hoger is dan intro+main samen, want dan wordt de footer niet omlaag gedrukt. Hiervoor is wel een Javascript oplossing (height van main-div fixen adhv screenheight van box-div en intro-div, kan makkelijk met jQuery), echter dit wil ik het liefst vermijden ivm de unobtrusive-JS eis.

Ondersteuning in Chrome en Opera is overigens niet vereist, maar wel gewenst. Minimumondersteuning is IE6.

Suggesties? Ik ben hier al een hele dag mee bezig geweest

[ Voor 4% gewijzigd door BalusC op 21-04-2009 03:41 ]

dinsdag 21 april 2009 03:22

Acties:

0 Henk 'm!

BalusC

Carpe diem

Topicstarter

Hmmm, als ik de .content aanpas van

Cascading Stylesheet:

.content {
    position: relative;
    width: 700px;
    margin: 0 auto;
}

naar

Cascading Stylesheet:

.content {
    position: relative;
    margin: 0 100px;
}

Dan werkt het opeens perfect in IE6/IE7

(muv die kleine ruimte onderaan de box, maar da's wel hackbaar)

Maar de eis is echter dat de breedte van de content vast moet blijven. Lange regels zijn niet lekker leesbaar namelijk. Wel erg vreemd dat het verwijderen van de width het probleem oplost. Enig inzicht hier?

Edit:
Wanneer ik specifiek voor IE6/IE7 de volgende rules activeer:

Cascading Stylesheet:

.content {
    width: auto;
    margin-left: expression((document.body.clientWidth - 700) / 2);
    margin-right: expression((document.body.clientWidth - 700) / 2);
}

dan wordt het probleem opgelost, alleen zit ik met zo'n lullige active scripting security warning in IE7 en wordt het pas doorgevoerd wanneer je deze toestaat

Edit2: nee, dit is het ook niet, de layout is alleen perfect in IE7 (wanneer je de active scripting toestaat), in IE6 loopt de main content onder de footer heen wanneer deze hoger is dan de schermhoogte

Edit3: en dit gebeurt ook in IE7 wanneer je de pagina F5't

[ Voor 49% gewijzigd door BalusC op 21-04-2009 15:01 ]

dinsdag 21 april 2009 04:10

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Om half vier? Nee helaas

edit: ow het is alweer 4:10..

[ Voor 37% gewijzigd door Bosmonster op 21-04-2009 04:11 ]

dinsdag 21 april 2009 14:52

Acties:

0 Henk 'm!

BalusC

Carpe diem

Topicstarter

offtopic:
Het tijdsverschil is 6 uur.

Ontopic graag. Niemand anders suggesties? Moet ik toch maar naar JS grijpen?

dinsdag 21 april 2009 15:00

Acties:

0 Henk 'm!

.Johnny

geen tijd om helemaal me in je specifieke probleem te verdiepen nu; maar als je specifieke scripting voor IE6 en 7 uit gaat voeren moet je even opletten dat IE8 het waarschijnlijk weer wel goed doet. Dat kun je dan eventueel met conditional script uitvoeren.
En dat je die melding over active scripting krijgt van IE is waarschijnlijk alleen omdat je de pagina op je lokale machine hebt staan en nog niet op een server.

dinsdag 21 april 2009 15:02

Acties:

0 Henk 'm!

BalusC

Carpe diem

Topicstarter

Ik had daarvoor inderdaad

HTML:

1	<!--[if lte IE 7]><![endif]-->

gebruikt.

Maargoed, dit is ook niet helemaal de oplossing. IE6 (iig in IETester) laat de content van de main-div onder de footer doorschieten wanneer de content langer is dan de schermhoogte (maw, de footer blijft de ganse tijd onderaan zichtbaar). IE7 vertoont hetzelfde wanneer je de pagina F5't

[ Voor 63% gewijzigd door BalusC op 21-04-2009 15:03 ]

dinsdag 21 april 2009 15:05

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

Misschien zie ik door de divs de divjes niet meer

Maar waarom heb je niet 1 content element die je centreert en daarin die drie elementen? Dat werkt in alle browsers

Ik neem overigens aan dat er een opmaak reden is dat je het volgende gebruikt voor je header:

HTML:

        <div id="container">
            <div id="header">
                <div class="content">
                    <p>Header</p>
                </div>
            </div>

[ Voor 46% gewijzigd door BtM909 op 21-04-2009 15:06 ]

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 21 april 2009 15:16

Acties:

0 Henk 'm!

BalusC

Carpe diem

Topicstarter

Elke rij moet wel een separaat background hebben dat de volle schermbreedte beslaat. Anders was het idd makkelijker.

Met tabellen was ik in 3 seconden klaar.

[ Voor 31% gewijzigd door BalusC op 21-04-2009 15:27 ]

dinsdag 21 april 2009 18:31

Acties:

0 Henk 'm!

DJMaze

Het is een bekend box-model bug.
Wikipedia: Internet Explorer box model bug

Zorg dat je document in "standard" modus (niet quirks) draait om de meeste problemen te omzeilen.
http://www.sceneone.nl/el...s.php?which_element=quirk

Verder is het verstandig bezoekers er op te wijzen dat hun http browser sterk verouderd is en veel beveiligings lekken bevat, en hopen dat Microsoft snel de update forceerd.

Maak je niet druk, dat doet de compressor maar

dinsdag 21 april 2009 20:13

Acties:

0 Henk 'm!

BalusC

Carpe diem

Topicstarter

De doctype triggert al de standards mode hoor.

woensdag 22 april 2009 22:07

Acties:

0 Henk 'm!

BalusC

Carpe diem

Topicstarter

OK, geen oplossing dus.

Wel een workaround, ik heb het maar binnen de main-div gehuisd met een margin-top van -200px (wat toch al de minimum hoogte is van de intro-div). Zo is het ook wel acceptabel.

* BalusC rant nog ff stilletjes verder op IE.

woensdag 22 april 2009 22:09

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

Ik had het op een gegeven moment wel voor elkaar (juist omdat het een interessant design is), maar toen ineens niet meer (en m'n CTRL+Z fixte het niet

)

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 23 april 2009 00:26

Acties:

0 Henk 'm!

BalusC

Carpe diem

Topicstarter

Ik heb ook al vrij veel geprobeerd (in totaal 2 dagen

), soms heb ik het op het eerste gezicht ook wel voor elkaar, maar dan zit ik alsnog met het probleem dat ofwel de main-div ofwel de box-div onder of over de footer doorloopt wanneer het content langer is. Maargoed, toch bedankt voor de pogingen

Men is tevreden met de uiteindelijke layout