[michelle@urban]

I have my site up at brainfluff.net If you view it in Firefox or Safari it's how I want it to look everything in the right place etc... However, when you view it in the mother of all suck ass browsers IE, it doesn't work, the logo is too far down the page and the menu sidebar is right at the bottom underneath the content.

I have validated the CSS which was a success, but still no joy with IE. If anyone can help that would be great.

/* Begin Typography & Colors */
body {
	font-size: 62.5%; /* Resets 1em to 10px */
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	color: #454545;
		background: #fff;
	text-align: left;
	}

#page {
	border:none;
	text-align: left;
		width:800px;
		float:left;
	}

#header {
	}

#navigation li h2{
		display:none;
}

#navigation a {
	color:#cc6699;
	background-color:transparent;
	font-family: "Trebuchet MS",sans-serif;
	font-size:1.5em;
}

#headerimg 	{
	} 

#content {
	font-size: 1.1em
	}

.widecolumn .entry p {
	font-size: 1.1em;
	}

.narrowcolumn .entry, .widecolumn .entry {
	line-height: 1.4em;
	}

.widecolumn {
	line-height: 1.4em;
	}

.narrowcolumn .postmetadata {
	text-align: left;
	}

alt {
	background-color:transparent;
	border-top: none;
	border-bottom: none;
	}

#footer {
	border: none;
	}

small {
	font-family: Tahoma, Arial, Helvetica, Sans-Serif;
	font-size: 0.8em;
	/*line-height: 1.1em;*/
		color:#454545;
	background-color:transparent;
	}

h1, h2, h3 {
		font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
	}

h1 {
	font-size: 4em;
	text-align: left;
	}

#headerimg .description {
	font-size: 1.1em;
	text-align: right;
		 display:none;
	}

h2 {
	font-size: 1.2em;
		color:#454545;
		font-family:"Trebuchet MS", Tahoma, Arial, Verdana, sans-serif;
	}

h2.pagetitle {
	font-size: 1.6em;
	}

h3 {
	font-size: 1.3em;
	}

h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {
	text-decoration: none;
	color: #cc6699;
	}
h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
	color: #cc6699;
	}

h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
	text-decoration: none;
	}

.entry p a:visited {
	color: #cc6699;
	}

.commentlist li, #commentform input, #commentform textarea {
	font: 12px 'Trebuchet MS', Verdana, Arial, Sans-Serif;
	}

.commentlist li {
	font-weight: bold;
	}

.commentlist cite, .commentlist cite a {
	font-weight: bold;
	font-style: normal;
	font-size: 1.1em;
	}

.commentlist p {
	font-weight: normal;
	line-height: 1.2em;
	text-transform: none;
	}

#commentform p {
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	}

.commentmetadata {
	font-weight: normal;
	}

/*-------------------------------------------------------------------------------------------------------------*/

#sidebar {
	font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
	}

small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
	color: #454545;
		font-size:.8em;
		text-align:left;
	}

code {
	font: 1.1em 'Courier New', Courier, Fixed;
	}

acronym, abbr, span.caps{
	font-size: 0.9em;
	letter-spacing: .07em;
	}

a, h2 a:hover, h3 a:hover {
	color: #cc6699;
	text-decoration: none;
	}

a:hover {
	color: #cc6699;
	}

/* End Typography & Colors */

/*-------------------------------------------------------------------------------------------------------------*/

/* Begin Structure */

body {
	margin: 0 0 0px 0;
	padding: 0; 
		background:url(images/stripesnew.jpg) top left repeat-y; 
	}

#page {
		width:100%;
		background:url(images/backgroundnew.jpg)top left no-repeat fixed; 
}

#header {
	}

.narrowcolumn {
	width:410px;
		float:left;
		margin-left:260px;
		margin-top:50px;
	}

.widecolumn {
		float:left;
		margin-left:260px;
		width:410px;	 
	}

.post {
	margin: 0 0 40px;
	text-align: justify;
	}

.widecolumn .post {
	margin: 0;
	}

.narrowcolumn .postmetadata {
	padding-top: 5px;
	}

.widecolumn .postmetadata {
	margin: 0;
	}

.widecolumn .smallattachment {
	text-align: center;
	float: left;
	width: 128px;
	margin: 5px 5px 5px 0px;
}

.widecolumn .attachment {
	text-align: center;
	margin: 5px 0px;
}

.postmetadata {
	clear: left;
}

#footer {
	padding: 0;
	margin: 0 auto;
	clear: both;
	}

#footer p {
	margin: 0;
	padding: 20px 0;
	text-align: center;
	}

#contact {
		float:left;
		padding-left:0;
		margin-left:0;
}

#navigation{
		position:fixed;
		background-image:url(images/mask.png);
		height:80px;
		float:left;
		margin-left:260px;
		width:410px;
		text-align:left;
	}

/* End Structure */

/*-------------------------------------------------------------------------------------------------------------*/

/*	Begin Headers */
h1 {
	padding-top: 70px;
	margin: 0;
	}

h2 {
	}

h2.pagetitle {
	margin-top: 30px;
	text-align: left;
}

#sidebar h2 {
}

h3 {
	padding: 0;

	}

h3.comments {
	padding: 0;
	margin: 40px auto 20px;
	}

/* End Headers */

/*-------------------------------------------------------------------------------------------------------------*/

/* Begin Images */

p img {
	padding: 0;
	max-width: 100%;
	}

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left
	}

/* End Images */

/*-------------------------------------------------------------------------------------------------------------*/

/* Begin Lists*/

html>body .entry ul {
	margin-left: 0px;
	padding: 0 0 0 30px;
	list-style: none;
	padding-left: 10px;
	text-indent: -10px;
	} 

html>body .entry li {
	margin: 7px 0 8px 10px;
	}

#navigation li{
		display: inline;
		padding-left:1em;
		padding-right:1em;
		float:left;
}

.entry ul li:before, #sidebar ul ul li:before {
	content: "\00BB \0020";
	}

.entry ol {
	padding: 0 0 0 35px;
	margin: 0;
	}

.entry ol li {
	margin: 0;
	padding: 0;
	}

.postmetadata ul, .postmetadata li {
	display: inline;
	list-style-type: none;
	list-style-image: none;
	}

#sidebar ul, #sidebar ul ol {
	margin: 0;
	padding: 10px;
		padding-top:0;
	}

#sidebar ul li {
	list-style-type: none;
	list-style-image: none;
	margin-bottom: 15px;
	}

#sidebar ul p, #sidebar ul select {
	margin: 5px 0 8px;
	}

#sidebar ul ul, #sidebar ul ol {
	margin: 5px 0 0 10px;
	}

#sidebar ul ul ul, #sidebar ul ol {
	margin: 0 0 0 10px;
	}

ol li, #sidebar ul ol li {
	list-style: decimal outside;
	}

#sidebar ul ul li, #sidebar ul ol li {
	margin: 3px 0 0;
	padding: 0;
	}

/* End Lists */

/*-------------------------------------------------------------------------------------------------------------*/

/* Begin Forms */

#searchform {
	margin: 10px auto;
	padding: 5px 3px; 
	text-align: center;
	}

#sidebar #searchform #s {
	width:100px;
	padding: 2px;
	}

#sidebar #searchsubmit {
	padding: 1px;
	}

.entry form {
	text-align:center;
	}

select {
	width: 130px;
	}

#commentform input {
	}

#commentform textarea {
	width: 450px;
	padding: 2px;
	}

#commentform #submit {
	margin: 0;
	float: right;
	}

/* End Forms */

/*-------------------------------------------------------------------------------------------------------------*/

/* Begin Comments*/

.alt {
	margin: 0;
	padding: 10px;
	}

.commentlist {
	padding: 0;
	text-align: justify;
	}

.commentlist li {
	margin: 15px 0 3px;
	padding: 5px 10px 3px;
	list-style: none;
	}

.commentlist p {
	margin: 0 5px 10px 0;
	}

#commentform p {
	margin: 0 0;
	}

.nocomments {
	text-align: center;
	margin: 0;
	padding: 0;
	}

.commentmetadata {
	margin: 0;
	display: block;
	}

/* End Comments */

/*-------------------------------------------------------------------------------------------------------------*/

/* Begin Sidebar */

#sidebar{
		padding: 0 0 10px 0;
	margin-left:720px;
	width: 180px;
	background: #F7EAEA;
		position:fixed;
		height:900px;
	}

#sidebar form {
	margin: 0;
	}

/* End Sidebar */

/*-------------------------------------------------------------------------------------------------------------*/

#wp-calendar {
		font-family: Tahoma, Trebuchet, sans-serif #999999;
		text-transform:uppercase;
		width:100%;
		text-align:center;
}

/* Cells */

#wp-calendar td {
		background:#fff;
		border: 1px solid #eeeeee;
		color: #454545;
}

/* Today */

#wp-calendar #today { 
		border: none;
		text-decoration:none; 
		color:#fff;
		background:#454545;
}

/* Posts */

#wp-calendar a {
		display:block;
		border: 1px solid #cc6699;
		text-decoration:none; 
		color:#fff;
		background:#cc6699;
}

/* Post Roll */

#wp-calendar a:hover {
		display:block;
		border: 1px solid #fff;
		text-decoration:none; 
		color:#fff;
		background:#cc6699;
}

#wp-calendar table {
		width:100%; 
		text-align:center;
}

/* Week Days Title */

#wp-calendar th {
		color:#454545;
}

/* Month */ 

#wp-calendar caption {
		font-family: Tahoma, "Trebuchet", sans-serif;
		font-size:1em;
		color: #454545;
		border-bottom: 1px solid #454545;
		text-align:left;
}

#wp-calendar td#next a{display:block; background: transparent; border:none; color:#454545;}

#wp-calendar td#next a:hover{display:block; background: transparent; border:none; color:#cc6699;}

#wp-calendar td#next {text-align:right; border:none; background:transparent;}

#wp-calendar td#prev {text-align:left; border:none; background:transparent;}

#wp-calendar td#prev a{display:block; background: transparent; border:none; color:#454545;}

#wp-calendar td#prev a:hover{display:block; background: transparent; border:none; color:#cc6699;}

#wp-calendar td.pad {background:none; border:none;  }

/* End Calendar */

/*-------------------------------------------------------------------------------------------------------------*/

/* Begin Various Tags & Classes */

acronym, abbr, span.caps {
	cursor: help;
	}

acronym, abbr {
	border-bottom: 1px dashed #454545;
	}

blockquote {
	margin: 15px 30px 0 10px;
	padding-left: 20px;
	border-left: none;
	}

blockquote cite {
	margin: 5px 0 0;
	display: block;
	}

.center {
	text-align: center;
	}

hr {
	display: none;
	}

a img {
	border: none;
	}

/*.navigation {
	display: block;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 60px;
	}*/

/* End Various Tags & Classes*/ 

I know I made one major cock up by not checking it in IE whilst coding the site but I had deleted the browser off my mac by accident and microsoft have stopped providing a version for Mac users (great plan of action! doh) so it's taken a while for me to get hold of a version. That's my excuses over with .

This post has been edited by michelle@urban: 14 November 2006 - 02:11 PM

[Arbitrator]

I haven’t looked at the code thoroughly, but I can tell you that Internet Explorer 6 doesn’t support fixed positioning, the max-width property, or the child selector. If it’s the recently released Internet Explorer 7 you’re targeting, it should support all of those things, but your page still looks messed up in that browser. Maybe it has something to do with your apparent use of the child selector exploit (html>body) for Internet Explorer 6 and which doesn’t work in Internet Explorer 7. Your page also uses the :before and :after pseudo-classes and the content property. Internet Explorer 7 supports none of those.

I’m guessing that the culprit is the use of fixed positioning in combination with CSS exploits that are not forward-compatible.

[michelle@urban]

Thanks for pointing me in the right direction Arbitrator I'll take a look at that.