Forum Moderators: not2easy
There is a container holding everything but the footer, a full width header across the top, a left column and then the content area, with a footer below the container.
It looks OK in all browsers and the left column background fills in all the way to the bottom of the container like it should no matter what the size of the content. However in Win IE 6 and 7 the text in content area drops down several inches from the top of the content area (short pages drop only a few inches long pages drop farther) so it may have something to do with the length of the text in content area.
I have set the body and html in CSS at 100% along with a few other hacks (min-height) which are supposed to work with this design but ended up taking out the hacks as they didn't make any difference.
If anyone can see the problem I'd appreciate knowing what caused the drop.
I have included only the relevant code:
=================CSS=====
body {
font-family: arial,Helvetica,sans-serif;
color: #000000;
font-size:14px;
top:0;
left:0;
margin:0;
padding:0;
height:100%; }
html { height:100%;}
div#container {
width:780px;
margin:0 auto;
text-align:left;
background-image: url(images/leftsidebar.jpg);
background-position: left top;
background-repeat: repeat-y; }
div#header {
width:780px;
padding-bottom:8px;
background-image: url(images/logo3.jpg);
background-repeat: no-repeat; }
div#leftsidebar {
width:170px;
float:left;
margin:0 0 0 4px; }
div#content {
width:605px;
margin:0 0 0 175px;
text-align:left;
padding:5px;}
div#footer {
width:780px;
height:50px;
margin:0 auto;
background-color:#ffffff; }
==================HTML======
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="en-us">
<link rel="stylesheet" type="text/css" href="aasasp2.css">
</head>
<body>
<div id="container">
<div id="header">
</div><!-- End header -->
<div id="horizmenu" class="menu">
</div><!-- End horizmenu -->
<div id="leftsidebar">
</div><!-- End leftsidebar -->
<div id="content">
</div><!-- End Content -->
</div><!-- End Container-->
<!-- FOOTER-->
<div id="footer" class="clearboth">
</div><!-- End FOOTER-->
<br><br>
</body>
</html>
If you put temporary contrasting colors onto the container, you should see the overflow (on the right side) and your top gap more clearly
If you do want an explicit width then the content div should only be 595px which is 780 - 175 - 10px (left/right padding) - however setting such a pixel perfect width might still cause the float drop in certain circumstances.
thanks much!
