Results 1 to 3 of 3

Thread: IE6 Ugliness In Layout of Web Page

  1. #1
    Join Date
    Mar 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question IE6 Ugliness In Layout of Web Page

    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

  2. #2
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    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.

  3. #3
    Join Date
    Mar 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by boogyman View Post
    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •