SiteCrafting Blah Blah Blog

Oct. 9, 2006 at 11:31am

Strange Behavior with Opera 9 and Safari

While I was working on the latest site for Airstream, I came on some extremely weird behavior concerning the navigation. First off, the designers did an extremely good job with the visuals. On the other hand, I had to be really creative to figure out how to make various parts of the site work.

Here's some background for how the navigation was supposed to work: there are five sections to the site, and each section has sub sections that show up in the navigation bar, depending on what your current location is. Navigation and sub-navigation. Also, the navigation area has a graphical background that can't change. Since the PNG spec isn't fully supported by IE yet, we had to go with GIF or JPG graphics.

Here's what it is supposed to look like (and what we ended up with):

Airstream - Intended

Initially, I had decided to put all the navigation data on each page. Each navigation section would have the section image, and a div for the sub-navigation. The sub-navigation would be set to display: none; unless the parent div had the class active, when it would be display: inline;

#nav_list div {
    float: left;
    border-right: 2px dotted #555;
}

#nav_list div div  {
    display: none;
    border: none;
    padding: 0;
    margin: 0;
}

#nav_list div.active .subnav {
    display: inline;
    margin: 0;
    padding: 0;

    margin-top: -140px;
    height: 141px;

    width: 241px;
    background: url('../images/nav_background_off.gif') repeat-y 30px;
    margin-left: 6px;
    border-right: 2px dotted #555;
}

There were a few issues that came up while creating the site that related to this CSS, such as if the overall height of the sub-navigation was zero (the sum of the margin and height), the layout breaks. I didn't understand at the time why this was happening, but after going to An Event Apart Seattle, I can see why it happens. (A zero height means that an item doesn't exist. This might be an interesting way to show and hide elements...)

Anyhoo, this all worked fine in Firefox while I was developing it. IE was another issue, but IE is an issue in itself. (The active sub-nav item has a lime background, so it's easier to see what I'm talking about.)

Firefox view

When I went to test this site in Safari and Opera, the craziness started to happen.

Here's what it looked like in Opera:

Opera View

And here's Safari:

Safari View

The strangest part of this behavior is that both Opera 9 and Safari have passed the ACID 2 test, and yet here they have totally different results. Fixing this didn't involve any CSS trickery, it actually ended up being somewhat less-than-elegant. Because I didn't have to be too concerned about the page resizing (fixed width design), I simply set position: absolute; on the active .subnav. This forced it to start at a specific location, rather than where ever it pleased.

I am guessing that the .subnav was set to display: block; although I didn't specifically define it. Setting the it to position: relative; may have worked as well, but I didn't try it. I'm really curious to find out why Opera 9 and Safari behaved so differently with the same CSS and HTML, and why Firefox was able to render the CSS as expected.

Posted in Browser Bugs, CSS by Dave Poole

Comments (0)

Add your comment below


Remember me
Name: Email: URL: Comment: *   No HTML, http:// will auto-link
* required    Comment Guidelines