Vertical alignment in IE

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • wastedguitarist
    New Member
    • Mar 2009
    • 7
    #1

    Vertical alignment in IE

    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
    Code:
    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;
}
    Last edited by Frinavale; Mar 25 '09, 01:11 PM. Reason: Added [code] tags. Please post code in [code] [/code] tags.
    Tags: ie firefox alignment
    • wastedguitarist
      New Member
      • Mar 2009
      • 7
      #2
      Vertical alignment in IE

      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
      Code:
      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;
}
      Last edited by Frinavale; Mar 25 '09, 01:12 PM. Reason: Added [code] tags. Please post code in [code] [/code] tags.

        Comment

        • Frinavale
          Recognized Expert Expert
          • Oct 2006
          • 9749
          #3
          Hi Wastedguitarist ,

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

            Comment

            • drhowarddrfine
              Recognized Expert Expert
              • Sep 2006
              • 7434
              #4
              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.

                Comment

                • Frinavale
                  Recognized Expert Expert
                  • Oct 2006
                  • 9749
                  #5
                  Oh that explains why it looks fine for me...I was viewing in IE8.

                    Comment

                    • wastedguitarist
                      New Member
                      • Mar 2009
                      • 7
                      #6
                      yeah im trying to view it in IE6 and IE7

                      Removing one of the autos had no effect

                      Thanks for trying though !

                        Comment

                        Previous template Next
                        Working...