Log in

View Full Version : IE6 Ugliness In Layout of Web Page


toad78
03-06-2008, 06:33 PM
Can anyone tell me why IE6 is not displaying this page correctly?


/* CSS Document */
html, body {
margin: 0;
padding: 0;
font: 12px Arial, Helvetica, sans-serif;
color: #000;
background-color: #fff;
}

html>body {
margin: 1em auto 0 auto;
padding: 0;
font: 12px Arial, Helvetica, sans-serif;
color: #000;
background-color: #fff;
text-align: center;
}

#mc-body-center {
text-align: center;
width: 1000px;
margin: 0 auto;
padding: 0;
}

#mc-body {
position: relative;
margin: 0 auto;
text-align: left;
padding: 0 0 10px 0;
}

#header {
position: relative;
top: 0;
left: 0;
height: 142px;
background: #592046;
margin: 0;
padding: 10px 0 0 0;
}

#header_left {
position: relative;
float: left;
padding: 0 0 0 25px;
width: 115px;
}

#header_center {
position: absolute;
width: 536px;
height: 90px;
left: 242px;
top: 20px;
}

#header_right {
position: absolute;
width: 80px;
left: 888px;
}

#mc-menu {
height: 32px;
font: bold 16px Garamond, "Times New Roman", Times, serif;
background-color: #EADAC3;
position: relative;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #756D62;
border-bottom: 1px solid #756D62;
}

#mc-menu ul {
margin: 8px 0 0 125px;
padding: 0;
background-color: #EADAC3;

}

#mc-menu li {
text-transform: capitalize;
position: relative;
list-style: none;
margin: 0;
float: left;
padding: 0 20px;
width: auto;
}

#mc-menu li a {
display: block;
line-height: 18px;
height: 18px;
text-decoration: none;
color: #592046;
text-align: center;
}

#mc-menu a:hover {
text-decoration: underline;
color: #592046;
display: block;
text-align: center;
line-height: 18px;
height: 18px;
font-weight: bold;
}

#columns {
position: relative;
border-top: 0px;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
left: 0;
top: 0;
margin: 0;
padding: 10px 0 10px 0;
}
#column_left {
left: 0;
top: 0px;
margin: 0;
font: 12px/18px Verdana, Arial, Helvetica, sans-serif;
padding: 0 0 8px 0;
position: relative;
width: 650px;
}

#column_left h1 {
font: bold 16px Arial, Helvetica, sans-serif;
height: 16px;
line-height: 16px;
text-transform: uppercase;
margin: 10px 0 5px 0;
padding: 0;
}

#column_left p {
margin: 2px 0 7px 0;
padding: 0 50px 0 0;
font: normal 12px/16px Verdana, Arial, Helvetica, sans-serif;
}

#bottom_column {
position: relative;
left: 0px;
top: 0px;
}

#column_right {
border: 1px solid #009999;
float: right;
display: inline;
width: 336px;
margin: 0 0 0 10px;
padding: 0;
background: #B2C9D0;
height: 342px;
}

#column_right h1 {
line-height: 20px;
font: bold 14px Arial, Helvetica, sans-serif;
text-align: left;
text-transform: uppercase;
padding: 5px 0;
margin: 0 0 0 10px;
color: #000;
text-decoration: underline;
}

#column_right p {
line-height: 16px;
margin: 5px 20px;
padding: 0;
font: normal 14px/18px Jester, Verdana, Arial, Helvetica, sans-serif;
text-indent: 8px;
}

#copyright {
font-size: 10px;
color: #592046;
text-align: center;
clear: both;
height: 30px;
}

.heading {
margin: 0;
padding: 10px 0 5px 0;
}

.curving {
float: right;
clear: right;
margin: 0;
padding: 0;
}

.monthact {
height: 46px;
background-color: #8EA7AF;
}

.imagetitle {
margin: 10px 0 0 51px;
}

.clearer{
height:1px;
overflow:hidden;
margin: -1px 0 0 0;
clear:both;
}


<body>

<div id="mc-body-center">
<div id="mc-body">
<div id="header">
<div id="header_left"><!-- #BeginLibraryItem "/Library/moms_image.lbi" -->
<a href="http://www.momsclub.org/" target="_blank"><img src="images/MOMS_logo.jpg" alt="" width="115" height="124" border="0" /></a><!-- #EndLibraryItem --></div>
<div id="header_center"><!-- #BeginLibraryItem "/Library/welcome_image.lbi" -->
<a href="http://www.momsclubofripon-salida.org/" target="_self"><img src="images/Welcome_MOMS_Club_Ripon_Sal.gif" alt="Welcome to the MOMS Club of Ripon-Salida, CA" width="536" height="90" border="0" /></a><!-- #EndLibraryItem --></div>
<div id="header_right"><img src="images/MOMS_Support.jpg" width="80" height="124" alt="" /></div>
</div>
<div id="mc-menu">
<ul>
<li>Home</li>
<li><a href="history.html">History</a></li>
<li><a href="service_projects.html">Service Projects </a></li>
<li><a href="activities.html">Activities</a></li>
<li><a href="recipes.html">Recipes</a></li>
<li><a href="join_the_club.html">Join</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="columns">
<div id="column_right">

<div class="monthact"><img src="images/this_month.jpg" alt="This Month's Activities" class="imagetitle" /></div>

<p>Jelly Belly Factory Tour</p>
<p>Tune Time</p>
<p>Spring Crafts</p>
<p>MOMS Club Open House</p>
<p>MOMS Night Out (MNO)</p>
<p>Park Play</p>
<p>Storytime</p>
<div id="jelly_bean">
<img src="images/jelly_bean/jelly_bean_02.jpg" class="rightcurve" />
<img src="images/jelly_bean/jelly_bean_04.jpg" class="rightcurve" />
<img src="images/jelly_bean/jelly_bean_06.jpg" class="rightcurve" />
<img src="images/jelly_bean/jelly_bean_07.jpg" class="rightcurve" />
<img src="images/jelly_bean/jelly_bean_08.jpg" class="rightcurve" />
<img src="images/jelly_bean/jelly_bean_10.jpg" class="rightcurve" />
<img src="images/jelly_bean/jelly_bean_11.jpg" class="rightcurve" />
<img src="images/jelly_bean/jelly_bean_13.jpg" class="rightcurve" />
<img src="images/jelly_bean/jelly_bean_15.jpg" class="rightcurve" />

</div>
<p>Spring Fling</p>
<p>Cooking Club</p>
<p>Lunch N' Play</p>
<p>Play Group</p>
</div>

<div id="column_left">

<div class="m1"></div>
<div class="m2"></div>
<div class="m3"></div>
<div class="m4"></div>
<div class="m5"></div>
<div class="m6"></div>
<div class="m7"></div>
<div class="m6"></div>
<div class="m3"></div>
<div class="m8"></div>
<div class="m9"></div>

<div class="heading">
<img src="images/who_are_we.jpg" alt="Who Are We?" />
</div>
<p>We are Moms Offering Moms Support for the at-home mom. We offer support for moms who are looking for advice on the care of not only themselves, but for their children as well.</p>
<p>We offer lots of <a href="activities.html">activities</a> for families, moms, children, and even DADS! </p>
<p>We also have a Moms Night Out (MNO) once a month for those moms who would like to go out for dinner, movie, or just to gather for a coffee night. Not only is it theraputic, but it's a great way to get to know other moms and a GREAT way to make new friends.</p>
<p>If you'd like to join us, potential members are welcome to visit two business meetings before joining the club. If you have any questions, contact us by emailing: </p>
</div>
</div>
</div>
</div>
<div class="clearer"></div>


<div id="copyright"><!-- #BeginLibraryItem "/Library/copyright.lbi" --><p>&copy; 2008 MOMS Club of Ripon Salida, CA. All Rights Reserved.<br />
Problems with this site, please contact the.<br />
** The MOMS International Club and the MOMS Club of Ripon-Salida, CA does not endorse nor guarantee any products or services advertised **</p>

<!-- #EndLibraryItem --></div>

</body>

I'm not sure what I'm missing; maybe a hack?
toad78
boogyman
03-06-2008, 09:53 PM
check your margins / widths. IE6 has really bad rendering of widths, so you need an "extra" wide gutter space. if you either decrease the margins and/or width you will see your floats will display correctly.
toad78
03-07-2008, 12:19 AM
check your margins / widths. IE6 has really bad rendering of widths, so you need an "extra" wide gutter space. if you either decrease the margins and/or width you will see your floats will display correctly.

OK. I'll check that out!
toad78