Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

IE6 and negative margins



9:45 pm on Dec 4, 2008 (gmt 0)

5+ Year Member

I have been trying all day, applying all fixes I can find and I can not get this layout to work. I would love if someone could give me a hand. I'm working on a ZenCart layout.

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.


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;
margin: auto;


#headerWrapper, #contentMainWrapper, #logoWrapper, #mainWrapper {
margin: 0em;
padding: 0em;

#logoWrapper {
margin-left: -60px;
height: 240px;
margin-bottom: -20px;

* html #headerWrapper #logoWrapper {

#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;
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=""><img src="...logo3.jpg" alt="" title=" " width="900" height="240" /></a></div>
<br class="clearBoth" />

<!--eof-branding display-->
<!--eof-header logo and navigation display-->


<table width="100%" border="0" cellspacing="0" cellpadding="0" id="contentMainWrapper">

<!--bof-navigation display -->
<div id="navSuppWrapper">
<div id="navSupp">
<!--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 -->


Thank you in advance for any help or pointers to the right direction to go.


4:42 am on Dec 5, 2008 (gmt 0)

5+ Year Member

Not sure exactly how, but I finally got it fixed. Apparently it had something to do background settings.


5:26 am on Dec 5, 2008 (gmt 0)

5+ Year Member

One problem I've run across when using negative margins is borders. Right off the top I don't remember if it was just in IE6 or not, but I've had many cases where I couldn't get a block element to line up because of a border. I couldn't get those negative values to "pull" that element "across" the border, so the outside of the inner element would line up with the outside of its containing element. The border was like a fence. Without actually trying out your code I couldn't say that was your problem, because I'd have to play around to remember what it was I was doing wrong and what I did to fix it. Practically everybody here knows more than me about it, so hopefully someone will be along to tell you where your code went wrong. Dont' pull out too much hair. ;)

Featured Threads

Hot Threads This Week

Hot Threads This Month