Forum Moderators: not2easy
#footer {
clear: both;
margin: 0;
border-style: dotted;
border-width: 1px;
border-color: #545454;
}
/**************
*************** BOARDER
**************/
#wrapper {
width:100%;
min-width: 700px;
max-width: 1400px;
margin:0px auto;
background:#fff url(images/leftside.gif) repeat-y left top;
}
.top {
width:100%;
height:20px;
background:url(images/top.gif) no-repeat left top;
}
.top span {
display:block;
position:relative;
height:20px;
background:url(images/top-right.gif) no-repeat right top;
}
.center-content {
position:relative;
background:url(images/rightside.gif) repeat-y right top;
padding:1px 20px 1px 25px;
margin:-1px 0 -50px 0;
}
#main-content {
float: left;
width: 60%;
margin: 0 1% 0 1%;
clear: both;
background-color: lightgrey;border-style: dotted;border-width: 1px;border-color: red;
}
#sub-content {
float: right;
width: 30%;
margin-right: 1%;
background-color: lightgrey;border-style: dotted;border-width: 1px;border-color: red;
}
.bottom {
height:60px;
background:url(images/bottom.gif) no-repeat left bottom;
}
.bottom span {
display:block;
position:relative;
height:60px;
background:url(images/bottom-right.gif) no-repeat right top;
}
<!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">
<head>
<style type="text/css">@import url(test.css);</style>
</head>
<body>
<div id="wrapper">
<div class="top"><span></span></div>
<div class="center-content">
<!-- CONTENT BEGIN -->
<div id="main-content">
<h2>#main-content</h2>
<p class="hidden-navigation"><a href="#navigation" title="Jump to the main navigation">Skip
to navigation</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mattis
sem in risus. Aliquam congue magna pharetra orci. Quisque varius consequat
lacus. Sed et ipsum sit amet est varius eleifend. Phasellus congue lorem
ac ipsum. Etiam enim felis, blandit vitae, dignissim eget, viverra id,
risus. Pellentesque sit amet elit. Sed fringilla ligula et libero. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos. Praesent nec lorem. Sed nec purus non libero dignissim porttitor.</p>
</div><!-- MAIN-CONTENT -->
<div id="sub-content">
<h2>#sub-content</h2>
<p class="hidden-navigation"><a href="#navigation" title="Jump to the main navigation">Skip
to navigation</a></p>
<p>check out the message board for discussion on all topics including past
housing, active chapter members, legends and much more.</p>
</div><!-- SUB-CONTENT -->
<div id="footer">
<h2>#footer</h2>
</div>
</div> <!-- CONTENT END -->
<div class="bottom"><span></span></div>
</div> <!-- WRAPPER -->
</body>
</html>
Hope that helps!
first do you need that border on your footer because I think removing it, 'fixes' it quickly (note I don't for one minute think this is the best fix, but it may be enough for your needs ;))
the bigger problem is IE, the negative margin and all the relative positioning, I'm getting so many different results playing around with it that I'm not sure which you want so I'll just post what I tried and landed up with
try changing the background images to colors temporarily and then remove the relative positioning from *all* the divs, this solves the pixels gaps but makes the content disappear in IE inc IE7 :o but I think putting it [position: relative] back onto the floats and the footer ONLY should bring it back.
here's the CSS I have just now, which seems to fix it properly:
#wrapper {
width:100%;
min-width: 700px;
max-width: 1400px;
margin:0px auto;
background: #000; /* black */
}
.top {
height:20px;
background: #fff; /* white but gets overlaid */
}
.top span {
display:block;
height:20px;
background: #ff0; /* yellow */
/*position:relative;*/
}
.center-content {
background: #0f0; /* lime green */
padding: 1px 20px 1px 25px;
margin:-1px 0 -50px 0;
/*position:relative;*/
}
#main-content {
float: left;
width: 60%;
margin: 0 1%;
background: #eee; /* light grey */
position: relative; /* added */
}
#sub-content {
float: right;
width: 30%;
margin-right: 1%;
background: #eee; /* light grey */
position: relative; /* added */
}
#footer {
clear: both;
border: 1px dotted #f00; /* red */
position: relative; /* added */
}
.bottom {
height:60px;
background: #fff; /* white but gets overlaid */
}
.bottom span {
display:block;
height:60px;
background: #ff0; /* yellow */
/*position:relative;*/
}
h2 {margin: 0.5em 0;}
however like I said I've tried so much stuff I'm lost and just wanted to post this while I remembered.. it's basically hasLayout and position:relative problems combined.
added:re hasLayout: if you apply a hasLayout fix to the
center-contentlet us know how you go or if this doesn't work..
Suzy
[edited by: SuzyUK at 3:33 pm (utc) on June 27, 2007]
Thanks for your help.
and sorry, but where's my manners.. Welcome to WebmasterWorld!
