johnuk
November 24, 2010, 1:07pm
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.
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>
ralphm
November 24, 2010, 1:21pm
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?
system
November 24, 2010, 1:37pm
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.
johnuk
November 24, 2010, 2:04pm
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…