IE css bug - Text is hidden

[marcasii]

I am dealing with a bug in IE 6 where for some reason text on the page is being hidden. You can only see it by highulighting it and then clicking off of it. It is wierd. Below is my css can anyone see any problems?

html, body {
	margin: 0;
	padding: 0;
	color: #333;
	text-align: center; /*centers container in IE5Win */
	}
	
body {
	background-color: #A8AE90;
}
	
#container {
	width: 840px;
	margin: 0 auto; /*centers the div in standard browsers */
	text-align: left;	
	background-color: #EFF0EB;
	}
	
#nav {
	width: 180px;
	float: left;
	margin-left: -1px;
	padding: 20px 10px 10px 10px;
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #4C800A;
	}
	
#nav a, #nav a:visited, #nav a:active, #nav a:link {
	color: #4C800A;
	text-decoration: none;
	} 
	
#nav a:hover {
	color: #4C800A;
	text-decoration: underline;
	}

#nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	width: 140px;
	}	
	
#nav li {
	margin: 0;
	padding: 2px 0 5px 5px;
	}

#nav p {
	font-weight: bold;
	font-size: 12px;
	}
	
#content {
	padding: 20px 30px 10px 10px;
	margin-left: 170px;
	border-left: 1px solid #BDBFC2;
	background-color: #fff;
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #333333;
	}
h1 {
	margin: 0px 0px 15px 0px;
	font-size: 13px;
	font-weight: bold;
	color: #333333;
}

#header {
	background-color: #fff;
	margin: 0;
	height: 77px;
	overflow: hidden;
	}
	
#footer {
	background-color: #fff;
	color: #006;
	border-top: 1px solid #BDBFC2;
	font-size: 11px;
	text-align: right;
	padding: 10px 20px 10px 0;
	clear: both;
	background:#EDEFEE;
}

.message {
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #CC0000;
	font-style:italic;
}

.spacer {
	clear: both;
	}
	
.admin-table {
	width: 600px;
}

.admin-table td {
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #4C800A;
	padding: 5px;
}

.field {
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #4C800A;
	border: 1px solid #4C800A;
}

.altrow {
	background-color: #dedede;
}

p {
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #333333;
}

a, a:link, a:vistited, a:active {
	text-decoration: none;
	color: #CC0000;
}

a:hover {
	text-decoration: underline;
	color: #4C800A;
}

 

[Vragabond]

Impossible to tell without seeing your html code as well. The CSS looks ok (apart from some order problems with link pseudo classes - your active declaration won't work, because it needs to be defined after hover in order to work properly). We would have to see the way you implement this CSS on the page as well so that we can try and reproduce the problem.

 

[BillyRayPreachersSon]

You are also missing some units when you've specified "0". And while I agree that 0% == 0px == 0em, you should always specify units, regardless of the value (so say the specs ;o)

Hope this helps,
Dan

 

[ChrisHunt]

Actually, Dan, the specs say nothing of the sort:

From

http://www.w3.org/TR/CSS1#length-units

:

After a '0' number, the unit identifier is optional.

From

http://www.w3.org/TR/CSS21/syndata.html#length-units

:

After a zero length, the unit identifier is optional.

marcasii, I tried writing an HTML document using some of your styles, it seemed to work OK in IE6. I guess the problem must be in your HTML. Is it somewhere that you can post a URL to?



-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[BillyRayPreachersSon]

I just read that myself, as it happens... And it's most unfortunate that I cannot find the spec I was reading only a few days ago that didn't have that stipulation.

I wasn't trying to be dogmatic, but I had actually read that same info (sans stipulation) on the W3C website... If I do find it, I'll email them (and post here, of cousre!) about the conflicting info.

Dan