HTML Funny Scoping Problems
Okay, in the following code, if you resize the font via the UA, the page doesn't respond correctly. If you actually remove the banner div from around the mainMenu div and try again, you will see the main menu background swell with the text resizing, the way it is supposed to (height: 1.45em;).
Why doesn't it work inside the banner div?
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Silas Reveille</title>
<style type="text/css">
div#banner {
position: fixed;
top: 0px;
left: 0px;
background: white url("reveille.gif") no-repeat fixed top left;
margin: 0px;
height: 77px;
width: 100%;
}
div#mainMenu {
background-color: black;
color: silver;
font: normal small-caps bold 11px Tahoma, sans-serif;
position: absolute;
bottom: 0px;
left: 170px;
height: 1.45em;
right: 0px;
margin: 0px;
padding: 0px;
}
div#mainMenuItem {
background-color: black;
text-transform: uppercase;
margin: auto 6ex auto 0ex;
padding: 0px;
height: 100%;
float: left;
}
</style>
</head>
<body>
<div id="banner">
<div id="mainMenu">
<div id="mainMenuItem">Home</div>
<div id="mainMenuItem">On-Call</div>
<div id="mainMenuItem">Configurations</div>
<div id="mainMenuItem">Reports</div>
<div id="mainMenuItem">Help</div>
</div>
</div>
</body>
</html>
