Horizontal Align Div in IE?

HTML & CSS
1

Hi all,

I have set a div to automatically sit dead centre, and it is working in Firefox/chrome but not in IE8. Any known bugs ?

The code:

<div id="bigimage">
	<img style="width: 421px; height: 315px;margin-left:15px;" src="http://myurl.jpg" alt="" id="bigImage" name="bigImage"> 
</div>



background: url(myurlhere) 
no-repeat scroll 0% 0% transparent; 
position: relative;
 -moz-background-inline-policy: continuous;
width: 454px; 
height:341px;
padding-top: 16px;
margin-left:auto;
margin-right:auto;

There may be some superfluous code in there, im cleaning up after another developer.

Regards and thanks for your quick response.

2

Try this-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<style>
	#bigimage{ 
	width:500px; height:500px; margin:0 auto; background:#999999;
	text-align:center;
	}
	
</style>

<body>
<div id="bigimage"><img src="http://myurl.jpg" alt="" name="bigImage" width="421" height="315" id="bigImage"></div>
</body>
</html>
3

Looks ok to me. Presumably you have those styles wrapped like so:

[COLOR="Red"]#bigimage {[/COLOR]
background: url(myurlhere)
no-repeat scroll 0% 0% transparent;
position: relative;
 -moz-background-inline-policy: continuous;
width: 454px;
height:341px;
padding-top: 16px;
margin-left:auto;
margin-right:auto;
[COLOR="Red"]}[/COLOR]

So what is actually happening in IE?

4

@johnuk

At least a screenshot… if not a live page… or a full code.

But it seems you lack a proper DTD, like this one:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

at the top of your web page markup. Missing proper DTD makes IE act quirky.

@Bill_kar

There are a couple of things to be mentioned about your code:

Why transitional DTD? I don’t see any reason in your code for it!

<meta http-equiv="Content-Type" content="text/html; charset=[COLOR="Red"]iso-8859-1[/COLOR]" />

It is “the default character set in most browsers”. Just not so much appreciated anymore.

</head>
[COLOR="red"]<style>
	#bigimage{ 
	width:500px; height:500px; margin:0 auto; background:#999999;
	text-align:center;
	}
	
</style>[/COLOR]

<body>

Inside <head> is the best and right place to put the <style>. You could place it in <body>. Not so good. But to make it a direct descendant of <html>… Not good at all.

You’ve missed the type attribute for the <style> element:

<style[COLOR="DeepSkyBlue"] type="text/css"[/COLOR]>...</style>

You’ve used the html syntax for the <img> rather than the xhtml syntax of self closing tag for void elements.

5

Thanks for all your replys. Im sorry I couldnt link you guys the pages Im modify for this guy are sat on my pc.

The good news is, I just noticed the developer before me used no DTD… jeeze…