Firefox/CSS/Image Problem

[SoRnMaN]

Hey guys, was wondering if ya'll could give me some insight on something. Just started laying out a new site and am running into an oddity.

When I put an image in a div, and only an image, it gives me 2 pixels of space at the bottom of the div under the image. However, this only occurs in Firefox, not in IE. After playing with padding and margins and everything, I am unable to get the space to go away.

Page in question:
http://bp.8xmedia.com/index.html

When in Firefox, it is pretty obvious where the problem is (on the bottom of the 2 blue curves).

Another thing, why does IE render png images so poorly? If I use web safe colors, and save a 24bit png in Photoshop using the same hex values as the background colors on a page, the colors turn out quite different when viewed in IE, although they look fine in Firefox.

 

[Shadow2531]

The div is set to float left and the img is inline, so #bluebarbottom img {display: block;} should do it.

On a side note, Opera differs from other browsers in that the defaut margin and padding are opposite of other browsers.

Opera:
body {margin : 0; padding: 8px;}

other browsers:
body {margin : 8px; padding: 0;}

So you need to set both the margin and the padding for the body to be consistent.

From your stylesheet, it looks like you want:
body {margin: 0; padding: 0;}

to fix the other part, add line-height: 0; to your bluebartop styles.

 

[SoRnMaN]

Thanks, the line-height fixed it, and added the padding: 0 to the body for Opera. Need to download it again, haven't installed it since I rebuilt my machine.