2010-05-19 16 views
5

Katlanabilir bir menü uygulamak istiyorum. Bir menü simüle etmek için tablo bileşenini kullanmayı ve alt menüyü simüle etmek için bir alt tabloyu bir tablo hücresine yerleştirmeyi planlıyorum. Aşağıda Firefox yuvalanmış tabloları düzgün bir şekilde düzenleyemiyor mu?

IE, Chrome ve Safari beklendiği gibi çalıştığını, benim kod, ancak Firefox'ta iyi çalışmıyor:

<html> 
<body> 
<div id="menu" style="position:absolute; left:150px; top:100px; z-index:1"> 
    <table width="200px" height="90" border=1 cellpadding="0" cellspacing="0"> 
    <tr> 
     <td colspan=2>Money</td> 
    </tr> 
    <tr> 
     <td colspan=2>Tool</td> 
    </tr> 
    <tr> 
     <td>Food 
     <table style="position:absolute; left:200px; top:60px; z-index:1" width="200px" height="60px" border="1" cellpadding="0" cellspacing="0"> 
      <tr> 
      <td>Cookie</td> 
      </tr> 
      <tr> 
      <td>Fruit 
       <table style="position:absolute; left:200px; top:30px; z-index:1" width="200px" height="60px" border="1" cellpadding="0" cellspacing="0"> 
       <tr> 
        <td>Apple</td> 
       </tr> 
       <tr> 
        <td>Banana</td> 
       </tr> 
       </table> 
      </td> 
      </tr> 
     </table> 
     </td> 
    </tr> 
    </table> 
</div> 
</body> 
</html> 

O Firefox "sol" ve "top" düşünmek gibi görünüyor seviye 3 menüsünün özniteliği, seviye 1 menüsüne göredir, bu nedenle seviye 3 menüsünü yanlış düzenler. Diğer tarayıcılar, beklendiği gibi çalışan seviye 2 menüsündeki ofset tabanını hesaplayacaktır.

Firefox'ta bir hata mı? Eğer öyleyse nasıl çalışırım? Kodumun tüm önemli tarayıcılarda aynı davranışı olmasını istiyorum.

+2

Oh çocuk. Bir süredir masaların çoğunu gördüğüm bir süre oldu :) :) SO'ya hoş geldiniz. –

+0

FWIW, bence bu 'td'' pozisyonunu vermek zorunda kalacaksınız: akraba' bunun işe yaramasına neden olacak ama bu başka problemlere de neden olacak. Bence bunu çok daha basit bir yapıyla yapmalısın. Şimdi gitmeliyim ama eminim ki birisi bir öneriyle gelecek. –

+0

@ooplidi, @Pekka ile aynı fikirdeyim - Relative'i kullanırsanız daha fazla sorunla karşılaşacaksınız, fakat bu aynı zamanda bunu yapmanın daha iyi bir yoludur. Bu gerçekten masalarda olmak zorunda mı? –

cevap

4

div 'ler içinde Paketleme tabloları sorunu çözmek için görünüyor:

<html> 
<body> 
<div id="menu" style="position:absolute; left:150px; top:100px; z-index:1"> 
    <table width="200px" height="90" border=1 cellpadding="0" cellspacing="0"> 
    <tr> 
     <td colspan=2>Money</td> 
    </tr> 
    <tr> 
     <td colspan=2>Tool</td> 
    </tr> 
    <tr> 
     <td>Food 
     <div style="position:absolute; left:200px; top:60px; z-index:1"> 
     <table width="200px" height="60px" border="1" cellpadding="0" cellspacing="0"> 
      <tr> 
      <td>Cookie</td> 
      </tr> 
      <tr> 
      <td>Fruit 
       <div style="position:absolute; left:200px; top:30px; z-index:1;"> 
       <table width="200px" height="60px" border="1" cellpadding="0" cellspacing="0"> 
       <tr> 
        <td>Apple</td> 
       </tr> 
       <tr> 
        <td>Banana</td> 
       </tr> 
       </table> 
       </div> 
      </td> 
      </tr> 
     </table> 
     <div> 
     </td> 
    </tr> 
    </table> 
</div> 
</body> 
</html> 

Aslında bu hiç tabloları kullanmak daha iyi olacak, ama sadece uygun sınırları div'leri.

+0

Son cümlede @kgiannakakis^_^ –

+0

+1 ile "Tablo Yok" politikasını ikinciye gönderin. Tablolar, düzenler için kullanılmamalıdır. –

İlgili konular