Forum Moderators: not2easy
All other browsers (FF, Opera, IE7) render as expected. ie. The inline image has no effect on the line-height!
Initially testing with a Strict DOCTYPE, although the DOCTYPE makes no difference in this case.
Example...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
body {
font-size:1.5em;
line-height:5em;
}
#container {
background-color:#fcc;
}
</style>
</head>
<body>
<div id="container">
Blah blah blah
</div>
</body>
</html>
The height of #container is not explicitly set, but in ALL (inc IE6) browsers this will match the line-height (5em). And the text is vertically centred in #container.
Now add an image...
<div id="container">
Blah blah blah <img src="smallimg.gif" width="10" height="8" alt="">
</div>
In IE6 the height of #container is reduced to just contain the text. The line-height has been ignored/negated?! ALL other browsers are uneffected; the height/line-height is still 5em. Explicitly setting line-height on the #container has no effect. Setting height:5em does correct the height of the container, but the line-height is still ignored (ie. the text remains at the top of #container).
Giving the #container hasLayout (ie. width) has no effect.
If the text spans several lines, a similar effect happens, but only on the line that contains the image and only if that line is the first or last in the container (I think).
What's going on? Am I missing something? IE bug? What bug? I'm not sure how I've not noticed this before; as I feel sure I've vertically centred a single line of text plus image in a container before... may be not?!
Search Phrases:
[Line-height / Replaced Element Bug]
[line-height problem with inline images]
some solutions are in the pages you will find
- Wrap your image in other images of width 1px and a height equal to the line-height. (Or use an "empty inline-block (hasLayout) span, with height the desired line-height")
- Adjust the top and bottom margins of the image to match the line-height
- Use a background-image
(fixed in IE7 IIRC)
Only partially fixed in IE7 it seems. In the scenario given above it has, but it still a problem if the line-height is less than normal or if the image is taller than the line-height.
