float problem in IE7

Discussion in 'CSS' started by banshee007, Nov 3, 2008.

  1. #1
    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
     
    banshee007, Nov 3, 2008 IP
  2. banshee007

    banshee007 Guest

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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):
     
    banshee007, Nov 3, 2008 IP
  3. banshee007

    banshee007 Guest

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    finally found a solution :

    top:5px;
    top: expression(eval(document.body.scrollTop)+5);

    for all fixed items

    grtz,

    b
     
    banshee007, Nov 3, 2008 IP
  4. mypsdtohtml

    mypsdtohtml Guest

    Messages:
    96
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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
     
    mypsdtohtml, Nov 3, 2008 IP
  5. banshee007

    banshee007 Guest

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Ok, thx !

    grtz,

    b
     
    banshee007, Nov 4, 2008 IP