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.
[SOLVIZZLED] IE bottom space on images.
Moderator: General Moderators
[SOLVIZZLED] IE bottom space on images.
Last edited by JellyFish on Wed Feb 07, 2007 7:04 pm, edited 1 time in total.
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
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.
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.
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'?
[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'?
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
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.
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.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.
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm