css newb needs help

[cj2a]

Hi all,

My first run at setting up an all css site and it's slow going. I think I've about got things working, but there is one thing driving me crazy. Under the main photo on this home page there should be a 2px white margin. On every browser I've got on my mac it's fine (Firefox, Camino, Safari, Explorer, Navigator), but on a PC with Explorer the 2px jumps to more like 4px.

Here is the test site: http://www.artbitz.com/ff_web/

Here is the css that displays the photo, and the gray bar under it:

#main_image {
margin:0 0 2px 0;
width: 900px;
clear:both;
}
#subhead_bar {
width: 900px;
height: 26px;
margin:0;
border-bottom: 4px solid #a8a8a8;
background-color: #f5f5f5;
background: url(images/subhead_grad.jpg) repeat-y top left;
}

What's weird is that if I remove the 2px bottom margin on #main_image the white margin goes away on all the Mac browsers, which I would expect, but the PC then shows a nice 2px white margin...any ideas?

BTW, yes, I'm clearing a float in with the main_image...crude and probably not elegant...probably a much better way...I'm still learning.

Thank you in advance.

[hewligan]

Is this the problem? (http://www.positioniseverything.net/explorer/threepxtest.html)

[CurtisS]

In addition to hewligan's response, are you clearing image padding and margins at the beginning of your CSS?

img {
margin:0;
padding:0;
}

[cj2a]

Okay, thanks for the responses everyone.

I've added your image clearing code, and then did some reading on the three pixel jog...the only question about that is that the float is above the image in the header...the "clear:both" is for that. The extra space I'm fighting shows up even when I move the margin to the top of the subhead_bar instead of having it on the bottom of the main_image. Could this still be a three-pixel job problem in that scenario? I also thought (maybe incorrectly) that the three-pixel jog affected elements horizontally, not vertically...is that not the case?

Sorry for being a bit dim on this.

[cj2a]

I just did a test and removed the header completely (and the floats) and still end up with the space:

http://www.artbitz.com/jj_web/index7.html

This is really strange.