Browser Quirks

Posted by Hans de Ruiter

I just spent a few agonizing hours adjusting the page layout of this site. All I wanted to do was shift the main navigation bar above the splash image, and then right-align the menu items. Not being familiar with CSS (I am not a web designer), this was a trial-and-error process interspersed with searches for information on CSS. The real killer was that Firefox 3 was not rendering things the way that I wanted, whereas Internet Explorer was (although Internet Explorer still messes up the fonts). I have taken to testing layouts on multiple browsers, as there is no knowing whether it will look right on all of them.

In this case, right aligning an unstructured list (the <ul> and <li> tags) proved to be a problem. The HTML code looks something like this:

    <div id="nav"> 
        <ul> 
            <li> item1</li> 
            <li> item2</li> 
            .... 
        </ul> 
    </div> 

For some reason, Firefox refused to render the backround image of the "nav" section with the list tags inside; instead, it showed a boring grey. The final solution? As silly as it sounds, setting the height of the "nav" style in the CSS file solved the issue.

To be fair, browser developers do have a hard task. CSS and other web standards are incredibly complex, and people tend to interpret specifications slightly differently, no matter how carefully they are written. In this case, it is probably a bug in Firefox 3, as background images have no problem in other parts of my pages.

Comments (0) | 23 June 2008