IE positioning error

[silent_circus]

I am confused with a problem viewing a page i am creating for a website.You need IE and another browser (i use firefox) to see what i mean. The page i am working on is:http://www.g3sbt.com/kent/aboutus.htmlOpening in Firefox you will see the intended layout of the page, however when you view in IE, i have version 6.0, the position of the boxes/sheets/whatever is different. Feel free to view the source, I have included the code from the external sheet below.I dont uderstand this problem any tips or fixes would help, feel free to email me at kenttaylor84@gmail.com Thanks.

* {  margin: 0 auto;  padding: 0;}body {	background: #fff url(images/bgpattern.gif) repeat-x; 	color: #000000; 	font: 0.7em "Verdana", Helvetica, Arial, sans-serif; 	text-align: center; 	color: black;} #headwrap {	position: relative; 	clear: both; 	width: 880px; 	height: 212px; 	text-align: center; 	color: yellow; 	background-image:url(images/header_red.gif); }#navigation {	height: 30px;	width: 600px;	position: absolute; 	bottom: 5px;	left: 200px;}#wrapper {	position: relative; 	width: 880px; 	height: 520px; 	background: #fff; }#right {	float: right; 	width: 159px; 	height: 333px; 	margin: -1px 10px 5px 5px; 	background-image:url(images/bgright.gif); }#right_content {	width: 134px;	height: 310px;	margin: 10 10 10 10;}#left {	float: left; 	width: 174px; 	height: 320px; 	margin: 10px 10px 10px 0px; 	background-image:url(images/bgflash.gif); 	background-repeat: no-repeat;}#about_left {	position: relative; 	float: left; 	width: 660px; 	height: 125px; 	margin: 10 10 10 10;}#about_left2 {	position: relative; 	float: left; 	width: 660px; 	height: 125px; }#about_content1 {	position: relative; 	float: left; 	width: 600px; 	height: 200px; 	margin-left: 20px;}#about_content2 {	float: left; 	width: 100%; 	height: 200px; 	border: 1px solid #000;}/* Fast Action Logo Area */#image1 {	float: left; 	width: 305px; 	height: 145px; 	margin-left: 100px; /* -166px */	margin-top: 10px; 	background-image:url(images/bgfastaction.gif); 	background-repeat: no-repeat;}#image1_content {	width: 280px;	height: 135px;	margin: 10 10 10 10;}#image2 {	float: left; 	width: 150px; 	height: 160px; 	margin: 5 5 5 5;	border: 0;}#footer {	position: absolute; 	width: 880px;	bottom: 5px; 	height: 3em; 	left: 1px;	font-family:Tahoma; 	font-size:11px;  	color:#666666; 	text-decoration:none;}  .main {  	font-family:Verdana, Arial; 	font-size:14px;  	color:#000; 	line-height:16px;}  .verdana {  	font-family:Verdana; 	font-size:20px;  	color:#2D3237; 	line-height:25px;}  a.link:link {color:#888888; text-decoration:none}  a.link:visited {color:#888888; text-decoration:none}  a.link:hover {color:#888888; text-decoration:underline}  a.link:active {color:#888888; text-decoration:none}    h2 {  	font-family:Verdana;	font-size: 1.3em;	color: #FF0000;	line-height: 1.5em;  }.hovermenu ul{font: bold 13px arial;padding-left: 0;margin-top: 10px;margin-left: 0;height: 20px;}.hovermenu ul li{list-style: none;display: inline;}.hovermenu ul li a{padding: 2px 0.5em;text-decoration: none;float: left;color: black;background-color: #FFF;border: 2px solid #DF1818;}.hovermenu ul li a:hover{color: white;background-color: #DF1818;border-style: outset;}html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */border-style: inset;}#aboutus_left {	float: left;	height:400px;	width:500px;	margin: 30 0 0 50;}#aboutus_right {	float: right;    margin-top: 110px;    margin-right: 95px;	height:250px;	width:175px;}#wrapper_aboutus {	position: relative;	width: 880px; 	height: 880px; 	background: #fff; }

Edited March 14, 2006 by Jonas

[Err]

Normally I wouldn't touch absolute postionings with a 30 foot pole (hmm... that sounds errily familiar).Anyways, I can see several problems.You have <br /> tags right after your </li>, if you want to space out the list, take off those line break tags and use line-height:

ul {  line-height: 15px;}

Try to widen the main div to fit the image to the right side, perhaps that could help.

[raimo]

There is XHTML tags and HTML document type, not surely the reason of this case, but still wrong way to do things. Use either HTML tags and HTML DTD or XHTML tags and XHTML DTD.In HTML <br> "end tag" is forbidden and in XHTML it is required.So with HTML DTD <br /> is a bit kind of illegal.I think browsers suvived that, but <br> is anyway the right procedure to use br with HTML and <br /> with XHTML.But those CSS errors (5) and HTML errors (14), must be fixed first:( I hope, all CSS warnings will be fixed too )with CSS You must use px or em etc. as measure unit.You can't say margin: 10 10 10 10;it must be as margin: 10px 10px 10px 10px;otherwise browser can't know what measure unit to use.(margin: 0; is only legal case -> 0px and 0em etc. is the same)Test URLs:W3C CSS validator to Your pageW3C HTML validator to Your pageI quess error 13 goes away when br-tags are removed from ul/li block?When those errors are fixed, I think there is much better possibilities to work as planned.edit:somehow I didn't see RahXephon reply at all before my posting.

[Err]

edit:somehow I didn't see RahXephon reply at all before my posting.

<{POST_SNAPBACK}>

I'm as quick as lightning