PDA

View Full Version : My sites are centered on opera and firefox but not IE


Dixie Chamberlain
02-16-2010, 05:26 PM
Anyone have this problem? On my sites, everything is centered using #wrapper and shows up centered on firefox and opera... but on IE, it looks like the #wrapper is docked all the way to the left...

tux
02-16-2010, 05:36 PM
It would be handy to see you code including your css and maybe a link to your site.

Dixie Chamberlain
02-16-2010, 05:51 PM
It would be handy to see you code including your css and maybe a link to your site.

http://ultramegamanx.uuuq.com/

<p><link REL="SHORTCUT ICON" href="../../Documents/Dreamweaver/UltraMegaManX/Images/favicon.ico" />
<!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=utf-8" />
<title>Ultra Mega Man X</title>
<style type="text/css">
<!--
body {
background-color: #000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(Images/Background%204.jpg);
}
#apDiv1 {
position:absolute;
left:613px;
top:445px;
width:161px;
height:94px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:414px;
top:145px;
width:171px;
height:88px;
z-index:1;
}
#apDiv3 {
position:absolute;
left:452px;
top:95px;
width:54px;
height:85px;
z-index:1;
}
body,td,th {
font-size: 12px;
}
#apDiv4 {
position:relative;
width:900px;
height:767px;
z-index:2;
margin-right: auto;
margin-left: auto;
left: 4px;
top: 6px;
}
#apDiv5 {
position:absolute;
width:568px;
height:521px;
z-index:1;
left: 0px;
top: -1px;
}
#apDiv6 {
position:absolute;
width:280px;
height:154px;
z-index:1;
left: 540px;
top: 315px;
}
#apDiv7 {
position:absolute;
width:200px;
height:115px;
z-index:2;
left: 727px;
top: 462px;
}
-->
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>

<body text="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="apDiv4">
<div id="apDiv5">
<div id="apDiv6">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="275" height="150">
<param name="movie" value="Flash/X.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="Flash/X.swf" width="275" height="150">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<img src="Images/Mega Man.png" width="843" height="767" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="poly" coords="609,502" href="#" />
<area shape="poly" coords="611,507,616,473,728,473,724,509" href="main.html" alt="Enter" />
</map>
</div>
</div>
<p align="center">Firefox is required to view this site properly<br>
<a href="http://www.mozilla.com/en-US/"><img src="Images/firefox_icon.png" alt="Firefox Icon" width="38" height="38" border="0"></a><br>
Site design by David L. Cox</p>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>

gentleone
02-16-2010, 06:40 PM
margin: 0 auto is not enough for IE. You have to add to 'body' in your css this rule: text-align: center;

On another not. You shouldn't use apDiv's (with position: absolute & z-indexes) for your layout. Just use div tags and position them with floats, margins & paddings.

Dixie Chamberlain
02-16-2010, 07:03 PM
margin: 0 auto is not enough for IE. You have to add to 'body' in your css this rule: text-align: center;

On another not. You shouldn't use apDiv's (with position: absolute & z-indexes) for your layout. Just use div tags and position them with floats, margins & paddings.
OK, I figured out what you're talking about. I'll rebuild it with div tags.