WN - Problem med float i MSIE

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Problem med float i MSIE (https://www.wn.se/forum/showthread.php?t=27419)

Jag har en meny uppbyggd som en lista, typ:

Kod:

<div id=menu>

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

<li>Item 4</li>

...snip...

</ul>

<br clear=all />

</div>

Jag vill ha alla li flytande i div:en, så jag använder denna CSS (borders tillagda i debugsyfte):

Kod:

div#menu { margin: 10px auto; padding-right: 100px; width: 690px; border: 1px solid blue; }

ul { margin: 0; padding: 0; margin-right: 100px; border: 1px solid green; }

li { list-style: none; float: left; padding: 2px 30px; border: 1px solid red; }

Jag behöver ha utrymme till höger i div:en för en absolut positionerad bild, därav padding-right och/eller margin-right.

I Firefox ser det ur som förväntat:
http://natbyggarna.se/test-iefloat-ff.png

Men i MSIE (både 6 & 7) verkar inte varken padding-right för div#menu eller margin-right för ul respekteras:
http://natbyggarna.se/test-iefloat-ie.png

Jag får inte ordning på detta. Har surfat och hittat tipsen att wrappa med en extra div eller att li måste vara display:inline, men inget av detta har hjälpt. En testsida finns här: natbyggarna.se/test-iefloat.php och där jag använder det skarpt är: concreta.se

Några idéer?

Efter idogt letande och forumande har jag nu lösningen på detta. Svaret finns i fenomenet hasLayout, en egenskap i MSIE som jag tidigare inte ägnat så mycket uppmärksamhet, men som uppenbarligen gäckat webbutvecklare i många år. Jag löste det med en variant av the Holly Hack, dvs jag lade till följande CSS:

Kod:

ul { height: 1%; }

vilket gör att ul-elementet får layout-egenskaper i MSIE, vilket i sin tur innebär att flytande elements rörelsefrihet inuti ul:en blir begränsad av dess bredd, marginaler och paddings. Verkligheten överträffar ibland dikten.

Ett tack till Centauri på webdeveloper.com, som löste mitt problem.

För den som inte känner till hasLayout så väl rekommenderar jag denna grymt utförliga artikel:
http://www.satzansatz.de/cssd/onhavinglayout.html

Hack hit o hack dit.. :)

testa med ul { width:100%}

Det är ju samma sak, dvs det ger ul-elementet hasLayout. Dock ger det bieffekten att min ul får fel bredd (eftersom jag har en margin-right!=0 på ul), så jag föredrar nog height:1%. Inget av detta ska ju egentligen behövas, men eftersom man ibland behöver åtgärda brister i vissa webbläsare måste det till ett och annat "hack".

Citat:

Originally posted by turboraketti@Feb 27 2008, 10:33
Det är ju samma sak, dvs det ger ul-elementet hasLayout. Dock ger det bieffekten att min ul får fel bredd (eftersom jag har en margin-right=0 på ul), så jag föredrar nog height:1%. Inget av detta ska ju egentligen behövas, men eftersom man ibland behöver åtgärda brister i vissa webbläsare måste det till ett och annat hack.

Nu är jag inte bombsäker på det här och hinner inte pröva, men räcker det inte med height: auto för att ge ett element layout?

Har inte provat heller, men:

Citat:

height: any value other than 'auto'
height: 1% is used in the Holly Hack.

säjer Ingo Chao i sin artikel. Han verkar ha koll. :)

Min första tanke var att li är av typen inline och kan därför inte ha marginaler och liknande och att det skulle räcka att sätta display:block på den?

Nja, li är ju faktiskt ett block-element default... Hursomhelst, enligt standarden ska ju alla värden på display utom 'none' ignoreras för element som är floating, men det finns ju någon bug i MSIE som går ut på att så inte är fallet. Lösningen skulle då vara att sätta display:inline på li, men det testade jag och det hjälpte inte.

-- Tillägg --
Här läste jag om det förresten:
http://www.positioniseverything.net/...oatIndent.html
http://www.positioniseverything.net/...ed-margin.html

Detta funkar för mig ;)

Nu tog jag in lite css från min reset.css.

Med andra ord så behövs något i[*] elementen som man lägger stilarna på istället för[*] om det ska vara en "meny" liknande sak. Kan säkert ersätta[*] med[*]<span></span>

Kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>



<head>

<title>Test</title>

<style><!--



body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {

margin:0;

padding:0;

}



ol,ul {

list-style:none;

}



#container{

        width:690px;

        margin:0 auto;

}



#navigation{float:left;width:690px;}

        #navigation ul{float:left;width:450px;}

        #navigation li{display:inline;}

        #navigation li a{float:left;border:1px solid #000;padding:5px 10px;margin:1px;height:30px;line-height:30px;width:50px;text-decoration:none;}

 *#navigation a:link{}

 *#navigation a:visited{}

 *#navigation a:hover{}

 *#navigation a:active{}



--></style>

</head>

<body>

        <div id="container">

 * *<div id="navigation">

 * * *<ul>

 * * * *<li><a href="#">Item</a></li>

 * * * *<li><a href="#">Item</a></li>

 * * * *<li><a href="#">Item</a></li>

 * * * *<li><a href="#">Item</a></li>

 * * * *<li><a href="#">Item</a></li>

 * * * *<li><a href="#">Item</a></li>

 * * * *<li><a href="#">Item</a></li>

 * * * *<li><a href="#">Item</a></li>

 * * * *<li><a href="#">Item</a></li>

 * * * *<li><a href="#">Item</a></li>

 * * * *<li><a href="#">Item</a></li>

 * * * *<li><a href="#">Item</a></li>

 * * * *<li><a href="#">Item</a></li>

 * * * *<li><a href="#">Item</a></li>

 * * *</ul>

 * *</div>

 *</div>

</body>

</html>