ugrás a tartalomhoz

XHTML-CSS absoulte pozicionalas problema IE6 alatt.

Barkóczi Roland · 2007. Feb. 9. (P), 10.49
Egy latszolag nagyon egyszeru dolgot akartam megcsinalni, de IE6 alatt nem mukodik. Probaltam kigooglezni, de nem talaltam ra semmit. Ime a kod:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html>  
  3.   <head>  
  4.     <title>example</title>  
  5.     <style>  
  6.     #box  
  7.     {  
  8.         color: orange;  
  9.         background: black;  
  10.         position: absolute;  
  11.         top: 10px;  
  12.         left: 10px;  
  13.         bottom: 10px;  
  14.         right: 10px;  
  15.     }  
  16.     </style>  
  17.   </head>  
  18.   <body>  
  19.     <div id="box">Pelda</div>  
  20.   </body>  
  21. </html>  
FF alatt tokeletesen jelenik meg, de az IE6 csak a top es a left tulajdonsagokat veszi figyelembe. Hogy lehetne ezt megoldani?
‹ Nem valid a formom, és nem ismerek más eljárást. IEben látszó div Firefoxban nem ›
 ■
1

pár ötlet

gex · 2007. Feb. 9. (P), 11.23
ha a szélességet megadod, akkor már elkezd nyúlni a div, csak ugye nem lehet tudni milyen méretű a böngésző. ennek kiküszöbölésére vagy térj át százalékokra
  1. #box {  
  2.     width: 98%;  
  3.     height: 98%;  
  4.     top: 1%;  
  5.     left: 1%;  
  6.     bottom: 1%;  
  7.     right: 1%;  
  8. }  
ami nem lesz olyan szép a szélesség-magasság arány miatt (mondjuk ha a szélesség 99%, akkor közel tökéletes), vagy legrosszabb esetben ie conditional commentsbe rakhatsz egy ilyet:
  1. #box {  
  2.     width: expression((this.parentElement.clientWidth-20) + 'px');  
  3.     height: expression((this.parentElement.clientHeight-20) + 'px');  
  4. }  
ezek mellett (tehát mindkettőnél) már csak arra kell figyelni, hogy ie-ben meg kell nyújtani a body-t is 100% magasra.

nekem így működik ie6, ff2, opera9 alatt is jól:
  1. <style type="text/css">  
  2.     body {  
  3.         margin: 0;  
  4.         padding: 0;  
  5.     }  
  6.     #box {  
  7.         color: orange;  
  8.         background: black;  
  9.         position: absolute;  
  10.         top: 10px;  
  11.         left: 10px;  
  12.         bottom: 10px;  
  13.         right: 10px;  
  14.     }  
  15. </style>  
  16. <!--[if IE]>  
  17. <style type="text/css">  
  18.     body {  
  19.         height: 100%;  
  20.     }  
  21.     #box {  
  22.         width: expression((this.parentElement.clientWidth-20) + 'px');  
  23.         height: expression((this.parentElement.clientHeight-20) + 'px');  
  24.     }  
  25. </style>  
  26. <![endif]-->  
2

Koszonom

Barkóczi Roland · 2007. Feb. 9. (P), 15.52
Kosz a segitseget, az utolsokent irt megoldast fogom hasznalni.

Kosz megegyszer!