Vertical alignment in IE

[wastedguitarist]

hey everyone, i have a site that i have designed in dreamweaver. In firefox, the site looks fine, but in IE the whole thing is vertically missalligned, apart from the header / menu.

I have created the site using css, which i include below. the site can be viewed at http://www.catalystpics.co.uk/dev/index.html

Thanks in advance to anyone who can help
 
This is my css
 
body {
    padding: 0;
    margin: 0;
    font-size: 12px;
    font-family: Tahoma, Arial; 
    text-align: justify;
    color: #5C5C5C;
    border:0px;
 
/* 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_item a {
    background-color:#FAE707;
    color: #000000;
}
 
/* Page */
#page {
    width: 1200px;
    background-image:url(Images/body.JPG);
    margin-top: 0;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;    
}
 
/* Content */
#contenttop {
    position:relative;
    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:relative;
    font-family: Tahoma, Arial;
    margin-left:180px;
    margin-right:180px;
    margin-top:15px;
    float: left;
    width: 840px;
    height: 450px;
    left: 0px;
    top: 000px;
}
 
#contentmiddlework {
    position:relative;
    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:relative;    
    font-family: Tahoma, Arial;
    margin-left:180px;    
    margin-top:15px;
    float: left;
    width: 540px;
    height: 550px;
    left: 0px;
    top: 30px;
}
 
#contentright {
    position:relative;
    font-family: Tahoma, Arial;
    margin-right:180px;
    margin-top:15px;
    float: left;
    width: 300px;
    height: 550px;
    left: 0px;
    top: 30px;
}
#contentbottom{
    position:relative;
    font-family: Tahoma, Arial;
    margin-left:180px;
    margin-right:180px;
    margin-top:15px;
    float: left;
    width: 840px;
    height: 350px;
    left: 0px;
    top: 40px;
}
 
#contentbottomwork {
    position:relative;
    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:relative;
    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;
}

[wastedguitarist]

hey everyone, i have a site that i have designed in dreamweaver. In firefox, the site looks fine, but in IE the whole thing is vertically missalligned, apart from the header / menu.

I have created the site using css, which i include below. the site can be viewed at http://www.catalystpics.co.uk/dev/index.html

Thanks in advance to anyone who can help

This is my css

body {
padding: 0;
margin: 0;
font-size: 12px;
font-family: Tahoma, Arial; 
text-align: justify;
color: #5C5C5C;
border:0px;
 
/* 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_item a {
background-color:#FAE707;
color: #000000;
}
 
/* Page */
#page {
width: 1200px;
background-image:url(Images/body.JPG);
margin-top: 0;
margin-right: auto;
margin-bottom: auto;
margin-left: auto; 
}
 
/* Content */
#contenttop {
position:relative;
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:relative;
font-family: Tahoma, Arial;
margin-left:180px;
margin-right:180px;
margin-top:15px;
float: left;
width: 840px;
height: 450px;
left: 0px;
top: 000px;
}
 
#contentmiddlework {
position:relative;
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:relative; 
font-family: Tahoma, Arial;
margin-left:180px; 
margin-top:15px;
float: left;
width: 540px;
height: 550px;
left: 0px;
top: 30px;
}
 
#contentright {
position:relative;
font-family: Tahoma, Arial;
margin-right:180px;
margin-top:15px;
float: left;
width: 300px;
height: 550px;
left: 0px;
top: 30px;
}
#contentbottom{
position:relative;
font-family: Tahoma, Arial;
margin-left:180px;
margin-right:180px;
margin-top:15px;
float: left;
width: 840px;
height: 350px;
left: 0px;
top: 40px;
}
 
#contentbottomwork {
position:relative;
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:relative;
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;
}

[Frinavale]

Hi Wastedguitarist,

I visited the site and everything looks fine to me.
What is the problem exactly?

[drhowarddrfine]

Since IE fixed a lot of their CSS in IE8, it works there. It might have something to do with "margin collapse" but I don't have a Windows box to test on right now.

In #page, did you mean to have 'margin:0 auto auto'? See if removing one of the autos helps.

[Frinavale]

Oh that explains why it looks fine for me...I was viewing in IE8.

[wastedguitarist]

yeah im trying to view it in IE6 and IE7

Removing one of the autos had no effect

Thanks for trying though !