homepage Welcome to WebmasterWorld Guest from 54.166.128.254
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
IE6 and negative margins
tyles

5+ Year Member



 
Msg#: 3800317 posted 9:45 pm on Dec 4, 2008 (gmt 0)

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.

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.

 

tyles

5+ Year Member



 
Msg#: 3800317 posted 4:42 am on Dec 5, 2008 (gmt 0)

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

coaster01

5+ Year Member



 
Msg#: 3800317 posted 5:26 am on Dec 5, 2008 (gmt 0)

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. ;)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved