2009-07-01 15 views
11

मैं एक सीएसएस/XHTML टेबल-आधारित कैलेंडर है कि अंततः सरल अद्यतन सामग्री प्रबंधन प्रणाली के लिए PHP के साथ उत्पन्न हो जाएगा के एक प्रोटोटाइप बना रहा हूं सूचियों और IE 6 में तालिकाओं के साथ पूर्ण स्थिति/जेड सूचकांक के साथ परेशानी हो रही है । मैं पूर्ण स्थिति का उपयोग कर एक पॉपअप है कि एक दिन में सभी घटनाओं जब वहाँ एक से अधिक एक सेल में फिट होगा रहे हैं दिखाया जाएगा बनाने के लिए के साथ एक समस्या हुई। समस्या यहाँ देखा जा सकता:और 7

http://sutest.bravehost.com/

आप देख सकते हैं, बहु दिन की घटना है और दोनों IE7 और IE6 में तारीख के तहत पॉपअप पॉप। पॉपअप पर जेड-इंडेक्स डालने से फ़ायरफ़ॉक्स में समस्या ठीक हो गई। मैं पॉपअप पर z- सूचकांक मूल्यों के सभी प्रकार डालने की कोशिश की है, पॉपअप और संबंधित तत्व है, साथ ही कई अन्य विभिन्न तरीकों में से प्रदर्शन संपत्ति को बदलने, कोई सफलता के साथ।

<td valign="top"><div> 
    <div class="date">25</div> 
    <ul> 
     <li class="single"><a href="#">History</a></li> 
     <li class="single"><a href="#">Biology</a></li> 
     <li class="single"><a href="#">Computers</a></li> 
     <li class="single"><a href="#">POTCH</a></li> 
     <li class="single"><a href="#">Precal</a></li> 
     <li class="more"><a href="#">+3 More</a></li> 
    </ul> 
    <div class="popup"> 
     <span class="close"><a href="#">X</a></span> 
     <ul> 
      <li class="single"><a href="#">History</a></li> 
      <li class="single"><a href="#">Biology</a></li> 
      <li class="single"><a href="#">Computers</a></li> 
      <li class="single"><a href="#">POTCH</a></li> 
      <li class="single"><a href="#">Precal</a></li> 
      <li class="single"><a href="#">Science PC</a></li> 
      <li class="single"><a href="#">Physics</a></li> 
      <li class="single"><a href="#">Construction</a></li> 
     </ul> 
    </div> 
</div></td> 

यह हार्ड-कोडेड पॉपअप के साथ मेज से सेल है:

एचटीएमएल इस प्रकार है। पहली सूची में सामान्य, दृश्यमान घटनाएं होती हैं। दूसरा div युक्त div पॉपअप है। यह बहु दिन की घटना से अधिक प्रदर्शित किया जाना चाहिए:

<td valign="top" class="blank"><div> 
    <div class="date">2</div> 
    <ul> 
     <li style="background-color:plum;">&nbsp;<img src="endr.png" alt="." /></li> 
    </ul> 
</div></td> 

मैं सूची आइटम "नकली" बहु दिन की घटना का उपयोग कर रहा हूँ। इस दिन में ली में बार पॉपअप से अधिक रेंडर करने के लिए देखा की धारा होने के लिए स्टाइल है IE 6 और 7

सीएसएस पॉपअप से संबंधित:

.popup { 
position:absolute; 
top:-1px; 
background-color:white; 
border:1px solid black; 
overflow:visible; 
padding:10px; 
width:auto; 
z-index:1; 
margin-left:-1px; 
} 

और इसलिए कई दिनों के लिए घटना:

li { 
margin:2px 0; 
padding:0 0 2px 5px; 
white-space:nowrap; 
} 

मैं गूगल बार बार खोज और अन्य क्यू & एक साइटों कोशिश कर रहा द्वारा इस समस्या को दूर करने के लिए कोशिश की है।

किसी भी मदद की सराहना की जाएगी!

+0

एफवाईआई: यह आईई 8 में भी वही काम करता है ... – SeanJA

उत्तर

22

position: relative का उपयोग आईई में अपेक्षाकृत स्थित तत्व के अंदर एक नया जेड-इंडेक्स स्टैकिंग संदर्भ सेट करता है।

अपेक्षाकृत स्थानित तत्व के अंदर तत्वों को उनके z-index के अनुसार रखा जाएगा, लेकिन मूल तत्व के बाहर तत्वों के साथ बातचीत करते समय, माता-पिता के z-index का उपयोग किया जाता है।यही कारण है कि पॉपअप बहु-दिन इवेंट तत्व से नीचे दिखाता है (भले ही तत्व पर कोई स्पष्ट z-index नहीं है, दस्तावेज़ में "बाद में" आने वाले तत्वों के पास पहले से आने वाले लोगों की तुलना में z-index अधिक है)

इसे ठीक करने के लिए आपको या तो

  • सेल पर position-relative उपयोग नहीं कर सकते और स्थिति पूरे दस्तावेज
  • करने के लिए पॉपअप रिश्तेदार कंटेनर <div> एक उच्च z-index एक बाद में दस्तावेज़ में पर से दे।

मैंने पाया जावास्क्रिप्ट के साथ प्रोग्राम के रूप में z-index बदलते सबसे अच्छा होना करने के लिए है कि, क्योंकि यह (यानी सेट z-index उच्च जब इसे खोला है, और यह वापस रीसेट डिफ़ॉल्ट जब पेज के बाकी के साथ अजीब बातचीत को कम करता है इसे बंद कर दिया जाता है)

कुछ ब्लॉग पोस्ट को इस समस्या के बारे में बात करते हैं:

+0

यह बहुत अच्छा काम किया! महान स्पष्टीकरण के लिए धन्यवाद! –

1

आप युक्त तत्व की z- सूचकांक सेट करने का प्रयास कर सकते हैं। इसलिए, आपके पॉपअप में 1 (या 2) का जेड-इंडेक्स होगा और आपके कंटेनर में 0 (या 1) का z-index होगा।

+0

मुझे यकीन नहीं है कि आपका क्या मतलब है ... मैंने बहु-दिन की घटना के जेड-इंडेक्स को 0 (और कई नकारात्मक मान) पर सेट करने का प्रयास किया, लेकिन इसका कोई फायदा नहीं हुआ, मैं इस तथ्य के कारण मानता हूं कि घटना पूरी तरह से स्थित नहीं है। –

+0

मैं जेड-इंडेक्स का उपयोग करने का भी सुझाव दूंगा जो आपको बाद में अपना दिमाग बदलने और दो परतों के बीच एक और तत्व जोड़ने का मौका देता है, जैसे कुछ: 0, 10, 20 ... – SeanJA

0

सुनिश्चित नहीं हैं कि अगर इस में मदद मिलेगी, लेकिन z- सूचकांक संपत्ति तय वस्तुओं को तैनात कर रहे हैं, रिश्तेदार, पूर्ण पर लागू होता है, http://www.w3schools.com/Css/pr_pos_z-index.asp

संपादित करें: मतलब कि li तत्व पूरी तरह से इसे अनदेखा कर सकते हैं ...

+0

ठीक है। मैं भूल गया था कि जेड-इंडेक्स सिर्फ पूरी तरह से स्थित तत्वों से अधिक पर काम करता है। मैंने बस स्थिति जोड़ने की कोशिश की: रिश्तेदार; और जेड-इंडेक्स: 0; ली चयनकर्ता नियम सेट करने के लिए। अफसोस की बात है, इसने समस्या को ठीक नहीं किया। –

0

आप पॉपअप div पर z- सूचकांक की तुलना में कई दिनों वाली घटना और तारीख तत्वों पर एक कम z- सूचकांक डाल करने की कोशिश की है? साथ ही, सुनिश्चित करें कि जेड-इंडेक्स विशेषता वाले किसी भी तत्व की स्थिति है: पूर्ण (इसलिए लेआउट समस्याओं के साथ थोड़ा सा खेलना पड़ सकता है)।

+0

हां, मैंने अपमानजनक तत्वों को पोजीशन करने और पॉपअप की तुलना में उन्हें कम जेड-इंडेक्स देने की कोशिश की है। काम नहीं कर रहा प्रतीत होता है। = पी –

2

आप इस तरह पीएचपी, .नेट, आदि के रूप में कुछ प्रोग्रामिंग भाषा के साथ इस तालिका बना रहे हैं

आप कुछ इस तरह बना सकते हैं:

गणना अपनी मेज की कुल पंक्तियाँ, तो जेड शुरू इस कुल के साथ इंडेक्स, फिर अंतिम पंक्ति तक काउंटर को कम करें। ऐसा करने से, आपकी पहली पंक्ति में सबसे बड़ी जेड-इंडेक्स और अंतिम पंक्ति ते होगी।

<table> position relative 
<tr> nothing 
<td> nothing 
<div> position relative 
<element position absolute> 
</div> 
</td></tr></table> 

---- 
Table Loop: 

$nZ = count($resource); 
foreach($resource as $line) { 
<tr><td> 
    <div style="z-index: $nZ">content</div> 
</td></tr> 
$nZ--; // Decrement nZ 
} 
---- 

सी या!

संबंधित मुद्दे