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 itself:
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');
}