A stubborn fixed DIV inside a 100% DIV
This must be the most frequently occurring issue in my life!
I have to position a fixed DIV (800px) inside a 100% DIV and as always it works fine in everything but IE. I have tried the old "text-align" trick but nothing this time, I just can't get it to work.
If you want to inspect the actual page its www.chunkydesign.com and any answer would be greatly appreciated.
Here is the HTML (CSS Below)
<body>
<div id="navContainer">
<div id="navTopSpacer"></div>
<div id="navMain">
<div id="navContent">
<div id="navLogo"></div>
<div id="navLinks">
<h1>SERVICES ABOUT PORTFOLIO CONTACT</h1>
</div>
</div>
</div>
<div id="navBotSpacer"></div>
</div>
</body>
The devil code i开发者_StackOverflow中文版tself:
body { padding: 0px; margin: 0px; }
navContainer{
width: 100%;
height: 110px;
}
navTopSpacer {
width: 100%;
height: 12px;
background-image: url('../images/core/nav_topspacer.jpg');
}
navMain {
width: 100%;
height: 88px;
background-image: url('../images/core/nav_main.jpg');
}
navContent {
text-align: center;
width: 800px;
height: 88px;
margin-left: auto;
margin-right: auto;
}
navLogo {
float: left;
width: 164px;
height: 88px;
background-image: url('../images/core/logo.png');
background-position: 0px 20px;
background-repeat: no-repeat;
}
navLinks {
float: right;
width: 400px;
height: 88px;
}
navLinks h1 {
font-family: Arial, Verdana, sans-serif;
text-align: right;
font-size: 13px;
color: #FE9900;
font-weight: 600;
padding-top: 40px;
word-spacing: 15px;
letter-spacing: 1px;
margin: 0px;
}
navBotSpacer {
width: 100%;
height: 10px;
background-image: url('../images/core/nav_botspacer.jpg');
}
By leaving a comment above your doctype you're making IE go into quirks mode, which makes rendering a nightmare.
Remove the comment and have NO text, spaces or anything above your doctype declaration.
Try using this markup:
<div id='header'>
<div class='center'>
<div id='logo'><h1><a href='' title=''></a></h1></div>
<ul id='navigation'>
<li>SERVICES</li>
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</div>
</div>
And styling like this:
#header{
background:#cae1e9;
border-top:12px solid #7ebdce;
border-bottom:10px solid #a8d2de;
height:88px;
}
.center{
width:800px;
margin:auto;
}
Then just maybe float logo to the left and float navigation to the right or do whatever you want. But this kind of makup is much easier to understand and maybe see where is the error.
Combine that with the answer Paul gave you and i think that's it.
加载中,请稍侯......
精彩评论