HTML DIV and IMG tag spacing in IE vs. FF

Answer 1

It has to do with the default rules for IMG tags.

I recommend always using this in your stylesheet as a default rule:

img{
    display:block;
}

Answer 2

My guess is it's the line height of the image-elements line, since IMG is a an inline element. You could probably fix it by giving img#header display: block;.

Anyways, what you should really do is remove the entire image and use a H1-element plus one of the many image replacement-techniques out there.

Edit: When that is said, your menu should also be marked up as an unordered list (UL).

Answer 3

In "standard" browsers (and in fact IE6 with the proper DOCTYPE!), your image is INLINE mode by default, so it gets spacing as if it was a letter sitting on the baseline of text.

freelookenstein gave the solution to remove the extra spaces due to text alignment of INLINE mode.

It is the solution, but I would be careful about using a display:block by default as most likely that will mess up your typical web page content down the line.

You could either add the display:block property to a class or inline style on your image alone.

Or something like this:

img { display:block; }
p img, ul img, td img /* etc*/ { display:inline; }

Personally I would recommend to limit display:block only to those images you know are used for the site layout, or those that are specifically inset in boxes. In which case often you have already a class on the parent element like:

<div class="imagebox">
   <img .... />
</div>

.imagebox img { display:block; }

Answer 4

You should wrap your menu links in an unordered list and then style the items with CSS. There are some reason for doing this:

1. Structuring your navigation links as a list results in more semantic markup. It better represents the content you are presenting. If you were to view the site with no CSS styles at all (you can do this with the Web Developer Toolbar for Firefox), you would still get a meaningful representation of your site layout. This is especially meaningful if you intend the site to be viewable by mobile browsers.

2. This may also (slightly) help search engines prioritize the content and boost your ranking.

3. You can define a style for your list items with a border on one side and some margins to get the "pipe delimited" effect. This will be reusable and makes it easier to change the menus to some other style in the future.

See A List Apart - CSS Design: Taming Lists

There is an example there showing complete CSS for achieving this effect.