आईई

Question

में div चालें मेरे पास दो कॉलम वाली एक तालिका है। बाएं कॉलम में कुछ सामग्री और विजेट div है जो एकमात्र फ़्लोटेड तत्व है। पृष्ठ लोड होने पर यह div तालिका के दाहिने कॉलम को लेकर पृष्ठ के निचले हिस्से में आगे बढ़ता रहता है। कभी-कभी जब मैं कुछ होवर करता हूं तो यह वापस चला जाता है, ऐसा लगता है कि यह पूरी तरह यादृच्छिक है।

आईई पिक-ए-बू बग की तरह लगता है लेकिन काफी नहीं है। मैंने position: relative; की कोशिश की है लेकिन यह काम नहीं करता है। कोई विचार?

यहाँ एचटीएमएल है:

<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> 

और यहाँ तालिका के लिए सीएसएस है:

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

Answer 1

मेरे लिए ठीक काम कर रहा। यदि आप जानते हैं कि divs का उपयोग कैसे करें, टेबल से बचें।

Answer 2

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

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

इस तरह एचटीएमएल आज़माएं, और इनलाइन ब्लॉब के बजाय सीएसएस स्टाइल शीट का उपयोग करें। मानक एक कारण के लिए बने होते हैं। अब तक सभी हालिया ब्राउज़र उन्हें समर्थन देते हैं, क्रैपी मार्कअप और 'बग' की आवश्यकता को समाप्त करते हैं। सामग्री पढ़ने के लिए http://www.abookapart.com/ देखें।