CSS - Ie6 And Below Is Ruining My Website :( Please Help!

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. {http:// mledavis [dot] fastmail [dot] fm /fix-me/site-good.png}

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. {http:// mledavis [dot] fastmail [dot] fm /fix-me/site-bad.png}

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 [dot] fastmail [dot] fm /fix-me/

Again, thank you.

--links aren't working so if you have the patience to put the files defined for page and style sheet below after evaxu dot com this is a challenging problem!--

Hey Guys,

I've recently got back into web design by making my girlfriend a professional homepage in dreamweaver and css. So far so good, and pretty simple, however I've been trying to format the CV page but now it's starting to unravel...

Basically, each element has had a div box put around it so that these can be arranged and floated to the positions I want. This seems to have worked in theory, however the bottom div (or 2 as they're columns next to each other) overlap the container and remove the whole container's background.

I have put this online on /resumecssfail.html and you can use the navigation to see how the container background is supposed to be working as on other pages.

The /style.css style sheet can be found and the relevant id's are container, maincontent and those starting with cv at the bottom. All that has been changed for this page really are width, float and some padding. However I have tried to use attributes like clear, positioning, display and various re-sizing and float changing to the last elements - whilst also putting the whole CV in other css boxes etc etc.

I have put the code through the WC3 CSS validator which says it's valid to css 2.1. I've trawled through blogs and forum posts but just can't seem to find a solution :\

One thing that does seem to help is removing the last div tag (or putting in another tag and putting a character after it - I'm thinking of using a white ".") but this wouldn't be valid css now would it?! I'm going to use these for now on the official site page, but please use the link above to see my error page that I'd like help with.

Thanks!

runenation.com

(By know means is this a advertisement, I'm not even ready for members yet!)

I want that skin to expand the whole page.


The skin is only random, I will edit the pictures and stuff later.

Quote:
body {
background-color: #B0B0B0;
text-align: center;
margin-top: 50px;
}
#topline {
background-color: #29363E;
height: 9px;
}
#logocell {
background-color: #FFFFFF;
width: 174px;
height: 134px;
}
#maintable {
width: 770px;
text-align: left;
}
#menu {
background-color: #29363E;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FFFFFF;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
vertical-align: top;
text-align: left;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 20px;
}
#menu a {
font-family: Arial, Helvetica, sans-serif;
color: #AEB6BB;
font-size: 10pt;
text-decoration: none;
line-height: 1.4em;
}
#menu a:hover {

font-family: Arial, Helvetica, sans-serif;
color: #797B00;
font-size: 10pt;
text-decoration: none;
line-height: 1.4em;
}
/*================================================================================
>> Main Menu Links
================================================================================*/

td.vmenu_main_off {
width: 100%;
border: 0px;
padding: 0px 0px 0px 0px;
}

td.vmenu_main_on {
width: 100%;
border: 0px;
padding: 0px 0px 0px 0px;
}

div.vmenu_main_off {
width: 100%;
font-size: 13px;
font-weight: normal;
}

div.vmenu_main_on {
width: 100%;
font-size: 13px;
font-weight: bold;
}
/*================================================================================
>> Main Menu Links END
================================================================================*/
/*================================================================================
/* Sub Menu Links
================================================================================*/
td.vmenu_sub_off {
width: 100%;
border: 0px;
padding: 0px 0px 0px 15px;
}

td.vmenu_sub_on {
width: 100%;
border: 0px;
padding: 0px 0px 0px 15px;
}

div.vmenu_sub_off {
width: 100%;
border: 0px;
padding: 0px 0px 0px 15px;
font-size: 9pt;
font-weight: normal;
}

div.vmenu_sub_on {
width: 100%;
border: 0px;
padding: 0px 0px 0px 15px;
font-size: 9pt;
font-weight: bold;
}
/*================================================================================
/* Sub Menu Links END
================================================================================*/
#maincontent-index {
background-color: #FFFFFF;
width: 365px;
text-align: left;
vertical-align: top;
padding-top: 20px;
padding-left: 20px;
padding-right: 15px;
padding-bottom: 20px;
}
#maincontent-index h1 {
font-family: Arial, Helvetica, sans-serif;
color: #797B00;
font-size: 16px;
font-weight: bold;
text-decoration: none;
}
#maincontent-index p {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
text-decoration: none;
color: #000000;
}
#maincontent-index2 {
background-color: #FFFFFF;
width: 560px;
text-align: left;
vertical-align: top;
padding-top: 20px;
padding-left: 20px;
padding-right: 15px;
padding-bottom: 20px;
}
#maincontent-index2 h1 {
font-family: Arial, Helvetica, sans-serif;
color: #797B00;
font-size: 16px;
font-weight: bold;
text-decoration: none;
}
#maincontent-index2 p {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
text-decoration: none;
color: #000000;
}
#footer {
background-color: #29363E;
height: 20px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
color: #AEB6BB;
text-decoration: none;
font-size: 8pt;
text-align: right;
padding-right: 10px;
padding-top: 4px;
}
#rightcontent {
background-color: #FFFFFF;
width: 196px;
vertical-align: top;
padding-top: 20px;
padding-bottom: 10px;
}
#promo {
width: 188px;
border: 1px solid #9A9B9D;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#promo2 {
width: 188px;
border: 1px solid #9A9B9D;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#promo h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
color: #D0440F;
text-decoration: none;
margin-bottom: 2px;
}
#promo p {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #000000;
text-decoration: none;
font-weight: normal;
margin-top: 0px;
}

Hey, I need someone to look at my website html/css and fix a few errors for me. I'm unable to fix them. I'll pay you! Its a quick fix I think and should not take too long.

Kris

Someone recently recommended that I redo my website in all CSS. I started, but I can't do it for the life of me, I just don't know enough.

If you want to see what I have so far, the page that I doing with all CSS is located here. The css file is here.

I'm sorry if this seems like a big thing to ask in the forums. Any help is appreciated.