Alignment Off In IE6 and IE7

[wastedguitarist]

Hey guys, still having loads of trouble with this website, it looks fine in Firefox, and in IE8, but any previous version of IE looks terrible.

The site can be viewed here http://www.catalystpics.co.uk/dev/index.html

As you can see the site is still only in development stages, but this is a major issue i need to sort,

Hope someone can help !

Thanks in advance

Wastedguitarist

my css code is as follows

body {
margin: 0;
padding: 0;
font-size: 12px;
font-family: Tahoma, Arial;
text-align: justify;
color: #5C5C5C;
border:0px;
}

h1, h2, h3 {
margin: 0;
font-weight: normal;
color: #FFFFFF;
}

h1 {
letter-spacing: -1px;
font-size: 32px;
}

h2 {
font-size: 23px;
}

p, ul, ol {
margin: 0 0 2em 0;
text-align: justify;
line-height: normal;
}

a {
color: #1B75A9;
}

a:hover, a:active {
text-decoration: none;
color: #1B75A9;
}

a:visited {
color: #1B75A9;
}

img {
border: none;
}

img.left {
float: left;
margin-right: 15px;
}

img.right {
float: right;
margin-left: 15px;
}

/* Header */
#header {
width: 1200px;
margin: 0 auto;
height: 60px;
}

/* Menu */
#menu {
float: left;
background: url(images/menu.gif) repeat-y top center;
width:1200px;
height:95px;
margin:0 auto;
}

#menu ul {
font-weight:bold;
font-size:16px;
text-decoration:none ;
margin: 0;
padding: 23px 0 0 20px;
list-style: none;
line-height: normal;
text-align:center;

}

#menu li {
text-align: center;
display:inline;
}

#menu a {
font-weight:bold;
font-size:16px;
text-decoration:none ;
color:#ffffff;
background-color:#000000;
padding:0px 30px 2px 30px;
}

#menu a:hover {
background-color:#FAE707;
font-weight:bold;
font-size:16px;
text-decoration:none ;
color:#000000;
}

#menu .current_page_i tem a {
background-color:#FAE707;
color: #000000;
}

/* Page */
#page {
width: 1200px;
background-image:url(Image s/body.JPG);
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}

/* Content */
#contenttop {
position:relati ve;
font-family: Tahoma, Arial;
margin-left:180px;
margin-right:180px;
margin-top:10px;
float: left;
width: 840px;
height: 100px;
left: 00px;
top: 00px;
}

#contentmiddle {
position:relati ve;
font-family: Tahoma, Arial;
margin-left:180px;
margin-right:180px;
margin-top:15px;
float: left;
width: 840px;
height: 450px;
left: 0px;
top: 000px;
}

#contentmiddlew ork {
position:relati ve;
font-family: Tahoma, Arial;
margin-left:113px;
margin-right:113px;

float: left;
width: 963px;
height: 495px;
left: 0px;
top: 000px;
background-color: #FFFFFF;
}

#contentleft {
position:relati ve;
font-family: Tahoma, Arial;
margin-left:180px;
margin-top:15px;
float: left;
width: 540px;
height: 550px;
left: 0px;
top: 30px;
}

#contentright {
position:relati ve;
font-family: Tahoma, Arial;
margin-right:180px;
margin-top:15px;
float: left;
width: 300px;
height: 550px;
left: 0px;
top: 30px;
}
#contentbottom{
position:relati ve;
font-family: Tahoma, Arial;
margin-left:180px;
margin-right:180px;
margin-top:15px;
float: left;
width: 840px;
height: 350px;
left: 0px;
top: 40px;
}

#contentbottomw ork {
position:relati ve;
font-family: Tahoma, Arial;
margin-left:113px;
margin-right:113px;
margin-top:0px;
float: left;
width: 963px;
height: 350px;
left: 0px;
top: 10px;
background-color: #FFFFFF;
}


/* Footer */
#footer {
position:relati ve;
background: url(images/footer.jpg) repeat-y top center;
width:1200px;
height:138px;
margin:0 auto;
top:-25px;
}

#footermenu {

width:840px;
height:138px;
margin-left:180px;
margin-right:180px;
}

[Dormilich]

Hey guys, still having loads of trouble with this website, it looks fine in Firefox, and in IE8, but any previous version of IE looks terrible.

IE uses a different box model than the standard compliant browsers (width(IE) = width(W3C) + padding + border), maybe that's why (I have no IE to test ...)

[drhowarddrfine]

Actually, the box models are the same if one uses a proper doctype. I didn't compare the site to IE for the same reason, I don't have my Windows box on, but you still have 20 HTML errors that need correcting.

IE8 is still an incompetent browser but it's CSS is pretty much up to standards so that's why it looks the same as the more modern browsers. I'm not surprised IE6/7 don't look the same but need more specifics on the problem, as well as getting the 20 errors fixed.