Help: CSS code is appearing differently on IE and Firefox.

The Coder posted this at 19:09 — 16th March 2007.

Joined: Nov 2006

I am making a tableless design with HTML and CSS. It is appearing differently on IE and Firefox. Below is the HTML and CSS code!!! Please give special consideration to the difference in "XYZ" (the text in green).

HTML Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ebiz.com</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="center">
<div id="logo"><img src="img/logo.gif"></div>
<div id="spacer"><img src="img/spacer.gif" height="46px" width="63px"></div>
<div id="menu"><img src="img/menu.gif"></div>
<div id="header2"><img src="img/header2.gif"></div>
<div id="header1"><img src="img/header1.gif"></div>
<div id="main">
<div id="sec1">
<div id="secsub1">
<img src="img/op.gif" class="clear"><br><br>
Lorem ipsum dolor sit amet, consectetu adipiscing elit, sed diam nonummy nibh euismod tincidunt Utwisi enim ad minim quis nostrud. Voluptatem accusantium doloremq.
<br><br><img src="img/line_1.gif" class="clear"><br><br><div id="theteam"><a href="theteam">>the team</a>
</div>
</div><br><br>
<div id="sec3">
<img src="img/ne.gif" class="clear"><br><br>
Lorem ipsum dolor sit amet, consectetu adipiscing elit, sed diam nonummy nibh euismod tincidunt Utwisi enim ad minim quis nostrud. Voluptatem accusantium doloremq.
<br><br><img src="img/line_1.gif" class="clear"><br><br>
Lorem ipsum dolor sit amet, consectetu adipiscing elit, sed diam nonummy nibh euismod tincidunt Utwisi enim ad minim quis nostrud. Voluptatem accusantium doloremq.
<br><br><img src="img/line_1.gif" class="clear"><br><div id="theteam"><a href="theteam">xyz</a><br><br></div></div>

</div><div id="sec2">Haider Hameed</div>
</div>
</div>
</body>
</html>

CSS Code

body {
	font-family: verdana, sans-serif;
	background-color: rgb(114,120,118);
	font-size: 12px;
	color: #000000;
	margin: 0px;
}

#center {
	margin-left: auto;
	margin-right: auto;
	width: 719px;
	background-color: #FFFFFF;
	border-width: 3px;
	border-color: #000000;
	border-style: solid;
}

#logo {
	float: left;
	height: 124px;
	width: 208px;
}

#spacer {
	float: left;
	height: 46px;
	width: 63px;
	background-color: #FFFFFF;
}

#menu {
	width: 448px;
	height: 46px;
	float: right;
	background-color: #000000;
}

#header1 {
	height: 96px;
	width: 208px;
	background-image: url('img/header1.gif');
	float: left;
}

#header2 {
	height: 174px;
	width: 511px;
	background-image: url('img/header2.gif');
	float: right;
}

#main {
	height: 500px;
	width: 719px;
	background-color: #FFFFFF;
}


#sec1 {
	height: auto;
	width: 260px;
	background-color: #F5F7F8;
	float: left;
	font-family: Tahoma, Arial;
	font-size: 10px;
	color: #7D7C7C;
}

#secsub1 {
	height: auto;
	margin-left: 8px;
	margin-top: 8px;
	width: 244px;
	background-color: #F5F7F8;
	font-family: Tahoma, Arial;
	font-size: 10px;
	color: #7D7C7C;
}

#sec2 {
	height: 200px;
	width: 459px;
	background-color: #FFFFFF;
	float: right;
}

#sec3 {
	height: auto;
	width: 244px;
	padding: 5px;
	background-color: #FBFCFC;
	border: 1px solid #EDEEEF;
	margin: auto;
}

a:link, a:active, a:visited {
	font-family: Tahoma, Arial;
	color: #6FA424;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
}

a:hover {
	font-family: Tahoma, Arial;
	color: #7D7C7C;
	text-decoration: underline;
	font-size: 11px;
	font-weight: bold;
}

#theteam {
	float: right;
}

img.clear {
	clear: right;
}