Forum Moderators: not2easy
My header image has a negative margin of 60px. It works fine in FF, Opera and even IE7. Since my client will be working with gov't employees, her site must display in IE6. My husband, who works for the gov't, says that IE7 is banned from gov't computers. So even though I'm seeing a drop in IE6 users, I can't just not support it.
I'm trying to include enough, but not too much information. I have the header image showing. However, the header and the main part of the page are off set to the left and now do not align with the navSuppWrapper, which appears to be centered as it should. There's also a white area on the right of the contentMainWrapper.
CSS:
body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #000000;
background-color: #ffffff;
background-image: url(../images/background.jpg);
background-position: center;
background-repeat: repeat;
}#mainWrapper {
position: relative;
zoom: 1.0;
background-color: #ffffff;
text-align: left;
vertical-align: top;
width:800px;
margin: auto;
}
#headerWrapper, #contentMainWrapper, #logoWrapper, #mainWrapper {
margin: 0em;
padding: 0em;
}
#logoWrapper {
margin-left: -60px;
min-height:0;
height: 240px;
width:900px;
margin-bottom: -20px;
}
* html #headerWrapper #logoWrapper {
position:relative;
}
#contentMainWrapper {
border-left: 2px solid #000000;
border-right: 2px solid #000000;
}
#mainWrapper {
margin: auto;
}
#navSuppWrapper {
margin: 0em;
background-color: #9a9a9a;
font-weight: bold;
color: #ffffff;
height: 1%;
width: 100%;
}
#navSuppWrapper {
width: 800px;
background-color: transparent;
background-image: url(../images/navsuppback.gif);
background-position: bottom;
background-repeat:no-repeat;
margin:auto;
height: 35px;
padding-top: 25px;
}
#navSupp {
color: #000000;
font-size: 12px;
text-align: center;
padding: 4px;
}
Main 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" dir="ltr" lang="en"><body id="indexHomeBody">
<div id="mainWrapper">
<!--bof-header logo and navigation display-->
<div id="headerWrapper">
<!--bof-branding display-->
<div id="logoWrapper">
<div id="logo"><a href="http://127.0.0.1/zencart/"><img src="...logo3.jpg" alt="" title=" " width="900" height="240" /></a></div>
</div>
<br class="clearBoth" />
<!--eof-branding display-->
<!--eof-header logo and navigation display-->
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="contentMainWrapper">
</table>
</div>
<!--bof-navigation display -->
<div id="navSuppWrapper">
<div id="navSupp">
TEXT HERE
</div>
</div>
<!--eof-navigation display -->
<!--bof-ip address display -->
<div id="siteinfoIP">Your IP Address is: </div>
<!--eof-ip address display -->
<!--bof- site copyright display -->
<div id="siteinfoLegal" class="legalCopyright">TEXT HERE</div>
<!--eof- site copyright display -->
</body></html>
Thank you in advance for any help or pointers to the right direction to go.
