Sent by Michael Williams on 6 March 2006 00:12
Hi,
I'm stumped by an extra three pixels of padding that are appearing at
the bottom of images I enclose in divs. I've reduced it to a test
case. Message continues below. (I've only been able to check in
Firefox, Camino, Safari and IE/Mac, as I do not have access to a
Windows PC.)
****
<!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>XHTML/CSS Scratchpad</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body {
border: 0;
padding: 0;
background-color: gray;
}
img {
padding: 0px;
margin: 0px;
}
#wrapper {
padding: 0px;
margin: 0px;
background-color: yellow;
border: 5px solid blue;
width: 200px;
}
</style>
</head>
<body>
<div id="wrapper"><img src="http://img475.imageshack.us/img475/9860/
test2be.jpg"></div>
</body>
</html>
***
The image is just a cream 200x200 square. Note the three pixels of
extra space, which are presumably yellow padding picked up from
#wrapper. This extra padding does not appear (i.e. I get the desired
and expected behavior) if I get rid of the wrapper div and apply the
rules directly to the image. Again, message continues below.
***
<!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>XHTML/CSS Scratchpad</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body {
border: 0;
padding: 0;
background-color: gray;
}
img {
padding: 0px;
margin: 0px;
background-color: yellow;
border: 5px solid blue;
width: 200px;
}
</style>
</head>
<body>
<img src="http://img475.imageshack.us/img475/9860/test2be.jpg">
</body>
</html>
***
I would be very grateful if someone could explain this to me. Thanks
in advance,
--
Mike Williams
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
