Firefox Mac/Win rendering differences

[Borvik]

Has anyone noticed that Firefox renders differently on the Mac than it does on Windows?

My site validates XHTML 1.0 Strict - and the css validates as well. I've been developing using FireFox 3 on Windows, just recently had a chance to try it in FireFox 3 on a Mac. The images used to separate the list items lined up perfectly on Windows - but they were much to high on the Mac. I managed to get they both to render properly, but only by conditionally outputting extra css for mac firefox (using the browser agent string).

I wanted to run this by the community to make sure I wasn't missing anything in my code.

Any thoughts on this?

Thanks.

Here's the html:

<div id="header"> 
    <a href=""><img id="logo" src="images/layout/logo.jpg" alt="" width="162" height="171" /></a>
    <img id="endcap" src="images/layout/top_endcap.jpg" alt="" width="29" height="171" />
    <div id="user_options"><a href="?pg=login" id="inOutLink">Login / Register</a> | <a href="?pg=profile" id="myAcctLink">My Account</a></div>
    <div id="mini_cart">Items in cart: 0&nbsp;&nbsp;&nbsp;Current Total: $0.00&nbsp;&nbsp;<a href="?pg=cart" id="cartLink">VIEW CART</a>&nbsp;&nbsp;<a href="#" id="checkoutLink">CHECKOUT</a>&nbsp;&nbsp;</div>
    <div id="top_nav">
        <ul>
            <li class="none"><a href="?pg=brands">BRANDS</a></li>
            <li><a href="#">SYSTEMS</a></li>
            <li><a href="#">STORAGE</a></li>
            <li><a href="#">NETWORKING</a></li>
            <li><a href="#">SOFTWARE</a></li>
            <li><a href="#">PERIPHERALS</a></li>
        </ul>
    </div>
    <div id="mini_search"><form action="" method="post"><p style="margin:0;padding:0;"><input type="hidden" name="f" value="f_search" />Search:<input type="text" name="sp" size="15" value="" /><input type="image" src="images/layout/search_go.gif" style="vertical-align: middle; width: 24px; height: 17px;" /></p></form></div>
    <div class="mini_nav">&nbsp;|&nbsp;&nbsp;<a href="?pg=aboutus">About  Us</a>&nbsp;|&nbsp;&nbsp;<a href="?pg=contactus">Contact Us</a>&nbsp;|&nbsp;&nbsp;<a href="?pg=faq">FAQ</a>&nbsp;|&nbsp;&nbsp;<a href="#">Shipping Info</a>&nbsp;|&nbsp;&nbsp;<a href="?pg=privacy">Privacy Policy</a>&nbsp;|&nbsp;</div>
</div>

And the CSS:

body{ margin:0; padding:0; width:100%; background:#fff; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; }

a{ color: #333333; text-decoration: underline; }
a:hover{ color: #00AADD; }

.ce{ clear: both; width: 0px; height: 0px; margin: 0px; }

li a{ color: #000; text-decoration: none; }
li a:hover{ text-decoration: underline; }

img{ border: 0; }

.mini_nav a{ font: 12px "Trebuchet MS", Verdana, Arial, sans-serif; text-decoration: none; }
.mini_nav a:hover{ text-decoration: underline; }

#header{ padding:0; margin: 0 auto; width: 980px; height: 171px; background: url('images/layout/navbar2.jpg') repeat-x 0px 62px; }

#header #logo{ float: left; width: 162px; height: 171px; }
#header #endcap{ float: right; width: 29px; height: 171px; }

#header #user_options{ float: left; padding-top: 30px; font: 12px "Trebuchet MS", Verdana, Arial, sans-serif; color: #3399FF; }
#header #user_options a{ text-decoration: none; }
#header #user_options #inOutLink{ color: #3399FF; }
#header #user_options #myAcctLink{ color: #666666; }

#header #mini_cart{ float: right; padding-top: 30px; font: 12px "Trebuchet MS", Verdana, Arial, sans-serif; color: #666666; }
#header #mini_cart a{ font-weight: bold; text-decoration: none; }
#header #mini_cart #cartLink{ color: #0099FF; }
#header #mini_cart #checkoutLink{ color: #FF6600; }

#header #mini_search{ padding-top: 5px; float: left; font-weight: bold; font-size: 11px; color: #333333; font-family: arial, helvetica, sans-serif; white-space: nowrap; }

#header .mini_nav{ padding-top: 5px; float: right; white-space: nowrap; color: #999999; }
#header .mini_nav a { color: #999999; }
#header .mini_nav a:hover { color: #1E6EC3; }

#header #top_nav{ float:left; padding-top: 8px; font-size: 15px; font-weight: bold; width: 789px; overflow:hidden; position:relative; }
#header #top_nav ul{ clear:left; float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center; }
#header #top_nav ul li{ display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; background: url('images/layout/navbar_sep.jpg') 0 6px no-repeat; }
#header #top_nav ul li.none{ background-image: none; }
#header #top_nav ul li a { display:block; margin:0 0 0 1px; padding:3px 10px; color:#fff; text-decoration:none; line-height:59px; }

And the extra css output only to FireFox on Mac:

#header #top_nav ul li{ display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; background: url('../images/layout/navbar_sep.jpg') 0 9px no-repeat; }
#header #top_nav ul li a { display:block; margin:0 0 0 1px; padding: 8px 10px 0px 10px; color:#fff; text-decoration:none; line-height:59px; }

 

[BillyRayPreachersSon]

- Does your markup validate?

- Does your CSS validate?

- Does your page have a complete and valid DOCTYPE?

- What is the URL? We have no access to your images.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[Borvik]

Yes - to the three questions.

I wondered about that last one.

Here is an example page (I stripped out everything but the header), and the FireFox Mac CSS is not being output.

http://borvik.gotdns.com/example/

 

[ChrisHunt]

For future reference, it's easier to see and fix problems if you construct a stripped-down test page with only the (mis)behaviour you're talking about and its associated CSS. Otherwise you tend to lose sight of what's important in amongst all the "turn this link this colour" rules.

The stripping down exercise can also, quite often, lead you to discover the rule that's causing the problem - which is not always the one you think it is!

Not having access to a Mac, I'm not able to offer much help with this specific problem. My guess would be that the two platforms have differing default line height, and you don't seem to be defining one for the [tt]li[/tt]s which have the background images.

However, taking a step back, it seems to me that you're taking an over complicated approach to rendering a line of menu options. As I understand it, you want your menu centre-aligned and separated with custom images. Your HTML is fine (though you might be able to do without div#top_nav), but your CSS is stuffed with floats and positioning and whatnot. How about doing something like this?:

#header #top_nav ul{
   list-style:none;
   margin:0;
   padding:0;
   text-align:center;
}

#header #top_nav ul li{
   display:inline;
   padding:0 0 0 10px; /* left padding to hold image */
   background: url('images/layout/navbar_sep.jpg') left 50% no-repeat;
   /* I'm wary of using px to position images when text could
      be resized, but you could do it that way if you want to */
}

#header #top_nav ul li.none{
   padding: 0;
   background-image: none;
}

Incidentally, you can use a similar approach to render your pipe-separated "mini nav" menu - just give the [tt]li[/tt]s a left border instead of a background image.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[BillyRayPreachersSon]

If you change the top 'px' value from 6px to 9px, they line up... but this goes awry even on Fx/Win if the text size is changed, so there are probably better ways of achieving the same goal.

Personally, I'd go with Chris's simplification!

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[ChrisHunt]

Incidentally, you can see my approach to centred horizontal menus in action at

http://napitalia.org.uk/eng/sag1.shtml

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd