Forum Moderators: not2easy
I have created the following layout, but IE6 is having trouble with it. I think the culprit is #boxes?
Any help would be greatly appreciated.
@charset "UTF-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
body {
text-align:center;
background-color:#e4e5e4;
font-family: Helvetica, Arial, sans-serif;
font-size:13px;
color:#323232;
}
#ueberwraapper {
text-align:left;
z-index:1;
}
#main_wrapper {
width:870px;
margin:0 auto;
margin-top:10px;
}
#top {
height:41px;
width:870px;
background-image:url(../images/top.jpg);
background-repeat:no-repeat;
}
#left_filler {
float:left;
width:21px;
height:149px;
background-image:url(../images/top_left.jpg);
background-repeat:no-repeat;
}
#middle {
float:left;
width:838px;
}
#right_filler {
float:left;
width:11px;
height:149px;
}
#banner {
width:838px;
height:149px;
background-image:url(../images/banner.jpg);
background-repeat:no-repeat;
}
#below_banner {
margin:0 auto;
clear:both;
width:870px;
height:73px;
background-image:url(../images/below_banner.jpg);
background-repeat:no-repeat;
}
#boxes {
z-index:2;
position:absolute;
top:233px;
height:200px;
width:870px;
text-align:left;
}
#left_boxes {
float:left;
width:435px;
}
DIV .portbox {
margin-bottom:10px;
margin-left:21px;
}
DIV .port_top {
height:61px;
width: 402px;
background-image:url(../images/port_top.jpg);
background-repeat:no-repeat;
}
DIV .port_body {
height:376px;
width: 402px;
background-image:url(../images/port_body.jpg);
background-repeat:no-repeat;
}
#right_boxes {
float:right;
width:435px;
}
DIV .aboutbox {
margin-bottom:10px;
float:right;
margin-right:11px;
}
DIV .about_top {
height:61px;
width: 399px;
background-image:url(../images/about_top.jpg);
background-repeat:no-repeat;
}
DIV .about_body {
height:376px;
width: 399px;
background-image:url(../images/about_body.jpg);
background-repeat:no-repeat;
}
#footer {
z-index:2;
clear:both;
}
#left_footer_filler {
width:86px;
height:87px;
float:right;
margin-top:9px;
background-image:url(../images/rss.jpg);
background-repeat:no-repeat;
}
#left_middle {
margin-top:34px;
float:right;
width:763px;
height:21px;
background-image:url(../images/footer.jpg);
background-repeat:no-repeat;
}
h1 {
text-indent:-99999px;
}
p.slogan {
text-indent:-99999px;
}
h2.portfolio {
text-indent:-99999px;
background-image:url(../images/portfolio.jpg);
background-repeat:no-repeat;
position:relative;
top:27px;
left:24px;
}
h2.about {
text-indent:-99999px;
background-image:url(../images/about.jpg);
background-repeat:no-repeat;
position:relative;
top:27px;
left:20px;
}
p.about {
line-height:19px;
padding:27px;
}
p.portfoliotext {
line-height:19px;
padding:27px;
}
p.footertext {
font-size:10px;
text-align:left;
color:#666666;
padding-top:5px;
padding-left:15px;
}
.highlight {
color:#ec008c;
}
.comm, .priv {
color:#3c9edc;
font-weight:bold;
}
.desc {
color:#999999;
font-size:12px;
}
a, a:active {
color:#015f9a;
font-weight:bold;
}
a:visited {
color:#447899;
font-weight:bold;
}
Nothing before that.
I would really, really appreciate some help on this as I have run out of ideas and sources.
Thanks!
p.s. here is my html:
<body>
<div id="ueberwrapper">
<div id="main_wrapper">
<div id="top">
</div>
<div id="left_filler">
</div>
<div id="middle">
<div id="banner">
<h1></h1>
<p class="slogan"></p>
</div>
</div>
<div id="right_filler">
</div>
<div id="below_banner">
</div>
<div id="boxes">
<div id="left_boxes">
<div class="portbox">
<div class="port_top">
<h2 class="portfolio">Portfolio</h2>
</div>
<div class="port_body">
<p class="portfoliotext">
</p>
</div>
</div>
<div class="portbox">
<div class="port_top">
<h2 class="portfolio">Portfolio</h2>
</div>
<div class="port_body">
<p class="portfoliotext">
</p>
</div>
</div>
</div>
<div id="right_boxes">
<div class="aboutbox">
<div class="about_top">
<h2 class="about">About</h2>
</div>
<div class="about_body">
<p class="about">
</p>
<p class="about">
</p>
</div>
</div>
</div>
<div id="footer">
<div id="left_footer_filler">
</div>
<div id="left_middle">
<p class="footertext">
</p>
</div>
<div id="right_footer_filler">
</div>
</div>
</div>
</div>
</div>
</body>
Correct ?
Now your #boxes ... why do you think it should be centered (is it in any other browser (at a different viewport size from what you usually use)
It's hard to know what it is referencing, but it isn't centered as such, it's absolutely position in reference to something.
But, so is my #boxes, at least in FF, SF, IE7&8.
Do you need the trick ?
If you do, you do have IE6 in quircks nonetheless. And you'll have many more IE issues in that mode than in standards mode.
Your #boxes seems not to have any parent that has gained position, and doesn't say where it needs to go horizontally.
I'd just give it the horizontal positioning in a conditonal comment (to prevent having to retest it all again), although it's unlikely to hurt any browser at all.
something like :
left:50%
margin-left:-435px; /* half the width on #boxes */
left:50%;
margin-left:-435px;
to #boxes as per your suggestion.
Unfortunately IE6 still insists on display #boxes all the way on the right side of the window and not centering it.
This issue is driving me nuts :(
