Patrick Patrick - 3 years ago 291
CSS Question

CSS box/ul menu

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:
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:

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download