cwlaw5
08-29-2006, 09:15 PM
Ran into something I thought was very odd and I wonder if anyone has any comments or can duplicate the problem on their end. I am using Dreamweaver on Mac to generate pages.
In the following code I want the image to fit tight to the top left corner. By setting the padding of the enclosing div to 0, that is what I expect to happen. However in Firefox and Safari the image is offset down about 10 px. However if i use a graphic that is taller than 16 px in height then it fits tight into the corner. You can try this by using any graphic and resizing it so that it is less than say 10 px in height. Then resize again to over 16 px and it fits into the corner. The problem goes away when the doctype is set to xhtml transitional. Also goes away when you set up a rule for the image to position absolutely. But why should that be necessary?
<!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=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#logo {
width: 480px;
float: left;
margin: 0px;
padding: 0px;
background: #666666;
height: 100px;
}
-->
</style>
</head>
<body>
<div id="logo"><img id="skipnav" src="/Templates/images/logo.jpg" alt="" width="85" height="6" /></div>
</body>
</html>
In the following code I want the image to fit tight to the top left corner. By setting the padding of the enclosing div to 0, that is what I expect to happen. However in Firefox and Safari the image is offset down about 10 px. However if i use a graphic that is taller than 16 px in height then it fits tight into the corner. You can try this by using any graphic and resizing it so that it is less than say 10 px in height. Then resize again to over 16 px and it fits into the corner. The problem goes away when the doctype is set to xhtml transitional. Also goes away when you set up a rule for the image to position absolutely. But why should that be necessary?
<!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=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#logo {
width: 480px;
float: left;
margin: 0px;
padding: 0px;
background: #666666;
height: 100px;
}
-->
</style>
</head>
<body>
<div id="logo"><img id="skipnav" src="/Templates/images/logo.jpg" alt="" width="85" height="6" /></div>
</body>
</html>