Bug in Firefox 2.0
Lavorando su un menu creato con tag li, ho scoperto che Firefox 2.0 gestisce diversamente le unordered list a seconda che il codice venga indentato oppure no. Il bug nasce da un elemento img reso float a destra.
Di seguito trovate due screenshots della differente resa, la prima con codice indentato, la seconda con il codice dell’intera lista (tag ul) scritto su un sola riga. Per il resto, il codice è naturalmente lo stesso.
La soluzione che ho trovato, almeno per ora, è assegnare una larghezza esplicita al tag li.
I found a bug in Firefox 2.0, that renders float images in li tags differently belong to code-indentation: look at these two screenshots, the first one with indented ul and li tags, the second one with all tags (ul and li) in the same line of code.
A solution I found about this issue is to assign explicit width in li tag.
Di seguito il codice che ho usato, XHTML 1.0 Strict con tanto di DOCTYPE che manda il browser in Standard Compliant Mode.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
<html>
<head>
<title>
FireFox 2.0 Bug
</title>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
<style type=”text/css”>
body{margin:0;padding:0;font-family:Verdana,sans-serif;font-size:76%;}
img{border:none;}
div#container{width:760px;margin:0 auto;padding:120px 0 0;text-align:center;background-color:#FFF;background-image:url(”navBg.jpg”);background-repeat:repeat-y;background-position:0 0;}
div#content{margin-left:210px;text-align:left;}
div#header{text-align:right;color:black;background-color:white;line-height:73px;margin-top:-99px;}
div#nav{float:left;width:200px;text-align:left;background-color:#53565b;}
div#nav ul{list-style-type:none;padding:20px 0 0 0;margin:0 0 0 10px;text-indent:10px;}
div#nav ul li{background-image:url(”navLiBg3.gif”);background-repeat:no-repeat;background-position:0 50%;line-height:34px;}
div#nav ul li img{float:right;}
div#nav ul li a{line-height:34px;font-size:14px;text-decoration:none;font-weight:bold;}
div#nav a:link,div#nav a:visited{color:black;}
div#nav a:hover{color:#3399FF;}
</style>
</head>
<body>
<div id=”container”>
<div id=”header”>
paperogiallo.com
</div>
<div id=”nav”>
<ul>
<li>
<img alt=”" src=”btnOff.gif”/>
<a href=”#”>link one</a></li>
<li>
<img alt=”" src=”btnOff.gif”/>
<a href=”#”>link two</a></li>
<li>
<img alt=”" src=”btnOff.gif”/>
<a href=”#”>link three</a></li>
<li>
<img alt=”" src=”btnOn.gif”/>
<a href=”#”>link four</a></li>
<li>
<img alt=”" src=”btnOff.gif”/>
<a href=”#”>link five</a></li>
<li>
<img alt=”" src=”btnOff.gif”/>
<a href=”#”>link six</a></li>
</ul>
</div>
<div id=”content”>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum est odio, sagittis in, varius in, posuere et, felis. Quisque accumsan. Duis pede enim, bibendum at, dapibus ac, pharetra eu, ante. Sed placerat est in justo. Nam nec neque in nulla dictum tempus. Etiam nec leo. Nulla et lorem. Vestibulum sodales massa vitae pede. Etiam ac quam. Sed porta. Cras pellentesque tristique ligula. Phasellus tellus lorem, cursus a, congue at, dapibus nec, enim. Nullam dignissim imperdiet metus. Duis ipsum magna, dictum eget, pharetra id, dapibus facilisis, magna. Donec placerat vehicula nibh. Cras non sapien.</p>
<p>Mauris ut metus non lectus pharetra tempor. Aliquam elementum iaculis nunc. Vestibulum in justo ac dolor eleifend semper. Duis augue. Sed sit amet lacus. Aenean luctus consectetuer ipsum. Fusce et augue ut tortor gravida congue. Quisque imperdiet dolor vitae magna. Integer suscipit tempus ligula. Donec sagittis lorem. Donec in lorem ut quam venenatis posuere. Nullam eget nisl sit amet nibh sollicitudin tempor. Maecenas sit amet neque. Suspendisse aliquam adipiscing pede. In scelerisque. Cras congue. Praesent dictum diam. Donec tempus, urna ut fermentum pretium, mauris ipsum placerat libero, et volutpat mi libero vitae ante. Proin ac magna a quam mollis faucibus.</p>
<p>Fusce fermentum lobortis massa. Morbi hendrerit nibh ut nisl. Quisque lacinia nulla non ante. Aliquam arcu. Donec consectetuer magna. Fusce id purus. Duis scelerisque velit sit amet neque. Duis sed magna sit amet lorem ornare viverra. Cras pellentesque turpis eu massa. Aliquam erat volutpat. Duis sit amet arcu vitae felis dictum vestibulum. Curabitur justo. Cras gravida vehicula orci. Fusce ultricies, turpis sit amet vulputate molestie, urna leo molestie sem, eu fermentum nisi metus at ligula.</p>
</div>
</div>
</body>
</html>
Technorati tag: Firefox, Firefox bug
mirtilla
on Nov 16 replies:Copione! Ora trovi pure un bug in firefox pur di sballare anche tu i layout come me?!!! Beh io son capace di farlo anche in explorer!! LOL
bacino