2012-01-11 12 views
6

Ho una tabella con due colonne. La colonna di sinistra ha alcuni contenuti e un widget div che è l'unico elemento flottato. Questo div continua a spostarsi in fondo alla pagina prendendo con sé la colonna destra della tabella quando la pagina viene caricata. A volte si sposta indietro quando aleggia qualcosa, sembra essere completamente casuale.Div sposta in IE

Sembra il bug peek-a-boo di IE ma non del tutto. Ho provato position: relative; ma non funziona. Qualche idea?

Ecco il codice html:

<table class="formTable"> 
    <tr> 
     <td class="content_main"> 
      <h1>header</h1> 
      <table> 
       <tr> 
        <td>Content here</td> 
        <td>Content here</td> 
       </tr> 
      </table> 

      <div style="float: left; clear: none; display: block; color: rgb(68, 68, 68); font-weight: normal; font-family: &quot;Trebuchet MS&quot;,&quot;Verdana&quot;,sans-serif; font-size: 14px; line-height: 18px; text-decoration: none; text-align: left; margin: 0px; padding: 10px; height: auto; width: auto; background-image: none; background-color: white; border: 10px solid rgb(204, 204, 204); overflow: auto;" id="widget"> 
       Content 
      </div> 
     </td> 
     <td class="content_right"> 
      <ul> 
       <li>List</li> 
       <li>List</li> 
      </ul> 
     </td> 
    </tr> 
</table> 

Ed ecco il CSS per la tabella:

.content_right { 
    padding-left: 20px; 
    padding-top: 15px; 
    width: 393px; 
} 
.content_main { 
    padding-top: 15px; 
    width: 500px; 
} 
+0

provare a utilizzare uno script di ripristino css come [yui2 reset] (http://developer.yahoo.com/yui/reset/) –

+0

Impossibile riprodurre .. puoi cambiare [questo violino] (http: // jsfiddle.net/8wytE/) per riprodurre ciò che provi? Forse qualcosa nel contenuto? –

+0

Che tipo di documento stai usando per il tuo esempio? Impossibile riprodurre. – 8bitjunkie

risposta

1

Lavorare bene per me. Se sai come usare le div, evita le tabelle.

0
 <h1>header</h1> 
     <article>Content here</article> 
     <article>Content here</article> 

     <div id="widget"> 
      Content 
     </div> 
     <ul> 
      <li>List</li> 
      <li>List</li> 
     </ul> 

Provare HTML come questo e utilizzare un foglio di stile CSS anziché il BLOB in linea. Gli standard sono fatti per una ragione. Ormai tutti i browser recenti li supportano, eliminando la necessità di markup scadenti e dei "bug" che causano. Vedi http://www.abookapart.com/ per leggere il materiale.

Problemi correlati