Hey, I've come across a strange behaviour that shows itself in IE 7.0
and Firefox 3 and probably other browsers.
In the code below, which is a complete HTML document which validates
as XHTML 1.0 Strict, I display an image named Images/DivLine1.jpg
(which is a simple 1x5 pixel blue line) inside two divs across 100% of
their width, the first of which has 50px height and the second of
which has 100px height. In both cases, I set the image to vertical-
align:bottom, and I expect the image to rest against the bottom of the
div box. But in each case, the bottom of the image is displayed at
(apparently) exactly 20 pixels from the top of the div. What is going
on?
--------------------code--------------------
<!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" xml:lang="en" lang="en">
<head>
<title>Test</title>
</head>
<body>
<div style="background-color:red; height:50px;"><img src="Images/
DivLine1.jpg" alt="DivLine1" width="100%" height="5px" style="vertical-
align:bottom" /></div>
<div><br /></div>
<div style="background-color:red; height:100px;"><img src="Images/
DivLine1.jpg" alt="DivLine1" width="100%" height="5px" style="vertical-
align:bottom" /></div>
</body>
</html>
--------------------code--------------------
Thanks,
bgold12
