IE is non compliant, need help!

[ThEMakeR]

Hi,

Thanks to all who help here!

I have made several website designs but they never look right in IE (internet explorer). The stylesheet I use is shown below and it works fine in all browsers apart from IE.

Do I need to use two style sheets? If so what would beed replacing, editing or including to make IE not display things wrong?

HERE IS THE WEBSITE LINK!!

/* CSS Code by Oliver Martin of TM-Designs.org */

#header {


	margin-top: -8px;
	margin-bottom: -5px;
}

#adspace {
	width: 475px;
	height: 80px;
}

#copyright {
	border-top: 2px solid #7F7F7F;
	width: auto;
}

#header a, #nav a{
	color: #212121;
}

#leftpanel {
	position: absolute;
}

#leftpanel {
	margin-top: 2px;
	padding: 0 4px 0 2px;
	width: 218px;
	height: auto;
	text-align: left;
}

#content {
	border-left: 2px solid #7F7F7F;
	margin-top: 7px;
	margin-left: 230px;
	margin-right: 200px;
	padding: 2px 4px 2px 18px;
	min-height: 600px;
	height: auto;
	text-align: left;
}

body {
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
}

/* specifies color for links */
a {
	text-decoration: underline;
	color: #b5b5b5;
	font-size: 10px;
}

a:hover {
	text-decoration: none;
	color: #84ff00;
}

Theres not loads of code in this style sheet so hopefully you can help me. I need to learn how to adjust things so that they appear perfect in IE as well as FF and etc.

Thanks alot!

[drhowarddrfine]

First thing noticed is you are using the transitional/loose/sloppy doctype along with Xhtml end tags so that won't work. All new pages should always use a strict doctype. See my link below. Use html4.01 strict. Change the ending /> tags to just >

Then validate your code and fix the couple of errors you have. Ignore the alt tag errors for now.

[Paul O'B]

HI,

Your left column is misplaced because you have made it position absolute but neglected to supply the position co-ordinates. This means the browers will decide where it thinks it is which may not be where you want it.

Use border on elements for dicviding lines and then you won't ness horizontal rules.

Don't mix dprecated presentational attributes such as align="left" etc when using css as there will be conflicts and it is also bad practice. Use css for all presentation.

Control the margins correctly. For example you have applied negative margins to your header when you should have been controlling the default body margins and padding instead. Nealy all elements have defualt margins/padding that you must control.

If you design things carefully in the first place you will find that the browsers display pretty much the same apart from browser bugs.

#header {
    border-bottom:1px solid #666;
	margin:0 0 5px 0;
}

#leftpanel {
	position: absolute;
    left:10px;

}
a img{border:none}