[SOLVIZZLED] IE bottom space on images.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

[SOLVIZZLED] IE bottom space on images.

Post by JellyFish »

There appears to be a 3 or 4 pixel spacing at the bottom of my <img> tags in IE6 (haven't tested it in IE7). Why is this and is there a fix that wouldn't bother other browsers?

Thanks for reading. All help is appreciated on this.
Last edited by JellyFish on Wed Feb 07, 2007 7:04 pm, edited 1 time in total.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Theres two solutions to this problem, one is HTML and one is CSS. The problem is IE renders space for the bottom of y's and g's and whatnot.

The HTML version is to place a <br /> directly after the problem image tag(s) (without whitespace between the tags!) which tricks IE into thinking theres another line to make, and avoids the extra space.

The CSS version is to use vertical-align: bottom; where the text is aligned to the bottom line, which is where most characters end, but now y and g, etc. end there.

Take your pick. I've made it a habit to add breaks after images.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

I tried the break method and it works like a charm. Although I wouldn't think it to be good use if text is after the image.

[s]And the other method is simply setting vertical-align css property to bottom on the parent element wraped around the image? Or is it an anchor to set the property?[/s] EDIT: To the img tag it's self, shall it be(tested it)!

And as of why this happens you say "The problem is IE renders space for the bottom of y's and g's and whatnot. " which I don't understand the part when you say y's and g's? I'm assuming these are some dimensions or axis'?
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

All characters that go below the line known as "bottom" are q, p, y, g, and j. Try it out.

Make an element with text in it that has those characters in the bottom line and look at it. Then, add the break and you'll notice you can no longer see anything below the "bottom" line. With vertical-align: bottom, it moves all of the text up so the bottom of the characters that extend beyond the "bottom" line are now at the "bottom" line.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

superdezign wrote:All characters that go below the line known as "bottom" are q, p, y, g, and j. Try it out.

Make an element with text in it that has those characters in the bottom line and look at it. Then, add the break and you'll notice you can no longer see anything below the "bottom" line. With vertical-align: bottom, it moves all of the text up so the bottom of the characters that extend beyond the "bottom" line are now at the "bottom" line.
Oooooh... I see. Thanks for clearing that up and I appreciate your post REALLY, REALLY helped! Thanks a $#!t load man. :D
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

It's a common problem with navigations.. I HAD to figure out why it was happening, and ever since, I've been sure to deal with it beforehand.
Post Reply