ugrás a tartalomhoz

Negatív margin - ie-ben nem látszik a tartalom

Totti 1986 · 2010. Dec. 2. (Cs), 10.34
Sziasztok!

Lehet, hogy amatőr kérdés lesz, de Google-ban hiába találtam megoldást, nálam nem működött.

A következő kialakítást szeretném én is elérni: (http://www.brunildo.org/test/relayout.html), de nekem sehogy se megy. Szóval van egy div-em, amibe beleteszek egy másikat, és a 2. divet -150px-lel balra akarom kezdeni. FF-ben minden oké, de ie6, ie7 nem jeleníti meg a 2. divemet, mintha elbújna a bal oldalon. ie8 meg nem alkalmazza a css-t (opacity/filter:alpha) a 2. div-re, amit az 1. divhez beállítottam.

Előre is köszi a segítséget!
 
1

Kód?

Poetro · 2010. Dec. 2. (Cs), 13.40
Valamiféle kód nélkül nem igazán lehet segíteni. Mivel nem tudjuk mit próbáltál, nem látjuk a kódot, ami nem működik, így nem is tudunk kísérletezni azzal, hogyan lehetne megjavítani. Esetleg hasznos tud lenni, ha adsz neki magasságot, mondjuk
  1. min-height1%;  
vagy
  1. overflowhidden;  
vagy bármi más, amitől a hasLayout móka bekapcsol.
2

igaz...

Totti 1986 · 2010. Dec. 2. (Cs), 14.41
Kicsit félve írtam a kérdést, mert azt hittem, ez már egy lerágott csont, csak én vagyok béna, hogy nem találok rá megoldást. Ezért nem is írtam kódot, de most egy leegyszerűsített kódot beteszek.
  1. <div class="panel2">  
  2.     <div id="switch_panel2" class="switch_panel2">  
  3.     </div><!-- /switch_panel2 -->  
  4. </div><!-- /panel2 -->  
  1. .panel2 /*right top*/ {  
  2.     position:fixed;  
  3.     top:200px;  
  4.     right:0;  
  5.     width:30px;  
  6.     height:100px;  
  7.     background-color:#000;  
  8.     opacity:0.4;  
  9.     filter:alpha(opacity=40);  
  10. }  
  11.   
  12. * html .panel2 /* IE6 position fixed right */{  
  13.     position:absolute;  
  14.     right:auto;  
  15.     left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)  
  16.     -(parseInt(this.currentStyle.marginRight,10)||0));  
  17. }  
  18.   
  19. .switch_panel2 {  
  20.     position:absolute;  
  21.     /*display:none;*/  
  22.     width:150px;  
  23.     height:100px;  
  24.     margin:0 0 0 -150px;  
  25.     background-color:#ff0000;  
  26. }  
Ez csak a váz, csak azt tartalmazza, ami a kérdéshez szükséges. Amúgy a "panel" diven gombok vannak, amik megnyitják a "switch_panel"-t, a gombnak megfelelő tartalommal.

Na most a "switch_panel" ie6,ie7-ben nem látszik, ie8-ban pedig nem kapja meg a "panel" opacity-jét.
3

Opacity

Poetro · 2010. Dec. 2. (Cs), 15.48
A dobozok látszódnak ha nem raksz rájuk filtert.
  1. <!DOCTYPE HTML>  
  2. <html lang="en-US">  
  3. <head>  
  4.   <meta charset="UTF-8">  
  5.   <title></title>  
  6.   <style type="text/css">  
  7. .panel2 /*right top*/ {  
  8.     position:fixed;  
  9.     top:200px;  
  10.     right:0;  
  11.     width:30px;  
  12.     height:100px;  
  13.     background-color:#000;  
  14. }  
  15.   
  16. * html .panel2 /* IE6 position fixed right */{  
  17.     position:absolute;  
  18.     right:auto;  
  19.     left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)  
  20.     -(parseInt(this.currentStyle.marginRight,10)||0));  
  21. }  
  22.   
  23. .switch_panel2 {  
  24.     position:absolute;  
  25.     /*display:none;*/  
  26.     width:150px;  
  27.     height:100px;  
  28.     margin:0 0 0 -150px;  
  29.     background-color:#ff0000;  
  30. }  
  31.   </style>  
  32. </head>  
  33. <body>  
  34.   <div class="panel2">  
  35.     <div id="switch_panel2" class="switch_panel2">  
  36.     </div><!-- /switch_panel2 -->  
  37.   </div><!-- /panel2 -->  
  38. </body>  
  39. </html>  
Ezt teljesen jól működik. IE6-7-ben nem igazán szerencsés átlátszóságot használni, mivel általában csak a gondok vannak vele, ráadásul nem is ugyanúgy működik mint IE8 esetében.
4

tényleg

Totti 1986 · 2010. Dec. 2. (Cs), 19.14
Na most így tényleg jó.
Tehát opacity-t ne is használjak ie miatt? Az eléggé bekorlátozza ezt a panelemet. Átalakítom úgy, hogy ie-ben ne is legyen opacity. Túlélem, de akkor erre reális megoldás nincs is?