I have a problem which is basic I hope. I'm trying some javascript to substitute a SWF for a PNG if Flash isn't present. Whenever the <script> code is present in the HTML, the div below gets nudged out the way. Both the image and the swf are the same proportions so I'm hoping that it's a weird thing that isn't obvious.
This doesn't happen in FFox3.0, but does in IE7.
The "mainnav" div should sit inside the "header" div, but in IE7 it gets pushed to the side, seemingly outside the div. Is there something else I should be catering for in IE7 to fix this?
Relevant CSS is
This doesn't happen in FFox3.0, but does in IE7.
Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Home</title>
<style type="text/css">
@import url(_css/main.css);
</style>
</head>
<body class="area_home">
<div class="centredbody">
<div class="header">
<script type="text/javascript" src="_swf/flashdetect.js"></script>
<noscript>
<img src="_swf/bg_header.png" width="807" height="213" alt="UK Map" />
</noscript>
<div class="mainnav">
<ul>
<li><a href="ethos.html" class="ethos">channel ethos</a></li>
<li><a href="how.html" class="how">how does it work?</a></li>
<li><a href="partners.html" class="partners">partners</a></li>
<li><a href="media.html" class="media">media</a></li>
<li><a href="showreel.html" class="showreel">showreel</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>The "mainnav" div should sit inside the "header" div, but in IE7 it gets pushed to the side, seemingly outside the div. Is there something else I should be catering for in IE7 to fix this?
Relevant CSS is
Code:
.centredbody {
width:808px;
height:auto;
margin:0 auto;
padding:0 30px 0px 30px;
}
.header {
position:relative;
height:257px;
}
.header img {
position:absolute;
left:73px;
top:49px;
display:block;
}
.mainnav {
position:absolute;
height:90px;
width:808px;
top:167px;
float:left;
background:url(../_img/bg_mainnav_large.png) no-repeat;
overflow:hidden;
}