|
position a content in my page to center
|
xbl01234
#:3592712
| 9:15 am on Mar. 6, 2008 (utc 0) |
Hello;
i am trying to put a content of my page sit in the center of the my page it doesn't matter what browser is. but i just can do it for firefox, netscap and Opera browser, but i could not do it for IE browser. In the IE browser, my content of the page sit in the left side of the page. My IE file vision is 7.0.6 Could anyone help, thanks. my code as following:
<html>
<head>
<style type="text/css">
#container{
position: relative;
width: 586px; /* width + border for IE 5.x */
w\idth: 580px; /* real width */
border: solid #036;
border-width: 0 3px;
margin: auto;
} </style>
</head>
<body>
<div id="container"> <p>Skip navigation</p> <ul>
<li><a href="">Home</a></li><li><a href="">About</a></li><li><a href="">Contact Us</a></li><li><a href="">Site map</a></li> </ul> The Origin
After getting back from his jaunt, Charles started work on his theory of evolution. Distracted by games of Reversi, Freecell and Solitaire on his computer, he took quite a while but then he heard that some Australian bloke named Wallace had come up with a similar idea so he got a move on to prevent his thunder being stolen. In 1858 Darwin and Wallance presented a joint paper to the Linnean Society of London that sent rumbles across the establishment and really quite upset a lot of people. The next year saw the publication of Darwin's 500-page 'abstract' - 'On The Origin of Species by Means of Natural Selection or the Preservation of Favoured Races In The Struggle For Life' (or OTOOSBMONSOTPOFRITSFL for short). </div> </body>
</html>
|
penders
#:3592798
| 11:45 am on Mar. 6, 2008 (utc 0) |
It looks like you are missing a DOCTYPE declaration as the first line in your HTML file (before the <html> element). Without a DOCTYPE declaration IE6/7 will render the page in quirks mode. In quirks mode IE will not interpret margin:auto correctly and your #container will not be centred. Try putting the following DOCTYPE (in bold) at the start of your document:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> |
|
A side issue... rather than using a hack to target IE5 in your stylesheet, consider using conditional comments instead. Far more robust and future proof.
|
xbl01234
#:3594650
| 12:41 am on Mar. 8, 2008 (utc 0) |
i put it into my code, but it doesn't work. But if i add the following code into css, it works. body{
text-align: center;
}
|
penders
#:3594927
| 11:20 am on Mar. 8, 2008 (utc 0) |
But if i add the following code into css, it works.
body {text-align: center;} |
|
Hhhmmm, that's a bit odd? I tried your original code example with the DOCTYPE above and it was OK. Setting text-align:center on the body will only work in IE5.x and in IE6/7 without the DOCTYPE (ie. in quirks mode)? In fact it is required if you wish to support IE5.x. Also, if you set text-align:center on the body you will also need to set text-align:left on #container in order override the cascade, otherwise everything inside #container will also be centred.
|
xbl01234
#:3595366
| 12:39 am on Mar. 9, 2008 (utc 0) |
Hhhmmm, that's a bit odd? I tried your original code example with the DOCTYPE above and it was OK.
|
|
i am sorry, you were right, that's my IE browser's problem, i missed add-on feature for my IE browser. Thanks for your time.
|
