CSS box/ul menu problem

Question

Hello, I am having serious trouble getting my css to work properly. It looks different in all 3 browsers that i use (Chrome, IE and FF).

Now to the question in hand, i have been trying to copy the example from the following url: h t t p : / / w w w .alistapart.com/articles/taminglists/ Just scroll down almost to the bottom and look for "In the Real World" and a blue menu.

I have implemented this menu, but i can't get the custom images to work (i use a custom image)

It works perfectly in Chrome, then i get the look that i am after. In IE i get a margin on the left hand side of the menu where the image is located and the image is inside this margin? and in FF, the images place themselves above the text and creates a funny look (also in the margin space).

My url is: http://homeweb.mah.se/~M09K0291/123789/Lab7/

Any ideas? I have been trying to add a separate stylesheet for IE and removed the paddings/margins again, but that didn't work. I want the output that Chrome is producing.

Answer 1

Every browser has their own set of defaults for margin, padding, spacing, etc. That's where most of the differences come from in CSS. Consider using a reset stylesheet for your whole site. This should give you a common baseline that all browsers should acknowledge. If you don't want to, or can't afford to set a reset CSS for the whole stylesheet, at least make one for your menu.

Make this the first rule for your menu, then define any other menu styles after this one:

/* This example assumes your menu is contained 
   in a <div /> with an ID of "menu" */
div#menu, div#menu ul, #menu li, ul#menu a
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    line-height: 1;
    list-style: none;
}

That should fix most of your problems.

Answer 2

The problem might be the way different browsers create lists: either with paddings or margins on list items.

If you remove the list-style-position rule and give a 32px margin-left on the li tag, you will see the check mark, at least in Firefox, lined up the way described. The Firebug extension is a great help in diagnosing such problems.

A reset stylesheet will also help you to bring uniformity the way browsers handle styles (as a faster answer correctly stated).