Forum Moderators: not2easy
I have a div that has a height of 15px.
In the HTML code there is nothing in that div, but the CSS code gives it a height of 15px and a background image that also has a physical height of 15px.
However in IE 6 there seems to be a small gap below the background image. It seems as though the div is about 18px high
In Firefox and all other normal browsers there is no gap.
***********************
Here is the HTML code:
***********************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Home Page Test Page</title>
<link rel="stylesheet" type="text/css" href="psw_css.css"/>
</head>
<body id="home">
<div id="container">
<div id="header"></div>
<div id="hori_nav"></div>
</div><!--container-->
</body>
</html>
***********************
HERE IS THE CSS CODE:
***********************
body{
margin: 0;
text-align: center;
}
#container {
width: 760px;
height: 550px;
border: 1px solid black;
margin: 0 auto;
}
#header{
height: 130px;
border: 1px solid black;
}
#hori_nav {
height: 15px;
border: 1px solid black;
background: url(images/hori_nav.jpg) top center no-repeat;
}
Can anyone help
Thanks
Erdy.
Marshall
[edited by: Marshall at 2:18 am (utc) on July 15, 2007]
line-height: 15px
