Menu
Hi, everyone,
Once more I have spent an entire day banging my head against the wall trying to work with (or around) the more mysterious properties of CSS. I have now solved my problem (which was the appearance of a mysterious vertical gap) but I have no idea why. The code is as follows:
[CODE]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title>WTF?</title>
<style media=”screen” type=”text/css”>
html {
overflow-x: hidden;
padding-right: 10px;
overflow-y: scroll;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
height: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #000033;
font-size: 10pt;
background-color: #ffffdd;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 50px;
padding: 0px;
}
.layout, .topbar, .menu, .content {
text-align: left;
vertical-align: top;
background-color: transparent;
}
.layout {
width: 984px;
margin-top: 15px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
text-align: center;
padding: 0px;
background-color: transparent;
}
.topbar {
width: 100%;
height: 70px;
border: 0px;
margin: 0px;
padding: 0px;
background-color: #ccccff;
font-size: 36pt;
text-align: center;
}
.menuandcontent {
background-color: #ff9999;
padding-bottom: 5px;
}
.menu {
width: 170px;
float: left;
text-align: center;
padding-top: 10px;
}
.content {
margin-left: 185px;
background-color: #cccccc;
text-align: justify;
min-height: 365px;
padding-left: 15px;
padding-right: 25px;
padding-top: 10px; /* Setting this to 0px creates a gap */
}
</style>
</head>
<body>
<div class=”layout”>
<div class=”topbar”>
Topbar goes here.
</div>
<div class=”menuandcontent”>
<div class=”menu”>
<a href=”#”>Menu link 1</a><br />
<a href=”#”>Menu link 2</a><br />
<a href=”#”>Etc…</a><br />
</div>
<div class=”content”>
<h1>WTF?</h1>
<p>If the ‘padding-top’ property for this div is set to 0px, or
if it is omitted, a vertical gap appears. Why??</p>
<p>This is not a single-rowser quirk; it behaves similarly in IE
(8.0.6001.18702), FireFox (3.6.8), Chrome (5.0.375.125) and
Safari (3.1.1/525.17).</p>
</div>
</div>
</div>
</body>
</html>
This is a working example, just paste it into a HTML file and point your browser at it.
Note the line about 2/3 down, where it says:
[CODE]
padding-top: 10px; /* Setting this to 0px creates a gap */
As the comment suggests, setting padding-top here to 0px or removing the line entirely creates a vertical gap ABOVE the <div> that this CSS property is associated with. It just has to be there, and set to a value greater than zero; a value of 1px will make the gap disappear. And I have no idea why. Nor is this a single-browser quirk; I have tested this with the most recent versions of Firefox, IE, Safari and Chrome, and they all display exactly the same behavior.
What in the world wide web is going on here???
// Frank