9 replies [Last post]
phyrko
Offline
newbie
Last seen: 15 years 22 weeks ago
Joined: 2005-06-30
Posts: 4
Points: 0

Hi,

I have a problem with this div in IE6. Firefox has it exactly right.

<img src="topleft.gif" style="display: block;" />

<div style="width: 726px; height: 15px; background-color: black; position: relative; left: 11px; top: -15px"></div>

<img src="topright.gif" style="position: relative; left: 737px; top: -30px; display: block;" />

The div is displayed as 19px high in IE6. The images are 15 px high, but the first has a 4 pixel space below it, the second a 4 pixel space above it. I have read that it could be something to do with a text box inserted in the div by IE6 but

line-height: 0px

or

<!-- --> inside the div

don't change anything. Also it seems to render normally as 15px when the images are not there

Does anybody know what is going on here?

Find the site at glasgowclubbing.com. (Note: *very* early development stages!!)

Thanks

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

&lt;div&gt; is 4 px too big (height) in IE6

Images are by default aligned along the text baseline. There is a small amount of space required below the baseline for letters with descenders (g,j,q,p,y). Try applying vertical-align:text-bottom to the img elements or try reducing the font-size to zero on the element that contains the img element.

phyrko
Offline
newbie
Last seen: 15 years 22 weeks ago
Joined: 2005-06-30
Posts: 4
Points: 0

&lt;div&gt; is 4 px too big (height) in IE6

Hmmm. No luck with either of those, I'm afraid. It really does seem to be the right line of enquiry, though, it must be something to do with the images.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

&lt;div&gt; is 4 px too big (height) in IE6

I am assuming you have zeroed all margins/borders/padding. I would then play around with background colours to detect exactly which element is producing the extra space.

Just out of interest, do you need to position the images with position:relative?

phyrko
Offline
newbie
Last seen: 15 years 22 weeks ago
Joined: 2005-06-30
Posts: 4
Points: 0

&lt;div&gt; is 4 px too big (height) in IE6

I have tried with position: absolute, it seems to make no difference to the size of the div sandwiched between the two images.

All borders and margins and padding set to 0px, line-height and font-size too. display:block is set and vertical-align: text-bottom.

Has nobody else enccountered this problem?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

&lt;div&gt; is 4 px too big (height) in IE6

isn't it vertical-align: bottom;?

larmyia
Offline
Elder
London
Last seen: 12 years 11 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

&lt;div&gt; is 4 px too big (height) in IE6

both are valid I believe.

larmyia

phyrko
Offline
newbie
Last seen: 15 years 22 weeks ago
Joined: 2005-06-30
Posts: 4
Points: 0

&lt;div&gt; is 4 px too big (height) in IE6

OK,

position:absolute and a set of comment marks <!-- --> inside the div have sorted the problem. Strange that the solution didn't seem to work with position:relative, but that's MS corporation for you.

Thanks for the responses guys.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

&lt;div&gt; is 4 px too big (height) in IE6

Just a note. There are more than two possible values for position. The default value is "static" and alot of the time leaving position at static (ie. not including it) and using margins, padding and floats instead, will save you a lot of problems.

tony ennis
Offline
newbie
Last seen: 11 years 13 weeks ago
Joined: 2009-08-31
Posts: 1
Points: 0

Chris..s +1 !

Chris..S wrote:

Images are by default aligned along the text baseline. There is a small amount of space required below the baseline for letters with descenders (g,j,q,p,y). Try applying vertical-align:text-bottom to the img elements or try reducing the font-size to zero on the element that contains the img element.

Dude, the differences between FF, IE6, IE7, and IE8 have been kicking my butt. The font-size:0px tip pretty much solved all the problems I was having - graphics were repeating when the containing divs were exactly the right size, some horizontally-oriented divs were very tall when I was specifying a height of 4px.

This is an old thread, but if you're still out there, thanks Chris!