What changed in firefox 3.6 to make <ul>'s render differently?

Question

Edit (Solution Discovered)

Thanks everyone for your help on this. The problem was an error in one of the lines of CSS that was being included (it's a large project with a huge combined CSS file so it was hard to spot). This was the problem line:

background:transparent url(sf-pager.gif') repeat-x scroll bottom;

Notice the missing apostrophe. IE6, IE7, and Firefox 3.5 seem to just ignore this line and continue with the rest of the combined CSS file no problem. Firefox 3.6 and Google Chrome error out on this line and refuse to include the rest of the combined CSS file. Problem solved!!!

Here's the original unedited question...

I'm developing a webapp for IE6 (unfortunately) but also using firefox and chrome on the side. I've noticed a weird problem where my ul lists are not rendered properly in chrome. They were rendering fine in IE6/IE7 and firefox 3.5, but after upgrading to firefox 3.6 it now looks the same as chrome. Here's what this menu is supposed to look like (IE6/firefox 3.5):

And here's what it looks like in Chrome and Firefox 3.6:

The code roughly looks like this:

<ul id="navMain">
  <li class="navMainLink">Top header</li>
  <li class="navMainLink">Top header 2 with dropdown
    <div class="navpop-wrapper" style="display:none;">
      <div class="navpop">
        <div class="navpop-header">A header in the popup</div>
        <div class="navpop-body">
          <ul>
            <li>An item</li>
          </ul>
        </div>
      </div>
    </div>
  </li>
</ul>

and some jquery onready:

$('#navMain li.navMainLink').hover(
    function() { $('div.navpop-wrapper', this).css('display', ''); },
    function() { $('div.navpop-wrapper', this).css('display', 'none'); }
);
$('#navMain .navpop-wrapper').bgiframe();

and here's the CSS:

#navMain
{
    float: right;
    height: 2.5em;
    padding-bottom: .4em;
    width: 420px;
    list-style: none; 
    margin:0;
}
.navpop-wrapper
{   
    display:block;
    position:absolute;
    width:276px;
    z-index:10000;
    padding: 2px 2px 2px 2px;
}
.navpop
{
    background:white;
    margin:0;
    display:inline-block;
    width:100%;
    padding-top:6px;
    padding-bottom: 3px;
}
.navpop-header
{
    height:19px;
    margin:4px;
    clear:both;
}
.navpop-body
{
    clear:both;
}
.navpop-body div
{
    width:50%;
    float:left;
    display:inline-block;
}
.navpop-body ul 
{
    list-style-type:square;
    margin: 0 6px 3px 0px;
}
.navpop-body ul li
{
    font-size:11px;
    font-weight:bold;
    color:black;
    cursor:pointer;
    padding:0;
    margin-left:24px;
}
#navMain li.navMainLink
{ 
    float: left; 
    border: 1px solid #C8D7E1;
}

Any ideas on what changed from firefox 3.5 to 3.6? Clearly 3.6 is now acting the same as chrome.

Answer 1

It looks to me like several classes, or a complete stylesheet, are not being applied. Can you check using Firebug whether your styles actually apply? Maybe the problem is that a stylesheet is not loading in FF3.6/Chrome for whatever reason.

For everything else, I think you need to show more code, or provide a direct link.

Answer 2

Firefox 3.6 includes a new version of the Gecko rendering engine.

I ran into at least one issue with a slightly older version of MooTools when I tried the beta of FF 3.6, so I would check your page with and without the Jquery involved, as it's possible it's the javascript changes that are causing issues and not the HTML itself.

Basic layout rendering should not have changed that much, so it's more likely an obscure CSS change (such as interaction between unusual elements) or a javascript handling change.

Answer 3

Did you check to see if there were any CSS parsing warnings in the error console?

Answer 4

Interesting to note that FF 3.6 is stricter in how it interprets CSS (i.e., it was looking for that extra apostophe)