Hi, the page i'm making is on http://www.soulwatcher.be/wensput/licht.htm Everything works fine in FF, IE6, but not in IE7. I have a table in the beginning with 2 columns and 2 pictures in respective column. Then there are 2 div's : one for the menu and one for the content. I want the 1 logo and the menu to be position:fixed But in IE7 the menu is shown over the content The only thing i found on the net is a report of this problem, but no solution. Anyone and idea ? rgrds, b
The code : css body { color: #FFFFFF; text-align: center; background-color: #000000; } #container { margin: 0 auto; width: 900px; text-align: left; font-size: 100%; line-height: 1.3em; } .tableMenu { /*position:fixed; */float: left; display:inline; left:0px; text-align: left; } .logo { /*position:fixed;*/ top:5px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; } .subLogo { border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; /*position:fixed;*/ top:5px; } .tableInhoud { margin-left: 175px; } Code (markup): html : <body> <div id="container"> <table width="800" border="0" cellspacing="0" cellpadding="0"> <tr> <td><a href="../index.html"><img src="../images/wensput-logo.jpg" alt="Wensput - logo" width="172" height="68" class="logo"/></a><a name="bovenkant" id="bovenkant"></a></td> <td><!-- TemplateBeginEditable name="titel-logo" --><img src="../images/verlichting-titel.jpg" width="300" height="68" class="subLogo" /><!-- TemplateEndEditable --></td> </tr> </table> <div id="menu"> <table width="100" border="0" cellpadding="0" cellspacing="0" class="tableMenu"> <tr> <td><a href="../index.html" class="aMenu">Home</a></td> </tr> <tr> <td><a href="../keuken.html" class="aMenu">Keukens</a></td> </tr> <tr> <td><a href="../sfeer.html" class="aMenu">Sfeerbeelden</a></td> </tr> <tr> <td><a href="../deco.html" class="aMenu">Decoratie</a></td> </tr> <tr> <td><a href="../licht.html" class="aMenu">Verlichting</a></td> </tr> <tr> <td><a href="../info.html" class="aMenu">Info</a></td> </tr> <tr> <td><a href="mailto:Jimmy.Put@telenet.be" class="aMenu">Email ons</a></td> </tr> </table> </div> <div class="tableInhoud"> <!-- TemplateBeginEditable name="Afbeeldingen-tabel" --> <table border="1" cellpadding="0" cellspacing="0" width="600"> <tbody> <tr> <td width="173" title="licht1"><div align="center"><a href="../images/big/licht1.jpg" rel="lightbox[lichten]"><img src="../images/small/licht1.jpg" width="173" height="130" border="0" /></a></div></td> <td width="173" title="licht2"><div align="center"><a href="../images/big/licht2.jpg" rel="lightbox[lichten]"><img src="../images/small/licht2.jpg" width="173" height="130" border="0" /></a></div></td> <td width="173" title="licht3"><div align="center"><a href="../images/big/licht3.jpg" rel="lightbox[lichten]"><img src="../images/small/licht3.jpg" width="173" height="130" border="0" /></a></div></td> <td width="173" title="licht4"><div align="center"><a href="../images/big/licht4.jpg" rel="lightbox[lichten]"><img src="../images/small/licht4.jpg" width="173" height="130" border="0" /></a></div></td> </tr> <tr> <td width="25%" title="licht5"><div align="center"><a href="../images/big/licht5.jpg" rel="lightbox[lichten]"><img src="../images/small/licht5.jpg" width="173" height="130" border="0" /></a></div></td> <td title="licht6" width="25%"><div align="center"><a href="../images/big/licht6.jpg" rel="lightbox[lichten]"><img src="../images/small/licht6.jpg" width="173" height="130" border="0" /></a></div></td> <td title="licht7" width="25%"><div align="center"><a href="../images/big/licht7.jpg" rel="lightbox[lichten]"><img src="../images/small/licht7.jpg" width="173" height="130" border="0" /></a></div></td> <td title="licht8" width="25%"><div align="center"><a href="../images/big/licht8.jpg" rel="lightbox[lichten]"><img src="../images/small/licht8.jpg" width="173" height="130" border="0" /></a></div></td> </tr> </tbody> </table> <!-- TemplateEndEditable --></div> </div> </body> Code (markup):
finally found a solution : top:5px; top: expression(eval(document.body.scrollTop)+5); for all fixed items grtz, b
Hi Is better if you produce your HTML / CSS using tableless designs rather than tables. This works better in IE 5,6 and 7. Hope it helps