Forum Moderators: not2easy
I have a repeating-x background (1px wide / 105px high) on my header wrapper so that it stretches 100% accross my page.
I am creating a fixed width header inside that at 960px and auto margins either side so that it is centred.
This works fine in FF and IE7, however when the browser width is larger than 960px in ie6 my logo shifts to the left.
Anybody have any ideas why this could be happening?
Thanks in advance.
JC
<!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">
<body>
<div id="header_wrapper">
<div id="header">
</div>
<div id="mainlogo"><h2><a href="#"><img src="images/logo.gif" width="247" height="66" /></a></h2>
</div>
</div>
</html>
</body>
body {
background: url(../images/backg.gif) repeat;
margin: 0;
padding: 0px;
font:normal 62.5% verdana, tahoma, Arial, Helvetica, sans-serif;
width:auto;
}
img {
border-style: none;
}
#header_wrapper {
margin: 0;
background: url(../images/header.gif) top repeat-x;
height: 105px;
}
#header {
width:960px;
height:100px;
margin: 0 auto 0 auto;
padding: 0px;
}
#header h2 {
margin: 0px;
padding: 0px;
}
#mainlogo{
width: 247px;
height: 66px;
margin: 0;
padding: 0 10px;
position:relative;
top: 16px;
}
text-align:center
to the 'body' tag.
dc
This one is killing me!
[edited by: Ingenious at 5:40 pm (utc) on Aug. 5, 2008]
Marshall
