... I note that I have a vertical jump of 1 or 2 px. when changing
pages from home to "about Casper Shafer" or from home to "Casper's
will". All other pages are fine. FF is fine. Only one external style
sheet. No inline or embedded. Any ideas? Thanks Arnie Shafer http://abshafer.com
Please take the time for a simple page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Casper Shafer's Family in America</title>
<style type="text/css">
<!--
p {background:blue; font-size:5em;}
-->
</style>
</head>
<body>
<p><img src="cs_mono.gif" alt="C.S. Monogram">M</p>
</body>
</html>
You'll see the "M" does not sit on the bottom of the <p>. We expect that. The M opens a line-box. The M sits on the baseline. The image too sits on a baseline. This should be equal in every browser.
now delete the M <p><img src="cs_mono.gif" alt="C.S. Monogram"></p>
The line box from M has gone. But the image does not fall to the bottom, because images are replaced inline elements, and like any other inline elements, they inherit the font settings, sit on their own baseline, like a character. But IE does /not/ think so. Try.
Now insert a blank
<p><img src="cs_mono.gif" alt="C.S. Monogram"> </p>
IE will not show this blank, but it will open a line-box with a baseline for this blank and, yes, the img will sit on this again. All is well again in all browsers.
So the problem is that it make a difference if there is a blank (any whitespace like newline) or not in IE, but not in other browsers.
Fixes try to overcome with this differences between the browsers or with inconsistencies of a site in IE:
- deleting the whitespace
- img {display:block;}
- img {vertical-align:bottom}
- p {line-height:0; font-size:0;}
It depends on the situation. There is no rule of thumb nor a definitly solution. Sometimes we want this gap, sometimes not. The rule of thumb is that IE thinks different.
You are using tidy. The pages you are referring to have differences in the id="header" section.
#header p img {vertical-align: bottom} might fix it for you.
Note that the problem does have more aspects in IE
<ul><li><img> </li> <ul>
<dl><dd><img> </dd> <dl>
react different if there is whitespce or not: in IE, a <li> has a line-box by default no matter if its empty or not because of the bullet.
Ingo
______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
