Forums

cookie053177

Hi!

I am a CSS newbie, I code the css from scratch, it works perfectly fine on firefox and safari, etc. But IE is not working well.
the sample site is: http://mm.strangeorange.com

Do any know knows what's this problem called?

Here is the code:
HTML


<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
	\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">

<head>
	<meta http-equiv=\"Content-type\" content=\"text/html; charset=utf-8\">
	<title>Marksman Marketing</title>
	<link rel=\"stylesheet\" type=\"text/css\" href=\"index.css\" />
</head>

<body>
	<div id=\"page-wrap\">
		<div id=\"header\">
		<au><a href=\"index.html\">About Us</a></au>
		<cu><a href=\"contactus/index.html\">Contact Us</a></cu>
		<pa><a href=\"portfolio/index.html\">Portfolio</a></pa>
		<da><a href=\"webdesign/index.html\">Design</a></da>
		<pkg><a href=\"packages/index.html\">Packages</a></pkg>
		<avg><a href=\"advantage/index.html\">Advantage</a></avg>
		<price><a href=\"price/index.html\">Price</a></price>
		<sd>SEE THE DIFFERENCE</sd>
		<wd>WEB DESIGN</wd>
		<pk>MARKETING PACKAGES</pk>
		<av>EXCELLENCE IS A MUST</av>
		<prc>CAN WE AFFORD IT?</prc>
		<p>Marksman Marketing is a group of creative individuals who want to offer their talents and ingenuity to those who are ready to improve their company image; increase sales and boost morale without spending more than they comfortably can on their marketing.</p>
		</div>
	</div>
	
</body>
</html>

CSS


body{
	font-size: 100%;
	font-family: \"Verdana\", sans-serif;
	font-weight: normal;
	text-decoration: none;
	color: #333333;
	background: url(images/bg.png) repeat-x top #f4f3f3;
	margin: 0;
	padding: 0;
}

#page-wrap{
	width: 1100px;
	position: relative;
	margin: auto;
	padding: auto;

}

div#header{
	position: relative;
	width: auto; height: 1020px;
	background: url(images/index.png) no-repeat center top;
	list-style: none;
}

div#header pa a{
	position: absolute;
	left: 30px;
	width: 0;
	float: left;
	margin: 120px;
	margin-top: 290px;
	color: #666666;
	text-decoration: none;
	font-size: 24px;
}

div#header da a{
	position: absolute;
	left: 275px;
	width: 0;
	float: left;
	margin: 50px;
	margin-top: 290px;
	color: #666666;
	text-decoration: none;
	font-size: 24px;
}

div#header pkg a{
	position: absolute;
	left: 375px;
	width: 0;
	float: left;
	margin: 100px;
	margin-top: 290px;
	color: #666666;
	text-decoration: none;
	font-size: 24px;
}

div#header avg a{
	position: absolute;
	left: 570px;
	width: 0;
	float: left;
	margin: 90px;
	margin-top: 290px;
	color: #666666;
	text-decoration: none;
	font-size: 24px;
}

div#header price a{
	position: absolute;
	left: 750px;
	width: 0;
	float: left;
	margin: 100px;
	margin-top: 290px;
	color: #666666;
	text-decoration: none;
	font-size: 24px;
}

div#header cu a{
	position: absolute;
	width: 80px;
	left: 908px;
	margin: 1px;
	color: #f5f5f5;
	font-size: 14px;
}

div#header au a{
	position: absolute;
	width: 80px;
	left: 810px;
	margin: 1px;
	color: #f5f5f5;
	font-size: 14px;
}

div#header a{
	position: relative;
	width: 0;
	float: left;
	margin: 85px;
	margin-top: 290px;
	color: #666666;
	text-decoration: none;
	font-size: 24px;
}

div#header pa a:hover, div#header pa a:active{
	background: url(images/arrow.png) no-repeat center top;
	position: absolute;
	left: 30px;
	width: 0;
	float: left;
	margin: 120px;
	margin-top: 290px;
	color: #b5121b;
}

div#header da a:hover, div#header da a:active{
	color: #b5121b;
}

div#header pkg a:hover, div#header pkg a:active{
	color: #b5121b;
}

div#header avg a:hover, div#header avg a:active{
	color: #b5121b;
}

div#header price a:hover, div#header price a:active{
	color: #b5121b;
}

div#header cu a:hover, div#header cu a:active{
	color: #ffffff;
}

div#header au a:hover, div#header au a:active{
	color: #ffffff;
}

sd{
	position: absolute;
	left: 150px;
	bottom: 680px;
	font-size: 9px;
}

wd{
	position: absolute;
	left: 335px;
	bottom: 680px;
	font-size: 9px;
}

pk{
	position: absolute;
	left: 475px;
	bottom: 680px;
	font-size: 9px;

}

av{
	position: absolute;
	left: 665px;
	bottom: 680px;
	font-size: 9px;
}

prc{
	position: absolute;
	left: 835px;
	bottom: 680px;
	font-size: 9px;
}

p{
	position: absolute;
	width: 360px;
	left:615px;
	bottom: 70px;
	font-size: 12px;
}

I understand it looks confusing to you, however I don't know what's the solution for it when I put <li> because the text align distributing well but some texts are pretty long and it doesn't look proportional at all, so I come up with my own version.

AshtonSanders

"cookie053177" said:
Do any know knows what's this problem called?

I think this problem is called "The life of a web developer."

Your code is most likely not written correctly. IE is less forgiving than some of the other modern browsers.

I would start by validating your code:
http://validator.w3.org/check?verbose=1 ... nge.com%2F

treehouse : what would you like to learn today?

Forums

What IE bug is this called?