 |
 |
|
||||||||
|
||||||||
04-04-2011, 11:28 AM
|
#1 |
|
New Member
 Join Date: Apr 2011
Location: Dublin Ireland
Posts: 1
|
CSS issue with IE8 marign auto not working
Hi all,
I've got an issue with my site in IE8. Now just to let you know I'm experimenting with the zend framework and Dojo so I'm not sure if this is the cause. Anyway I have a container div called page and I want it to appear in the middle of my page so I set the margin-let and right to auto. Now the site renders correctly in Chrome and Firefox but in not in IE. I have read that there is/was a bug in IE 8 related to this and I've tried doing what was suggested here http://www.designerstalk.com/forums/...g-div-ie8.html But the page will still not render correctly. Worried I checked a site that I have done for a client that uses this positioning but it works fine in IE 8. Part of my css and my master.phtml below can anyone tell me what I'm doing wrong??? Thanks in advance. HTML Code:
<!DE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="/js/detectbrowser.js"></script> <link rel="stylesheet" type="text/css" href="/css/master.css" /> <?php if($this->dojo()->isEnabled()): echo $this->dojo(); endif; ?> </head> <body class="soria"> <div id="page"> <div id="banner"> <p>PetManager v1.0 </p> </div> <div id="imgmenu"> <ul class="imgNav"> <li> <img src="/images/nav/customer.png" /> </li> <li> <img src="/images/nav/pets.png" /> </li> <li> <img src="/images/nav/grooming.png" /> </li> <li> <img src="/images/nav/kennel.png" /> </li> <li> <img src="/images/nav/report.png" /> </li> <li> <img src="/images/nav/user.png" /> </li> <?php if(Zend_Auth::getInstance()->hasIdentity()):?> <?php echo "<li> <a href='/logout'> <img src='/images/nav/logout.png'/> </a> </li>" ;?> <?php else:?> <?php echo "<li> <a href='/login'> <img src='/images/nav/login.png'/> </a> </li>" ;?> <?php endif;?> </ul> </div> <div id="content"> <?php echo $this -> layout() -> content ?> </div> <div id="footer"> <p> PetManager v1.0 Created By Graham Farrell S/N: 2687939. </p> </div> </div> </body> </html> Code:
@charset "utf-8";
/* CSS Document */
/*master.css*/
body {
padding:0;
margin:0;
font: "Times New Roman", Verdana, Arial, Helvetica, sans-serif;
text-align: centre;
letter-spacing: 1px;
}
p{
font-size: 14px;
font-weight: normal;
margin-top: 0px;
margin-bottom: 3px;
}
.strong{
font-weight: bold;
}
/**** Page Layout Format *****/
#page{
width: 1025px;
min-height:500px;
padding:0px;
margin-left: auto;
margin-right: auto;
}
#footer{
width:1020px;
height:20px;
}
#footer p{
text-align:right;
font-size: 10px;
color: #696969;
}
|
|
|
|
04-05-2011, 12:08 AM
|
#2 |
|
Gold Member
 
Join Date: Mar 2010
Location: Auckland, New Zealand
Posts: 326
|
You will need to make the div's position absolute for this to work in IE.
so #page {.position:absolute;margin: 0 auto 0 auto;} etc... |
|
|
|
|
04-05-2011, 01:21 AM
|
#3 |
|
Platinum Member
 
Join Date: Jan 2011
Location: Oklahoma City, OK
Posts: 676
|
Another option:
#page{ position:relative; width: 1025px; left:50% margin-left:-513px; min-height:500px; padding:0px; } |
|
|
|
|
04-05-2011, 02:00 AM
|
#4 |
|
Gold Member
Join Date: Mar 2010
Location: Auckland, New Zealand
Posts: 326
|
Oops retract that, just tried my fix - didn't work. *bad memory*
Try setting body width to 100% |
|
|
|
|
04-06-2011, 03:38 PM
|
#5 |
|
Super Moderator
 Join Date: Oct 2008
Location: Arizona, USA
Posts: 1,053
|
Any element using the auto value for left and/or right margins must have a declared width (which you do).
Can you post the url so we can see it live?
__________________
John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com |
|
|
|
 |
| Thread Tools | |
| Display Modes | |
|
|
Linear Mode
