Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ie6 and floats ruining my life

    Hi. Am making a site and used Matthew James Taylor's perfect two column layout ... it looks exactly how I want it to look on firefox, safari, chrome, and ie7.

    On ie the main content div is smashed up against the menu on the left, and some of it shows up UNDER the menu. The nice border on the right side of the menu is pushed out from the menu (the faux-drop-down sub menu is supposed to be pushed out from the main set, and should be on top of the border as in firefox, chrome, etc). It's ugly.

    I did try making all my overflows: hidden; I did try adding display: inline;, but this changed nothing and I don't think that's the problem.

    This is a portfolio to help me find a new job, and I need this to look good. Any help would be greatly appreciated. Code below, and links to mock-up duplicates (can't post original for legal reasons as there are student photos).

    THANKS.

    CSS:

    Code:
        /* General styles */
        body {
    	padding: 0;
    	margin: 0;
    	border: 0;
    	background: #F6F0E6;			
            width:100%;
            min-width:600px;    					
    	font: normal 80% arial, verdana, helvetica, sans-serif;
    	color: #333
        }
    	
    
    	/* Header styles */
    
    #header {
            clear:both;
            float:left;
            width:100%;
    	background-color: #778899;
    	border-bottom: 6px solid #fff;
    	padding: 0;
    	height: 200px;
    	background-image: url('log.png');
    	background-repeat: no-repeat;
    	text-align: right;
        	}
    	
    	#header p {
    		font-weight: bold;
    		font-size: 1.3em;
    		color: #F6F0E6;
    		margin: 30px;
    	}
    	
    
    	
    
    /* column container */
    
    
    	.container {
    		position:relative;			    	
    		clear:both;
    	    	float:left;
            	width:100%;			
    		overflow:hidden;
    	}
    	
    
    /* 2 column left menu settings */
    	.sidelinks {
    	padding: 0;
    	margin: 0;
    	   	}
        
    	.sidelinks .content {
            float:left;
            width:200%;
    	position:relative;
    	left:196px;
            background: #F6F0E6;
    	
        }
    
        .sidelinks .col1wrap {
    	    float:right;
    	    width:50%;
    	    position:relative;
    	    right:200px;
    	  
    	}
    
    	.sidelinks .col1 {
            	margin:0 15px 0 215px;
    	    	position:relative;
    	    	right:100%;
    	    	overflow: hidden;
    	}
    
    	.sidelinks .col1 .meat {
    		width: 660px;
    		margin: 50px auto;
    		text-align: center;
    		margin-top: 30px;
    		background: #F6F0E6;
    		overflow: visible;
    }
    
    .sidelinks .col1 .meat p {
    	max-width: 600px;
    	text-align: justify;
    	line-height: 160%;
    	margin: 2em auto;
    
    }
        .sidelinks .leftcol {
            float:left;
            width:196px;
            position:relative;
            right: 200px;
    border-right: 4px solid #778899;
        }
    	
    /* Header styles */
    
    h2 {
    	text-align: center;
    	font-size: 1.3em;
    	border: 1px #778899 solid;
    	padding: 6px;
    	background-color: #fff;
    	margin: 20px -30px;
    	color: #708090;
    	overflow: visible;
    }
    
    h3 {
    	text-align: center;
    	font-size: 2em;
    	color: #708090;
    	text-shadow: 2px 2px 0px #fff;
    	margin: 0 0 30px 0;
    	border-bottom: 4px #778899 double;
    }
    
    h4 {
    	font-size: 1.2em;
    	color: #708090;
    	text-shadow: 1px 1px 0px #fff;
    	}
    h5 {
    	font-size: 1.1em;
    	text-align: center;
    	color: #708090;
    	padding: 0;
    	margin: 0;
    	letter-spacing: 3px;
    	font-weight: bold;
    }
    
    /* Link styles */
    
    .leftcol { 
    	width: 210px;
    	text-align: right;
    	padding: 10px 0 0 0;
    	margin: 0;
    	height: 100%;
    	
    	}
    
    .leftcol ul {
    	margin: 5px 10px 5px 0;
    	padding: 0;
    	list-style-type: none;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 1.1em;
    	font-weight: bold;
    }
    
    .leftcol a {
    	display: block;
    	padding: 20px 10px;
    	margin: 10px 0;
    	width: 176px;
    	height: 100%;
    }
    
    .leftcol a:link, .leftcol a:visited {
    	color: #708090;
    	text-decoration: none;
    }
    
    .leftcol a#current {
    	background-color: #778899;
    	color: #fff;
    	}
    .leftcol a:hover {
    	background-color: #c1cdc1;
    	color: #708090;
    }
    
    #header a {
    	color: #F6F0E6;
    }
    
    #header a:link, #header:visited {
    	color: #F6F0E6;
    	text-decoration: none;
    }
    
    #header a:hover, #header:active {
    	color: #fff;
    }
    
    a:link.inline, a:visited.inline {
    	font-weight: bold;
    	text-decoration: none;
    	color: #4a708b;
    	border: 2px solid transparent;
    	border-bottom: 1px dotted #4a708b;
    	padding: 2px;
    	padding-bottom: 0;	
    }
    
    a:hover.inline, a:active.inline {
    	color: #4a708b;
    	border: 2px solid #4a708b;
    	background: #fff;	
    }
    
    /* Image styles */
    
    	img.classroomculture {
    		border: 2px #708090 solid; 
    		margin-bottom: 10px;
    		text-align: center;
    		-moz-box-shadow: 3px 3px 4px #778899;
    		-webkit-box-shadow: 3px 3px 4px #778899;
    		box-shadow: 3px 3px 4px #778899;
    		/* For IE 8 */
    		-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#778899')";
    		/* For IE 5.5 - 7 */
    		filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#778899');
    }
    
    	img.teachinghistory {
    		border: 2px #708090 solid; 
    		float: left; 
    		margin-right: 30px; 
    		margin-bottom: 10px;
    		-moz-box-shadow: 3px 3px 4px #778899;
    		-webkit-box-shadow: 3px 3px 4px #778899;
    		box-shadow: 3px 3px 4px #778899;
    		/* For IE 8 */
    		-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#778899')";
    		/* For IE 5.5 - 7 */
    		filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#778899');
    }
    
    .sidelinks .col1 .meat p.picturecaption {
    		text-align: center;
    		color: #000;
    		font-style: italic;
    		margin-top: 2em;
    		padding: 8px;
    		background: #fff;
    		border: 1px #708090 solid;
    }
    
    
    /* Footer styles */
    
    p.minifoot {
    	text-align: center;
    	margin:0;
    	padding: 0 0 20px 0;
    	
    }
    
    #footer a:link, #footer a:visited, .minifoot a:link, .minifoot a:visited {
    	font-weight: bold;
    	text-decoration: none;
    	padding: 6px 20px 20px 20px;
    	color: #fff;
    	background-color: #778899;
    	border: 3px #c1cdc1 solid;
    	border-bottom: 0 #c1cdc1 solid;
    }
    
    #footer a:hover, #footer a:active, .minifoot a:hover, .minifoot a:active {
    	color: #708090;
    	background-color: #c1cdc1;
    	border: 3px #778899 solid;
    	border-bottom: 0 #333 solid;
    	text-decoration: underline;	
    }
    #footer {
            	clear:both;
            	float:left;
            	width:100%;
    		text-align: center;
    		margin:0;
    		padding: 0;
    		border-top: 3px solid #c1cdc1;
    		border-bottom: 10px solid #778899;
       	 }
        	
    	#footer p {
            	padding:10px 10px 0 10px;
            	margin:0;
        }
    
    
    .inset a:link, .inset a:visited  {
    	color: #708090;
    	padding: 6px 10px 6px 6px;
    	margin: 10px;
    	margin-left: 40px;
    	background-color: #c1cdcd;
    	width: 170px;
    	text-align: center;
    	border: 1px solid #708090;
    	font-size: .9em;
    }
    
    .inset a:hover, .inset a:active {
    	background-color: #9fb6cd;
    	color: #fff;
    }
    
    .inset a.here {
    	color: #708090;
    	padding: 6px 10px 6px 6px;
    	margin: 10px;
    	margin-left: 40px;
    	background-color: #778899;
    	width: 170px;
    	text-align: center;
    	border: 1px solid #708090;
    	color: #fff;
    }
    
    .inset a#special {
    	color: #708090;
    	padding: 6px 10px 6px 6px;
    	margin: 10px;
    	margin-left: 40px;
    	background-color: #f4a460;
    	width: 170px;
    	text-align: center;
    	border: 1px solid #708090;
    	
    }
    
    .inset a#special:hover, .inset a#special:active, .inset a#hot{
    	color: #fff;
    	background: #ee7942;
    }
    
    ul.downloads {
    	line-height: 170%;
    	text-align: left;
    }
    
    .downloads a:link, .downloads a:visited  {
    	color: #708090;
    	padding: 2px 2px 0 2px;
    	width: 170px;
    	text-align: center;
    	border-bottom: 2px solid #fff;
    	font-size: 1.1em;
    	font-weight: bold;
    	text-decoration: none;
    }
    
    .downloads a:hover {
    	background-color: #9fb6cd;
    	color: #fff;
    	border-bottom: 2px solid #708090;
    	font-weight: bold;
    text-decoration: underline;
    }
    HTML:

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB" lang="en-GB">
    
    <head>
    
    <title>title</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="format-detection" content="telephone=no" />
    
    <link rel="stylesheet" media="print" type="text/css" href="portfolioprint.css" />
    <link rel="stylesheet" media="screen" type="text/css" href="portfolioscreen.css" />
    
    
    <style media="screen" type="text/css">
    /* <!-- */
    
     /* --> */
        </style>
    
    
    <!--[if lt IE 7]>
    <style media="screen" type="text/css">
        	.col1 {
    	width:100%;
    	}
    </style>
    
    
    <![endif]-->
    
    
    </head>
    
    <body>
    
    <div id="header">
    <p>
    text here
    </p>
    </div>
    
    
    <div class="container sidelinks">
    
        <div class="content">
            <div class="col1wrap">
                <div class="col1">
    
    
    <!-- Right Column Start -->
            <div class="meat"> 
    
    <h5>Beginning ESL</h5>
    <h3>Process Writing: Biographies</h3>
    
    <p style="margin-top: 0px;">text here
    
    </p>
    
    
    <p style="text-align: center;">
    <img class="classroomculture" src="monkeydog.png" height="446" width="500" alt="">
    </p>
    
    
    
    </div>
    
    <p class="minifoot">
    <a href="#header">Race to the Top</a>
    </p>
    
    		<!-- Right Column End -->
                </div>
            </div>
            
    <div class="leftcol">
               
    	<!-- link list start -->
            
    	<ul id="LinkList">
    	<li><a href="junk-index.html">Teacher for Hire</a></li>
    	<li><a href="#">My Teaching History</a></li>
    	<li><a href="#">Classroom as Evidence</a></li>
    	<li id="active"><a href="#" id="current">Sample Teaching</a></li>
    
    		<li class="inset"><a href="#">Evidence of Theme</a></li>
    		<li class="inset"><a href="#">Simple Definitions</a></li>
    		<li class="inset"><a href="#" class="here">Process Writing</a></li>
    		<li class="inset"><a href="#">Reading for Non-Readers</a></li>
    		<li class="inset"><a href="#">Differentiated Assessment</a></li>
    		<li class="inset"><a href="#">Regents Prep</a></li>
    		<li class="inset"><a id="special" href="#">Special Note</a></li>
    
    	<li><a href="#">Download Resume</a></li>
    	<li><a href="#">Other Downloads</a></li>
    	</ul>
               <!-- link list end -->
            
    
    	</div>
        </div>
    </div>
    
    
    <div id="footer">
    
    </div>
    
    
    
    </body>
    </html>
    code, screen shots / photos, everything available at
    http://mledavis.fastmail.fm/fix-me/

    Again, thank you.
    Last edited by sam-vilde; 05-11-2011 at 04:31 AM. Reason: trying to add the images for clarity's sake

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    <?xml version="1.0" encoding="utf-8"?>
    Remove that xml prolog from the top, as IE6 will turn into quirks mode when it encounters anything above DOCTYPE.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    May 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the suggestion. I put that in at the recommendation of the guy who wrote the two-column layout; without it it looks far, far worse. Good idea, but not the solution.


  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    I put that in at the recommendation of the guy who wrote the two-column layout; without it it looks far, far worse. Good idea, but not the solution.
    When you remove that line, IE6 renders the page in standard mode and the "real" issues in your markup gets revealed.
    Code:
    .sidelinks .content {
            float:left;
            width:200%;
    		position:relative;
    		left:196px;
            background: #F6F0E6;
    	
        }
    
        .sidelinks .col1wrap {
    	    float:right;
    	    width:50%;
    	    position:relative;
    	    right:200px;
    	  
    	}
    
    	.sidelinks .col1 {
            	margin:0 15px 0 215px;
    	    	position:relative;
    	    	right:100%;
    	    	overflow: hidden;
    	}
    The way you've made the columns is not a proper one, I' say, especially when you need to get compatibility in IE6.

    I'd recommend you to have a look at http://bonrouge.com/2c-hf-fluid.php, a simple and compatible 2 column layout, with only one float and a very few positions.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Oct 2010
    Location
    Like me, on a tiny speck of dust floating in the Virgo Cluster.
    Posts
    29
    Thanks
    1
    Thanked 1 Time in 1 Post
    Seriously... IE6?


  •  

    Posting Permissions

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