Can anyone explaing to me why an absolutely positioned element within a relatively positioned element is seemingly taking up space in the relatively positioned element when there is no height set for the relatively positioned element, but when the height is is specified, it does not?
I assumed the default value for height is auto when not specified, but I was under the assumption that an absolutely positioned element was taken out of the normal flow of elements, and should therefore not take up an space in its containing element.
My test code is below. Take a look in case I am missing something altogether which is causing the problem. With the height of #header commented out, there seem to be about 5 or so pixels of space (about the height of the text) that are added below the image, but when I use the height, it does not add the space.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body, html {
height: 100%;
margin: 0;
padding: 0;
}
#header {
width: 100%;
background-color: #CCCCCC;
position: relative;
/*height: 39px;*/
}
#myText {
position: absolute;
padding-right: 0.5em;
padding-bottom: 2px;
width: auto;
bottom: 0px;
right: 0px;
}
#myText a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #243E90;
text-decoration: none;
}
#myText a:hover {
color: #FFFFFF;
}
</style>
</head>
<body bgcolor="#999999">
<div id="header">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"/images/siteLogo.gif" width="400" height="39">
<div id="myText"><a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:test();">Text</a></div>
</div>
</body>
</html>
I assumed the default value for height is auto when not specified, but I was under the assumption that an absolutely positioned element was taken out of the normal flow of elements, and should therefore not take up an space in its containing element.
My test code is below. Take a look in case I am missing something altogether which is causing the problem. With the height of #header commented out, there seem to be about 5 or so pixels of space (about the height of the text) that are added below the image, but when I use the height, it does not add the space.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body, html {
height: 100%;
margin: 0;
padding: 0;
}
#header {
width: 100%;
background-color: #CCCCCC;
position: relative;
/*height: 39px;*/
}
#myText {
position: absolute;
padding-right: 0.5em;
padding-bottom: 2px;
width: auto;
bottom: 0px;
right: 0px;
}
#myText a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #243E90;
text-decoration: none;
}
#myText a:hover {
color: #FFFFFF;
}
</style>
</head>
<body bgcolor="#999999">
<div id="header">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"/images/siteLogo.gif" width="400" height="39">
<div id="myText"><a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:test();">Text</a></div>
</div>
</body>
</html>