Pulling hair out Internet Explorer CSS problem 1

[maslett]

Hi,

I've been regularly checking my site out in both Explorer and Firefox and everything was fine till today when IE started playing up. My menu is showing as a list and some of my css isn't rendering correctly. I'm ready to throw the bloddy computer out the window!

Here's the site:

http://anonomail.co.uk/bob

If you look at it in Firefox then IE you'll see the problem.

I've included the css below (and the ie hacks).
I'm new to this css malarky so be kind!

Thanks.
Matt

main CSS:

* {margin: 0; padding: 0;}

body, html {

	background:#1a1a1a; /* 1a1a1a */
	color:#FFFFFF;
	font-weight: normal; 
	font-size: 11px; 
	font-style: normal; 
	font-family: verdana, arial; 
	font-variant: normal;  
	text-align: left;
	
}

html { overflow: -moz-scrollbars-vertical; }


#menucontainer { 
	position:absolute;
	top: 25px;
	left: 0px;
	background: clear; /* a1a1a1 */
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 00px;
	width: 90%;
	text-align: left;
	height: 150px;
	min-width: 780px;
	z-index:2;
	}

.menubar {
	position: relative;
	margin:0 auto;
	width: 95%;
	top: 98px;
	height: 40px;
	}

img.logo {
	position:absolute;
	top: -10px;
	left: 250px;
	}
	
img.logoshadow {
	position:absolute;
	top: 84px;
	left: 251px;
	}
	
#maincontainer {
	position:absolute;
	top: 10px;
	margin-left: 5%;
	margin-right: 5%;
	width: 90%;
	text-align: left;
	height: auto;
	min-width: 770px;
	z-index:1;
	}
	
#main {
	width:100%;
	margin-top: 0px;
	margin-bottom: 0px;
	height: auto;
	}
	
#pagewrap {
 	position:relative;
 	top:0px;
 	left:0;
	background: clear; /* f00000 */
	margin:0 auto;
	width:98%;
	text-align: left;
	margin-top: 10px;
	height: auto;
	min-width: 750px;
	}
	
#pageleft {
	float: left;
	width: 70%;
	background: #000000;
	}
	
#pageright {
	float: left;
	width: 29%;
	background: clear; /* f0ff0f */
	padding-left: 5px;
	}
	
#footer {clear: both;
	width:100%;
	height:auto;
	background: #000000;	/* 0000ff */
	margin-bottom: 10px;
	margin-top: 0px;
	}
	
#footerspacer {clear: both;
	width:100%;
	height:100px;
	background: #000000;	/* 0000ff */
	}
	
#pagefooter {
	position: relative;
	height: auto;
	}
	
.greybox {
	width: 95%;
	margin:0 auto;
	margin-bottom: 10px;
	padding: 10px;
	border-width: 1px 1px 1px 1px;
	border-style: solid solid solid solid;
	border-color: rgb(69, 69, 69) rgb(69, 69, 69) rgb(69, 69, 69) rgb(69, 69, 69);
	border-collapse: collapse;
	background-color: rgb(27, 27, 27);
	}
	
	
.blackbox {
	width: 98%;
	margin:0 auto;
	background: #000000;
	margin-bottom: 10px;
	}
	
p.boxtitle {
	color: #454545;
	font-size: 14px;
	font-weight: bold;
	margin-top:0px;
	margin-bottom:5px;
	}
	
div.hr {
  height: 3px;
  background: #000 url(images/hr1.gif) repeat-x scroll center;
  
}
div.hr hr {
  display: none;
}

table.blog {
	border-width: 0px;
	border-spacing: 0px;
	border-style: none;
	border-color: gray gray gray gray;
	border-collapse: collapse;
	background-color: clear;
}
table.blog td {
	border-width: 0px;
	padding: 2px;
	background-color: clear;
	vertical-align: top;
}

a {cursor: hand; text-decoration: none; color: #5DA4FF;}
a:link {color:#5DA4FF;text-decoration: none;}
a:visited {color: #5DA4FF;text-decoration: none;}
a:hover {text-decoration: none; color: #3f63a5;}
a:active {color: #5DA4FF;text-decoration: none}

select, option {width:150px;overflow:hidden;} 

/*  Write email style items */
div.step {
	margin-bottom: 10px;
	}

div.inputwrap { // don't think margins work
	background: clear;
	}
	
div.inputtext {
	float:left; 
	background:clear; 
	width:30%; 
	line-height: 2em;
	text-align: right;
	}

div.inputline {
	float:left; 
	background:clear; 
	width:70%;
	margin-bottom:20px;
	}
	
p.errmsg {
	color: #5DA4FF;
	}

/*  Menu items */

ol#toc {
    height: 25px;
    list-style: none;
    margin: 0;
    padding: 0;
}

ol#toc li {
    background: #bdf url(images/tab.png);
    float: left;
    margin: 0 2px 0 0;
    padding-left: 10px;
}

ol#toc a {
    background: url(images/tab.png) 100% 0;
    color: #fff;
    display: block;
    float: left;
    height: 25px;
    line-height: 25px;
    padding-right: 10px;
    text-decoration: none;
    font-weight: bold;
}

ol#toc li.current {
    background-color: #48f;
    background-position: 0 -25px;
}

ol#toc li.current a {
    background-position: 100% -25px;
    color: yellow;
    font-weight: bold;
}


	
/* 	black box with blue border - main page container     */

.roundedcornr_box_black {
	background: url(images/roundedcornr_black_tl.png) no-repeat top left;
}
.roundedcornr_top_black {
	background: url(images/roundedcornr_black_tr.png) no-repeat top right;
}
.roundedcornr_bottom_black {
	background: url(images/roundedcornr_black_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_black div {
	background: url(images/roundedcornr_black_br.png) no-repeat bottom right;
}
.roundedcornr_content_black {
	background: url(images/roundedcornr_black_r.png) top right repeat-y;
}

.roundedcornr_top_black div,.roundedcornr_top_black,
.roundedcornr_bottom_black div, .roundedcornr_bottom_black {
	width: 100%;
	height: 9px;
	font-size: 1px;
}

.roundedcornr_content_black, .roundedcornr_bottom_black {
	margin-top: -10px;

}
.roundedcornr_content_black { padding: 0 9px; }

/* 	black box grey border  */

.roundedcornr_box_747062 {
	background: url(images/roundedcornr_747062_tl.png) no-repeat top left;
}
.roundedcornr_top_747062 {
	background: url(images/roundedcornr_747062_tr.png) no-repeat top right;
}
.roundedcornr_bottom_747062 {
	background: url(images/roundedcornr_747062_bl.png) no-repeat bottom left; 
}
.roundedcornr_bottom_747062 div {
	background: url(images/roundedcornr_747062_br.png) no-repeat bottom right;
}
.roundedcornr_content_747062 {
	background: url(images/roundedcornr_747062_r.png) top right repeat-y;
}

.roundedcornr_top_747062 div,.roundedcornr_top_747062,
.roundedcornr_bottom_747062 div, .roundedcornr_bottom_747062 {
	width: 100%;
	height: 5px;
	font-size: 1px;
}
.roundedcornr_content_747062, .roundedcornr_bottom_747062 {
	margin-top: 0px;
	margin-bottom: 0px;
}
.roundedcornr_content_747062 { padding: 0 5px; }

/* 	dark grey box for menu & footer   */


.roundedcornr_box_darkg {
	background: url(images/roundedcornr_darkg_tl.png) no-repeat top left;
}
.roundedcornr_top_darkg {
	background: url(images/roundedcornr_darkg_tr.png) no-repeat top right;
}
.roundedcornr_bottom_darkg {
	background: url(images/roundedcornr_darkg_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_darkg div {
	background: url(images/roundedcornr_darkg_br.png) no-repeat bottom right;
}
.roundedcornr_content_darkg {
	background: url(images/roundedcornr_darkg_r.png) top right repeat-y;
}

.roundedcornr_top_darkg div,.roundedcornr_top_darkg,
.roundedcornr_bottom_darkg div, .roundedcornr_bottom_darkg {
	width: 100%;
	height: 9px;
	font-size: 1px;
}
.roundedcornr_content_darkg, .roundedcornr_bottom_darkg {

}
.roundedcornr_content_darkg { padding: 0 0px; }

and the iefixes:

<!--[if IE]>
.roundedcornr_content_black, .roundedcornr_bottom_black {
	margin-top: -5px;

<![endif]-->

 

[BillyRayPreachersSon]

I'd remove the comments from the IE CSS file as it's not valid CSS.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[BillyRayPreachersSon]

Also, your CSS doesn't validate - what is "background:clear" ?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[Vragabond]

div.inputwrap { [!]// don't think margins work[/!]
    background: clear;
    }

Given that this is not a proper CSS comment, I would guess IE ignores the CSS from this point (at least until it probably finds another closing comment or something). I think if you remove this comment, it will work.

Do something about world cancer today: Comprehensive cancer control information at PACT

 

[maslett]

Vragabond - you are a DIAMOND! That fixed the problem - thank you so much!

Dan - thanks for your comments - I will be validating the code at w3.org before I go live.

Thanks to all who read and especially to Vrag.

Cheers. Love this site.
m@