Menu
This has been discussed, here, before, and I have read the threads and implemented the various approaches to fix this issue, but to no avail.
In short, I have two problems which seem to be related to the height of the DIV tags I’m using.
#1. In all browsers, my height:100% isn’t working. It’s only rendering the height of the visible window … not the height of the full page. I’ve found several solutions that don’t seem to work for me including putting a blank DIV around all my content (the theory being that the surrounding DIV is the height of the full page and all ‘height:100%’ that are embedded inside it will inherit that value), and making sure that the html element, itself, is equal to a height of 100%. Neither of these worked and I’ve got a colored column of variable width that’s just cutting off just below the fold. Suggestions?
#2. On IE only, my main content area is cutting off the bottom of my content. I’ve checked Position Is Everything, but I can’t seem to figure out what’s causing this. Again, suggestions?
The code I’m using is like this:
[CODE]<head>
<style>
* {
font:normal 10px Arial, Verdana, Sans-serif;
}
html, body, #sw_wrapper, #sw_leftNav, #sw_mainContent {
height:100%;
background:#ffffff;
padding:0px;
margin:0px;
}
#sw_leftNav {
margin:0px;
padding:0px;
background:#cd8b22 url(hands.jpg) no-repeat bottom right;
width:33%;
float:left;
}
#sw_generalNav {
margin:0px;
padding:0px;
width:auto;
}
#sw_mainContent {
margin:0px;
padding:0px;
background:url(background_ripples.jpg) no-repeat left top;
width:67%;
float:right;
}
#sw_pageContent {
position:relative;
top:110px;
padding:10px;
}
#masterLogo {
position:absolute;
left:22.5%;
top:20px;
border:none;
}
#sw_externalSearch {
position:relative;
float:right;
text-align:right;
padding:3px;
}
#sw_searchBut {
position:relative;
top:5px;
}
</style>
</head>
<body>
<img src=”logo2.gif” width=”200″ height=”88″ alt=”Logo” id=”masterLogo” />
<div id=”sw_wrapper”>
<div id=”sw_leftNav”>
<div id=”sw_generalNav”>
XXNavigationXX
</div>
<div id=”sw_catNav”>
<a href=”XXUrlXX” title=”XX”>XXCategoryNameXX</a><br />
</div>
</div>
<div id=”sw_mainContent”>
<form id=”sw_externalSearch”>
<input type=”text” size=”25″ maxsize=”125″ id=”sw_searchField” />
<input type=”image” src=”sw_search.gif” id=”sw_searchBut” />
</form>
<div id=”sw_pageContent”>
</div>
</div>
</div>
</body>
This has been kicking my ass for two days, now, and I’m exhausted. I’m probably not even seeing what I’ve done wrong.
Any help would be very gratefully accepted…
Yours,
Dave