Forum Moderators: not2easy
I have a two column layout using separate wrappers so that I can position and add graphical borders, etc.
Here are my two problems:
1) In two cases (headerwrapper & transitionwrapper), IE isn't putting the 'background-image's UNDERNEATH the graphical borders.
2)Also, I have a negative right margin for the right border images, and in Firefox the 'background-image's display fully, but in IE they're cut off.
The stripped down shell that I got after following CSS Troubleshooting Refresher is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">...
<body>
<div id="sidewrapper">
<div id="sidetopwrapper">
</div>
<div class="middlewrapper">
<div class="left">
<div class="right">
<div class="middle">
</div>
</div>
</div>
</div>
<div class="transitionwrapper"></div>
<div class="bottomwrapper">
<div class="left">
<div class="right">
<div class="middle">
</div>
</div>
</div>
</div>
</div>
<div id="wrapper">
<div id="topwrapper">
<div class="left">
<div class="right">
<div class="middle">
</div>
</div>
</div>
</div>
<div class="middlewrapper">
<div id="headerwrapper">
<div id="headerimg"></div>
</div>
<div id="menu"></div>
<div class="left">
<div class="right">
<div class="middle">
</div>
</div>
</div>
</div>
<div class="transitionwrapper"></div>
<div class="bottomwrapper">
<div class="left">
<div class="right">
<div class="middle">
</div>
</div>
</div>
</div>
</div>
</body>
The applicable css is this (I tried to cut it down as much as possible, and I know it's ugly... I'm just learning):
/* Globals */* {
margin: 0;
padding: 0;
}
/* Main Wrappers */
#wrapper {
position: relative;
margin-top: 30px;
margin-left: 240px;
margin-right: 10%;
}
#sidewrapper {
position: relative;
float: left;
width: 200px;
margin-top: 100px;
margin-left: 20px;
}
#topwrapper {
position: relative;
z-index: 3;
top: 0px;
left: 0px;
width: 100%;
}
#sidetopwrapper {
margin-right: -5px;
background-image: url("images/SidebarHeader.png");
background-repeat: no-repeat;
height: 23px;
}
#headerwrapper {
overflow: hidden;
height: 368px;
margin-bottom: -246px;
}
.middlewrapper {
background-color:#61b7ed;
position: relative;
width: 100%;
height: auto;
margin-top: -182px;
}
#sidewrapper .middlewrapper {
margin-top: 0px;
}
.transitionwrapper {
position: relative;
width: 100%;
top: -40px;
z-index: 2;
background-image: url("images/Transition.png");
background-repeat: repeat-x;
height: 40px;
}
.bottomwrapper {
position: relative;
margin-top: -40px;
margin-bottom: 40px;
height: 23px;
width: 100%;
}
/* Positioning Classes */
.left {
padding-left: 23px;
}
.middle {
}
.right {
padding-right: 23px;
}
/* Main Border Specifics */
#topwrapper .left{
background-image: url("images/TopLeft.png");
background-position: left;
background-repeat: no-repeat;
}
#topwrapper .middle{
background-image: url("images/TopBorder.png");
background-repeat: repeat-x;
height: 23px;
}
#topwrapper .right {
margin-right: -5px;
overflow: visible;
background-image: url("images/TopRight.png");
background-position: right;
background-repeat: no-repeat;
}
.middlewrapper .left {
position: relative;
z-index: 3;
background-image: url("images/LeftBorder.png");
background-position: left;
background-repeat: repeat-y;
}
.middlewrapper .middle {
padding-top: 182px;
padding-bottom: 50px;
min-height: 400px;
}
#sidewrapper .middlewrapper .middle {
padding-top: 0px;
min-height: 200px;
}
.middlewrapper .right {
margin-right: -5px;
overflow: visible;
position: relative;
z-index: 3;
background-image: url("images/RightBorder.png");
background-position: right;
background-repeat: repeat-y;
}
.bottomwrapper .left {
background-image: url("images/BottomLeft.png");
background-position: left;
background-repeat: no-repeat;
}
.bottomwrapper .middle {
background-image: url("images/BottomBorder.png");
background-repeat: repeat-x;
height: 23px;
}
.bottomwrapper .right {
margin-right: -5px;
overflow: visible;
background-image: url("images/BottomRight.png");
background-position: right;
background-repeat: no-repeat;
}
/* Other Styles */
#headerimg {
position: relative;
z-index: 2;
top: 166px;
left: 8px;
height: 182px;
background-color: #b4e236;
background-image: url("images/KidsPlaying.jpg");
background-position: left;
background-repeat: no-repeat;
}
#menu {
position: relative;
z-index: 3;
top: 190px;
height: 60px;
background-image: url("images/MenuBG.png");
}
Any suggestions as to how I get this damn thing to work in IE?
Thanks in advance,
Evan.
PS. I tried to follow the posting guidelines as much as possible... Hopefully this isn't an asinine question.
<!--[if IE 6]>
<style>#wrapper{
zoom:1;
}
.middlewrapper .middle{
height:400px;
}
#sidewrapper .middlewrapper .middle{
height:200px;
}
#sidewrapper{
display:inline;
}
#headerwrapper{
position:relative;
}
</style>
<![endif]-->
It may be useful to note that in IE7, the changes had no noticeable effect. I'm running a Browsershots request now to see about IE6 and a few others.
If you have any other ideas I'd appreciate them.
Thanks,
Evan.
As I mentioned, those fixes were specifically for IE6 (look at the conditional comment operator I've used). Not sure what it looks like in IE7, although I'll be able to check when I get home
Thank you again for your help.. The <!--[if IE]> solution fixed the margin errors problem I was having. :)
Evan.
<!--[if lt IE 8 ]>
<!--[if lte IE 7 ]>
<!--[if IE 7 ]>
<!--[if IE 6 ]>
