CSS Rendering Problem

Rabbitfacedkilla · Sep 29, 2006

I'm working on some CSS for a business I own, I've got a hell of a problem with the way IE renders CSS as opposed to Firefox. All looks relatively correct in firefox but in IE the div elements don't behave the same. If anyone can tell me why that is happening I would be very appreciative.

The link is as follows:

http://www.jdmauthority.org/test/index.html

The div in question is entitled "menu". I will include both the index.html file as well as the css file below. Also, I realize I've probobly violated all kinds of standards and my css is fairly messy however I'd like to fix that after figuring out why I've got this render problem. What am I doing wrong?

index.html

Code:

<html>
	<head>
		<title>JDM Authority - Specializing in Japense Domestic Market Imports</title>
		<link href="styles2.css" rel="stylesheet" type="text/css"/>
	</head>
	<body>
		<div id="pageContent">
			<div id="frame">
				<div id="menu"><br /><br /><br />&nbsp

					<div id="submenu"><a href="about.php">&nbsp&nbsp * about us</a></div>
					<br />&nbsp<img src="images/layout/line.png"><br />&nbsp
					<a href="stock.php?q=al">&nbsp&nbsp * available cars</a>
					<br />&nbsp<img src="images/layout/line.png"><br />&nbsp
					<a href="faq.php">&nbsp&nbsp * jdm car faq</a>
					<br />&nbsp<img src="images/layout/line.png"><br />&nbsp

					<a href="contact.php">&nbsp&nbsp * contact us</a>
					<br />&nbsp<img src="images/layout/line.png"><br />&nbsp
					<a href="info.php">&nbsp&nbsp * important info</a>
				</div>

				<div id="banner">
					<img src="images/layout/banner.png">

				</div>
  	
  				<div id="contentcenter">
    					<h1>Welcome!</h1>
						<p>JDM Cars are neat!</p>
				</div>
	
  				<div id="bottom">
					<img src="images/layout/bottom.png">
				</div>

			</div>

		</div>
	</body>
</html>

styles2.css

Code:

body {
	text-align:center;
	font-family:Verdana, Times;
	background: #FFFFFF;
	margin: 0;
}

#pageContent {
	width: 909px;
	background:#fff;
}

#frame {
	height: 800px;
	text-align:left;
}		
	
#banner {
	height:360px;
	width:738px;
	float:left;
}

#contentcenter {
	float:left;
	width:709px;
	padding-left: 215px;
	margin-top: -43px;
}

#bottom {
	height: 90px;
	padding-left: 200px;
	float: left;
}

#menu {
	height: 350px;
	width: 150px;
	text-align: left;
	float: left;
	position: absolute;
	margin-top: 30px;
	margin-left: 40px;
}

#submenu {
	height: 10px;
	width: 145px;
	text-align: left;
	float: right;
}

#submenu a {
	text-decoration: none;
	color: #000000;
	font-weight: bold;
	font-size: 12px;
}

#submenu a:hover {
	text-decoration: none;
	color: #FFFFFF;
	background-color: #000000;
	font-weight: bold;
	font-size: 12px;
}

#menu a:link {
	text-decoration: none;
	color: #000000;
	font-weight: bold;
	font-size: 12px;
}

#menu a:visited {
	text-decoration: none;
	color: #000000;
	font-weight: bold;
	font-size: 12px;
}

#menu a:active {
	text-decoration: none;
	color: #000000;
	font-weight: bold;
	font-size: 12px;
}

#menu a:hover {
	text-decoration: none; 
	color: #FF9C00;
}

H1 {
	font-size: 15px;
	font-weight: bold;
}

P {
	font-size: 12px;
}

tbonem91 · Sep 29, 2006

it looks fine in my IE and I agree your CSS needs an overhaul

but how "should" it be displayed (I cant install FF on this machine)

Rabbitfacedkilla · Sep 29, 2006

tbonem91 said:
it looks fine in my IE and I agree your CSS needs an overhaul but how "should" it be displayed (I cant install FF on this machine)

Since then, I fixed it.

As for cleaning up my CSS, thats next on the list!

CSS Rendering Problem

Rabbitfacedkilla

Gawd

tbonem91

Weaksauce

Rabbitfacedkilla

Gawd