2 replies [Last post]
APlusWeb
Offline
newbie
Last seen: 18 years 13 weeks ago
Joined: 2004-07-11
Posts: 1
Points: 0

for some reason, im trying to have a header bar with an image inside it. If i do not specify any margins or padding (on either the image or the div), I'll get an extra few pixels on the top or bottom of the image. I can see this by making the div's background color visible.

In netscape and firefox, the div collapses vertically onto the image, so there is no extra space visible, but the same thing doesnt happen in IE6.

Here is what i've tried:

1. margin/padding combinations everywhere involved.
2. negative margins on the image - a -3px bottom margin will solve the problem in IE6 but create one in Netscape.
3. border-collapse: collapse; doesnt work
4. 0px border on the image

i've heard about some 3px offset bug. does my problem have anything to do with this?

thanks a lot for any help, this has been eating my head alive for the whole day.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Extra space in an image div (IE 6)

Hi APlusWeb,
It's hard to guess without seeing the page.
You can find out more about the 3px jog from http://www.positioniseverything.net/explorer/threepxtest.html

Hope that helps

AtomicBirdsong
Offline
newbie
Last seen: 18 years 15 weeks ago
Joined: 2004-06-23
Posts: 10
Points: 0

Extra space in an image div (IE 6)

A gues without seeing the code is that you have a line height issue...the line heigh might be larger than the image....but this is a guess...

two solutions for this: reduce your line height, or spec your div as the same height as your image.

-AB