Breadcrumbs navigation menu elongated in IE 6

Hi guys,
I have a breadcrumbs menu implementation which looks fine in all browsers, but looks elongated in IE 6. I'm not sure why, been trying all sorts of things.
Can someone please take a look and help me? My code is below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Beta</title>
<style type="text/css">
#Breadcrumbs { background:#f7f7f7 url(../images/sprites/breadcrumbs.gif) repeat-x 0 0;
height:24px;
margin-top:-7px; }
#Breadcrumbs ul {}
#Breadcrumbs li { float: left; clear: none; color: #777; }
#Breadcrumbs a { color: #333;
text-decoration: none;
background:transparent url(../images/sprites/breadcrumbs.gif) no-repeat right -24px;
padding-right:29px; }
#Breadcrumbs a,
#Breadcrumbs span { display:block; height:21px;
padding-top:3px; margin-left:10px;
width:auto !important; width:200px;
text-align:left !important; text-align:center; }

</style>
</head>
<body>
<div>

<div id="Breadcrumbs">
<ul>
<li><a href="index.do">Home</a></li>
<li><a href="account.do?_flowId=account-flow">My Account</a></li>
<li><span>Edit Confirm</span></li>
</ul>
</div>

<div>
<h2>Account details have been modified</h2>
</div>

</div>

</body>
</html>

Breadcrumbs navigation menu elongated in IE 6

vikasvrao

vikasvrao

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week