width:auto float:right IE7 rekt uit over gehele pagina

[T i M]

Ik zit met een probleem waar ik niet aan uit kom. Zie onderstaande voorbeeld:

Cascading Stylesheet:

div#header {
    width: 1006px;
    height: 299px;
}   
div#header_overlay {
    z-index: 10;            
    position: absolute;         
    width: auto;    
}
div.read_more {
    float: right;
    width: 108px;
    height: 25px;
}

HTML:

<div id="header">
<div id="header_overlay">
<h1>Dit is een grote titel</h1>
<p>Dit is een alinea</p>
<div class="read_more"><a href="#">lees meer</a></div>
</div>
</div>

Getest in Firefox en daar werkt het zoals ik verwacht. Het "lees meer" blokje gaat aan de rechterkant van de div staan en de breedte van de div past zich aan aan de hoeveelheid tekst die erin staat.

Het probleem doet zich voor in IE7, de browser rekt de "header_overlay" div over de gehele pagina uit en creeert daardoor ook een scrollbar. Resultaat: mijn blokje is "uit" beeld en krijg een lelijke scrollbar.

Ik heb gezocht op het probleem en heb de volgende site gevonden: http://www.ilikespam.com/blog/width-auto-on-floats-in-ie

Omschrijft precies mijn probleem, maar het lost de mijne niet op! De bug is bekend in IE6 en zou in IE7 verleden tijd moeten zijn. Iemand een idee?

[HuHu]

Heeft je pagina een DOCTYPE?

[OkkE]

Zonder DOCTYPE zal IE7 inderdaad ook vreemd doen.

Voor IE6 zou je het kunnen oplossen door een vaste breedte mee te geven en een "white-space:nowrap;".

[T i M]

Strict doctype.

[OkkE]

Heb je een testcase online staan?

[T i M]

Zie volgende URL:

http://www.timmermansvoeders.nl/test/test.html

In Firefox of Opera zul je zien hoe het wel moet .

[OkkE]

Het is de bedoeling dat het blok mee rekt met de <h1> neem ik aan, aangezien een vaste breedte natuurlijk een easy oplossing zou zijn.

Het lijkt fout te gaan in IE met de float. Een oplossing kan zijn je #read_more een position:absolute; geven en d.m.v. right:0px; en bottom:0px; deze als nog op de juiste positie zetten.


PS: Ik zou die smerige X-UA meta er uit gooien, nergens voor nodig.

[T i M]

Dat is helaas ook geen oplossing. Aangezien ik de breedte van te voren niet weet weet ik ook niet waar ergens ik het read_more divje moet plaatsen.

[Bosmonster]

right:0 betekent gewoon dat ie hem aan de rechterkant plaatst, ongeacht de breedte...

(probeer het de volgende keer even voor je het afschiet )

[ Voor 27% gewijzigd door Bosmonster op 25-11-2009 18:29 ]

[Matis]

Desnoods kun je dynamisch met jquery de absolute positioning kunnen doen.

[T i M]

Jep, dat is wat ik net even gemaakt heb. Ik had al een stuk Javascript nodig voor het sliden en faden van de images in de header en daar zitten nu 3 regels extra code bij om mijn "Lees meer" blokje goed te positioneren.

Als iemand alsnog met de "juiste" oplossing komt, heel graag!

[OkkE]

Misschien mis ik iets, maar mijn oplossing zou ook gewoon moeten werken. Sowieso is een javascript oplossing in dit geval niet netjes...

[Zillion01]

code:

    div.read_more {
        text-align:right;
    }

[ Voor 22% gewijzigd door Zillion01 op 25-11-2009 23:46 ]