[css-d] Safari Float Bug

Alec A. Lazarescu Thu, 19 Jan 2006 13:07:03 -0800

I'm using a floated horizontal list based on one of the ones on
listmatic and everything working great IE6 and FireFox.  Safari is
putting a break before the list item with the combo box.  I've found
that if I hardcode a width in #navlist or take out the float that works
around it, but I don't like this idea.  It should auto-size nicely.
I've tracked it down and when I remove this image (<img alt=""
border="0" src="http://ak.imgfarm.com/ex/my/exHaveMail.gif";>), Safari
works properly again.  Floating the image left puts it in the wrong
spot.  Any workarounds?  Code below.


Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        #navcontainer { margin-left: 30px; }
        
        #navlist
        {
                list-style: none;
                padding: 0px;
        padding-top: 5px;
        padding-bottom: 4px;
                margin: 0;
        background-color:#F8F4DB;
        font-size: 10pt;
        font-family: Verdana;
        }
        
    #navlist A,A:active,A:link {color:black; text-decoration:none}

        #navlist li
        {
                display: inline;
                padding: 0;
                margin: 0;
                border-left: 2px solid #B3B3B3;
                padding: 0 0.4em 0 29px;
        }
        
        #navlist li.noborder
        {
                border-left: 0px solid #B3B3B3;
        margin-left: 0px;
        }       
        
        #navlist li.noicon
        {
            background-image: none;
        padding-left: 11px;
                margin-right: 1px;
        }               

        DIV.clear
        {
                clear: both; 
                height: 0px; 
                overflow: hidden;
        }
        
        /*Win IE browsers - hide from Mac IE\*/
        * html #navlist { height: 1%; }
        
        /*Mac IE 5*/
        * html #navlist li:first-child { border-left: 0; }
    </style>
</head>
<body>
Blah Blah<br /><br />
<div id="navcontainer">
<ul id="navlist" style="float:left">
<li class="noborder" id="export"><a href="#">First Option <img alt=""
border="0" src="http://ak.imgfarm.com/ex/my/exHaveMail.gif";></a></li>
<li id="incompletes"><a href="#">Text 3</a></li>
<li id="weights"><a href="#">Another Option</a></li>
<li class="noicon"><select style="font-size: 8pt">
<option>More Tools</option>
<option>Delete</option>
<option>Manage Categories</option>
</select></li></ul><div class="clear"></div>
</div>
<br /><br />
</body>
</html>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Safari Float Bug

Reply via email to