Problem centering layout in Internet Explorer

Discussion in 'CSS' started by tronik, Jan 20, 2012.

0
  1. #1
    My layout works fine in google chrome, but if I load it up in internet explorer it looks like a mess(won't center layout). I've been trying to find a solution, and obviously I didn't so that's why I am posting here. You can view the page live at http://www.tronikstudios.com and below is the css.

    
body {
margin: 0;
padding: 0;
background-color: #000000;
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-position:center; 
}
h1 {
display: block;
height: 111px;
width: 358px;
margin: 0;
padding: 0;
margin-left: auto;
margin-right: auto;
text-indent: -9999px;
background: transparent url(images/logo.png) no-repeat;
}
#menu {
margin-left: auto;
margin-right: auto;
text-align: center;
width: 990px;
color: #FFF;
font-family: arial;
font-size: 14pt;
text-shadow: 1px 0px 1px #000;
text-align: center;
}
.mpad {
padding-top: 7px;
}
#menul {
float: left;
width: 19px;
height: 34px;
background: url(images/menu-left.jpg) no-repeat;
}
#menur {
float: left;
width: 19px;
height: 34px;
background: url(images/menu-right.jpg) no-repeat;
}
#menubg {
float: left;
width: 952px;
height: 34px;
background: url(images/menu-bg.jpg);
background-repeat: repeat-x;
}
.mpad A:link {text-decoration: none; color: #FFF;}
.mpad A:visited {text-decoration; color: #FFF;}
.mpad A:active {text-decoration; color: #FFF;}
.mpad A:hover {text-decoration: none; color: red;}
#content {
margin-left: auto;
margin-right: auto;
padding-bottom: 50px;
min-height: 75%;
width: 990px;
background: url(images/content.jpg);
background-repeat: repeat-y;
}
.ctext {
width: 922px;
margin-left: auto;
margin-right: auto;
color: #1f57ac;
font-family: arial;
font-size: 9pt;
}
#footer {
margin-left: auto;
margin-right: auto;
text-align: center;
left: 4px;
width: 1121px;
height: 115px;
background: url(images/footer.jpg);
background-repeat: no-repeat;
}
.ftext {
padding-top: 70px;
color: #000;
font-family: arial;
font-size: 8pt;
}
h2 {
margin: 0;
padding: 0;
color: #1f57ac;
font-family: arial;
font-size: 11pt;
font-weight: bold;
border-bottom: 1px solid #1f57ac;
}


#container {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	width:900px;
}


#prev {
	position:absolute;
	top:175px;
	left:-20px;
	z-index:10;
}


#next {
	position:absolute;
	top:175px;
	right:-22px;
	z-index:10;
}


.slider {
	width:900px;
	height:400px;
	border:1px solid #000;
}
    Code (markup):

     
    tronik, Jan 20, 2012 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    You will never get IE to attempt to perform like the other far more modern browsers without a proper doctype. Add this to your first line: <!DOCTYPE html> . Without one, IE stumbles into quirks mode and becomes even more incompetent than it already is.
     
    drhowarddrfine, Jan 20, 2012 IP
  3. tronik

    tronik Peon

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Yeah I was waiting to fix centering the layout before adding the doctype because then I would just validate the layout at w3.org and fix the errors all at once. Anyways I fixed the centering layout problem, all I had to do was center the layout in the body and tweak a bit more of the css since it centered everything(including the content).
     
    tronik, Jan 20, 2012 IP
  4. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #4
    Never, EVER do that. The doctype is the very first thing to go on a page and is never added or subtracted or experimented with. As I said above, without one, you are in quirks mode and it's like 1998 all over again!
    The error list is different with/without a doctype!
     
    drhowarddrfine, Jan 20, 2012 IP