Website not centering correct in IE8

M

marcovis

New Member
Dear all,

I've got a problem getting a website to center correct in IE8. Everything's fine in IE9 and/or IE7, Chrome, etc.

In the page there are two div's that should center the main content:
HTML: 
<div id="main_top"><img src="/***.gif" alt="." /></div>
<div id="main_bg">

Also, in the <body> tag, there's an id:
HTML: 
<body id="page_bg">

In the css is the following:
Code: 
#page_bg {
	padding: 0px;
	margin-bottom: 1px;
}

div#main_bg{
	margin:0px auto;
	width: 997px;
	text-align:left;
}
div#main_top{
	margin:0px auto;
	width: 997px;
	height: 9px;
	line-height: 9px;
	padding: 0px;
}

What should I change to the css to make this center correct in IE8?

Kind regards,
Marco Visser
 
J

Jamiex93

New Member
marcovis said:
Dear all,

I've got a problem getting a website to center correct in IE8. Everything's fine in IE9 and/or IE7, Chrome, etc.

What should I change to the css to make this center correct in IE8?

Kind regards,
Marco Visser
Click to expand...

Internet Explorer by default based on "Quirks" requires a validated doc type, otherwise the browser will render pages based on its own rules. A doc type (DTD) tells the browser which version of HTML you have marked up in your document. http://www.w3schools.com/html/html_doctype.asp

The other problem if you haven't included a doc type was "Margin: 0 auto" only centers a block if the width of the block is set to be less the the width of the parent, normally they are same so it doesn't center. I believe that is a IE bug as it works in most browsers, instead either use a isolated styling sheet for IE users or use "margin-left: auto;" & "margin-right: auto;" as auto results in the block width being equal to the containing block width.

Code: 
#main_bg {
margin-left: auto ;
margin-right: auto ;
}

http://prntscr.com/6003b
 
Last edited:
You must log in or register to reply here.
Top