phpknight Posted August 6, 2007 Share Posted August 6, 2007 I have this CSS rule: width: 400; margin-left: auto; margin-right: auto; According to the rules, this should center the element within its containing block. However, in IE7, the box still appears to the left. Is this a bug or am I wrong here? Quote Link to comment Share on other sites More sharing options...
phpknight Posted August 6, 2007 Author Share Posted August 6, 2007 I think I figured this out. margin-left: 25%; margin-right: 25%; is probably a better way to do this. Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted August 6, 2007 Share Posted August 6, 2007 not really.... that would center it but 25% of the parents width woudl yeild a variable width for the element in question - great for fluid layouts BUT IMO it is better to give it a width and margin auto. The reason the css in the OP didn't work is becasue of width: 400 - you need to specify a unit measure like px or % otherwise the browser is guessing... Quote Link to comment Share on other sites More sharing options...
phpknight Posted August 6, 2007 Author Share Posted August 6, 2007 Okay, great. I knew I was forgetting something. Thanks! Quote Link to comment Share on other sites More sharing options...
phpknight Posted August 6, 2007 Author Share Posted August 6, 2007 Hmm. Even with the width at 400px and both margins at auto, IE7 still puts the div on the left side. width: 400px; margin-left: auto; margin-right: auto; Firefox puts it in the center, though. Any advice? Quote Link to comment Share on other sites More sharing options...
mainewoods Posted August 6, 2007 Share Posted August 6, 2007 --cross browser centering, inner block is centered, but text within inner block is left aligned: <div style="text-align:center;"> <div style="width:400px;text-align:left;margin-left:auto;margin-right: auto;"> **your content** </div> </div> Quote Link to comment Share on other sites More sharing options...
phpknight Posted August 6, 2007 Author Share Posted August 6, 2007 <div style="width:400px;text-align:left;margin-left:auto;margin-right: auto;"> **your content** </div> For the above line there, would that work even if the containing element was html? That is where IE7 seems to freak out here. Quote Link to comment Share on other sites More sharing options...
mainewoods Posted August 6, 2007 Share Posted August 6, 2007 you have to use both div's for the hack(because of ie!), not one as you just did and putting it into html should cause no prob, I do it all the time. Quote Link to comment Share on other sites More sharing options...
phpknight Posted August 6, 2007 Author Share Posted August 6, 2007 Okay, so do you have one div for your entire html body? Quote Link to comment Share on other sites More sharing options...
mainewoods Posted August 7, 2007 Share Posted August 7, 2007 no, just put that structure within whatever you want: <table><tr> <td><!-- left col --> <div style="text-align:center;"> <div style="text-align:left;width:400px;margin-left:auto;margin-right:auto;"> **your content** </div> </div> ** some other content, non centered ** <td> <td><!-- right col --> ** more non centered stuff ** ** repeat the structure above for centered content within whatever you want ** ** you're not limited to the whole page centered or non centered ** <td> </tr></table> --only center the content you want! The method above is the cross browser compatable way. Quote Link to comment Share on other sites More sharing options...
wildteen88 Posted August 7, 2007 Share Posted August 7, 2007 Auto margins work fine with IE. <!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> <title>IE auto margins</title> </head> <style type="text/css"> body { font-family: "Trebuchet MS", Verdana, Arial; font-size: 18px; background-color: #F1F1F1; } #container { width: 780px; margin: 20px auto; /* auto margins */ } #header, #content { border: 2px solid #E1E1E1; padding: 20px; margin-bottom: 30px; background-color: #FFF; } #header h1 { color: #333; text-align: center; margin: 0; } #content code { margin: 5px 30px; width: 90%; display: block; font-size: 14px; } </style> <body> <div id="container"> <div id="header"> <h1>IE Auto margins</h1> </div> <div id="content"> <p>Auto margins work fine within IE!</p> <p>I find auto margins work fine within IE when you use valid DOCTYPE, like the following:</p> <code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></code> <p>And that you provide a width to the element you wish to center</p> <code>#container { width: 780px; margin: 20px auto; /* auto margins */}</code> <p>Both of the above is the minimun requirement for auto margins</p> <p>AFAIK this works for IE6 and IE7 not sure about other versions.</p> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
phpknight Posted August 7, 2007 Author Share Posted August 7, 2007 I think you are right. I got rid of the two divs and wrote testing. It was centered. Once I removed the DOCTYPE, it was messed up. So, that DOCTYPE appears to be the solution. How did you ever figure that one out? Great call! Quote Link to comment Share on other sites More sharing options...
wildteen88 Posted August 7, 2007 Share Posted August 7, 2007 I think you are right. I got rid of the two divs and wrote testing. It was centered. Once I removed the DOCTYPE, it was messed up. So, that DOCTYPE appears to be the solution. How did you ever figure that one out? Great call! You are supposed to define a valid doctype at the top of every page. Without the doctype the browser will go into quirks mode, the doctype tells the browser what version of html you are using and works in standards mode. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.