HTML Page alignment problem in IE (when used without DTD validator)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<body>
<div id="container">
<div id="menu">
<ul>
<li><a >page1</a></li>
<li><a >page2</a></li>
<li><a >page3</a></li>
</ul>
</div>
</div>
</body>
</html>
and here is my css
<style>
#menu {
margin: 0px 10px 10px 10px;
overflow: hidden;
font-size: 13px;
font-weight: bold;
}
#menu ul {
margin: 0;
padding: 0;
}
#menu ul li {
margin: 0px 2px;
display: inline;
vertical-align: middle;
text-align: center;
}
#container {
width: 785px;
margin: 0 auto;
background-color: #fff;
paddi开发者_如何学JAVAng-top: 6px;
padding-bottom: 10px;
}
</style>
I want the menu should be in the middle of the page ..
But in IE if I remove the DTD validator its always on to the left c..can anyone help me .. I want a solution without dtd validator
See my comment:
"But in IE if I remove the DTD validator its always on to the left" - solution: don't remove the
doctype.Why do you want to remove it?
You should not remove the doctype, unless you have no other choice.
If there is really no way around it (for example you're working with a large legacy site which uses no doctype - however that doesn't seem likely in this case), you can center it in IE Quirks Mode by adding this CSS:
body {
text-align: center
}
#container {
text-align: left
}
Why do you want to remove the DTD declaration? It is necessary for your page to be classified into one of the valid formats. If you don't have this declaration, your browser normally resorts to quirks mode which is not really standards compliant.
Don't forget to take a look at W3C Markup Validator
best thing to do would be to give the menu some width, then set the margins to auto:
#menu {
width: 200px;
margin:auto auto;
}
Check it out here: http://jsfiddle.net/mrSmG/
Not having a DTD results in browsers reverting to 'quirks mode' - doing this causes them to use the quirky implementations of their older versions which can vary a lot. Using (a correct) DTD results in 'standards mode' which gives you maximum consistency between browsers.
The problem here is not the DTD, it is the CSS.
Use the same method of centring your menu that you are using for the container: set a width and have the left and right margins set to 'auto':
<style>
#menu { margin:0 auto ; width:500px ; }
</style>
This is standards-based and well supported.
加载中,请稍侯......
精彩评论