Making CSS UL Menu’s Browser-Consistent

If you’ve ever made a web site and wanted it to look consistent from one browser to the next, then you’re well away of the difficulties that are involved. Fixing these sorts of styling issues can be a major annoyance, however, I like to hunt down issues on my own pages from time to time and stand up to the challenge.

One issue that I can across today was dealing with horizontal menu positioning using unordered lists (<UL>) and some positioning. The positioning wasn’t consistent between browsers or even operating systems.

The bad

I started by opening the affected page in multiple browsers (Internet Explorer, Safari, Chrome, Opera & Firefox) on multiple computers (Mac, Linux & Windows) and getting some initial comparisons. There were 3 different variations and (oddly enough) the same browser didn’t necessarily render the same on a different operating system. So there I was. A puzzle… and I like puzzles.

Some of the first things that I inspected were font sizes and families. It occurred to me that different operating systems may differ in fonts, so it seemed like a good starting point. I tested this by forcing a common font: Arial. That wasn’t the problem. The inconsistencies remained consistent.

I also checked into the possibility that the <UL> or <A> elements were applying different heights. Typically anchor elements, <A>, use a display style of inline. If you’re implementing a menu similar to mine then you’re likely applying a block style, which permits better dimension definition of the element. Forcing height on these elements also did not resolve the issue.

I was running out of ideas, but then it hit me. Line-Height. While the other styles appeared to be consistent between browsers and operating systems, there was one style that I’d previously worked with and knew was certainly NOT consistent: line-height.

The good

After forcing a consistent line-height in my CSS, all browsers suddenly began respecting my intended styling. Sigh of relief.

On that note, its worth bringing up the success that browser competition has brought to HTML and CSS rendering standards over the past few years. The push for the fastest and most capable browser has brought a scattered group of browsers a little closer and the result is that we get to enjoy dealing with fewer and fewer bugs.

While your average Joe web developer may have dug around for hours for this issue to no avail, I must say… I thought it was nice to face such a subtle issue rather than being forced to use some crazy IE specific hacks like for legacy IE.

4 thoughts on “Making CSS UL Menu’s Browser-Consistent”

  1. Opera 12.02 Opera 12.02 GNU/Linux x64 GNU/Linux x64
    Opera/9.80 (X11; Linux x86_64; U; en) Presto/2.10.289 Version/12.02

    I actually thought you were going to write about nested lists. Here’s an excerpt from the CSS on my blog:

    /* Nested lists don't get a (vertical) margin */
    ol ol, ol ul, ol dl, ul ul, ul ol, ul dl, dl ol, dl ul, dl dl {margin:0}
    /* Unifying display of nested unordered lists: 2 deep uses a circle (like Fx) */
    ul ul, ol ul {list-style-type: circle}
    /* Unifying display of nested unordered lists: 3 deep (& more) uses a square (like Fx) */
    ul ul ul, ul ol ul, ol ol ul, ol ul ul {list-style-type: square}
    /* Apply left margin: Only to the few elements that need it: */
    li, dd, blockquote {margin-left:1em}

    1. Opera 12.02 Opera 12.02 GNU/Linux x64 GNU/Linux x64
      Opera/9.80 (X11; Linux x86_64; U; en) Presto/2.10.289 Version/12.02

      PS I explicitly set line-height is in the first line of my stylesheet. It starts with a whole bunch of things to minimize browser differences. 🙂

  2. Firefox 4.0b8pre Firefox 4.0b8pre Windows 7 x64 Edition Windows 7 x64 Edition
    Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:2.0b8pre) Gecko/20101213 Firefox/4.0b8pre

    64-bit support for Firefox is inconsistent across operating systems. 64-bit is supported by Mozilla in OS X and Linux, but there are no official 64-bit releases for Windows.

Leave a Reply

Your email address will not be published. Required fields are marked *