IE6 CSS Bug

**JoshT** · Mar 1st, 2002, 02:27 PM

I'm working on a tableless layout. The page works fine in Mozilla, Opera6, but IE6 has some superfluous text on the page. My CSS and HTML validate fine. Is this a bug in IE6, or some CSS issue I'm unaware of? I need this to work in IE6, as that's what my users' have... I'll attach a screen shot - it'll show the problem better than I can describe it. I snipped irrevelent code for brevity, but note the "abel" from "Address Label" duplicated in the wrong spot, and click and drag the mouse to highlite it and it behaves weird.

Thanks.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Test</title>
<style type="text/css" title="mainstyle">
	div#content {
		color: black;
		background: white;
		border: 1px solid Black;
		width: 700px;
		margin: 15px 0px 0px 0px;
		padding: 0px;
		float: left;
		font : 12px Arial, Helvetica, sans-serif;
	}

	a.tab {
		text-decoration: none;
		display: block;
		color: blue;
		background: #ddd;
		border-right: 1px solid Black;
		border-bottom: 1px solid black;
		width: 93px;
		float: left;
		margin: 0px 0px 0px 0px;
		padding: 3px;
		text-align: center;
	}

	a.tablast {
		text-decoration: none;
		display: block;
		color: blue;
		background: #ddd;
		border-right: none;
		border-bottom: 1px solid black;
		width: 94px;
		float: left;
		margin: 0px 0px 0px 0px;
		padding: 3px;
		text-align: center;
	}

	a.tab:hover, a.tablast:hover {
		text-decoration: none;
		color: blue;
		background: yellow;
	}

	div.currenttab {
		color: black;
		background: white;
		border-right: 1px solid Black;
		/* border-bottom: 1px solid gray; */
		width: 93px;
		float: left;
		margin: 0px 0px 0px 0px;
		padding: 3px;
		text-align: center;
		font-weight: bold;
	}
</style>
</head>

<body>
<!-- main page content -->
<div id="content">
<!-- tabs -->
	<div class="currenttab">Info</div>
	<a class="tab" href="jobhistory.asp">Job History</a>
	<a class="tab" href="grievances.asp">Grievances</a>
	<a class="tab" href="injuries.asp">Injuries</a>
	<a class="tab" href="training.asp">Training</a>
	<a class="tab" href="seniority.asp">Seniority</a>
	<a class="tablast" href="addresslabel.asp">Address Label</a>
</div>

</body>
</html>

**mendhak** · Mar 1st, 2002, 02:44 PM

I'm not sure if

div#content

is right
try it with JUST

#content

scoutt · Mar 1st, 2002, 04:19 PM

make your width: 700px; to

width: 705px;

will make a space on the end but fixes your problem. I think IE gets confused and makes label on the next line then just doesn't erase the abel from the first line.

my guess anyway.

**JoshT** · Mar 4th, 2002, 12:11 PM

Yes, that does fix it, thanks scoutt.

However, it has to be an IE bug - there's no way it should render the text more than once, and the HTML/CSS validate and work fine in Mozilla or Opera. Does MS have a bug reporting page for IE?

Thread: IE6 CSS Bug

Thread Tools

Display

IE6 CSS Bug

Posting Permissions