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?

Code:

/* 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;
}

HTML Code:

<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

Originally Posted by boogyman

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

Thread: IE6 Ugliness In Layout of Web Page

Thread Tools

Search Thread

IE6 Ugliness In Layout of Web Page

Bookmarks

Bookmarks

Posting Permissions