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: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>example</title>
    <style>
    #box
    {
        color: orange;
        background: black;
        position: absolute;
        top: 10px;
        left: 10px;
        bottom: 10px;
        right: 10px;
    }
    </style>
  </head>
  <body>
    <div id="box">Pelda</div>
  </body>
</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

#box {
    width: 98%;
    height: 98%;
    top: 1%;
    left: 1%;
    bottom: 1%;
    right: 1%;
}
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:

#box {
    width: expression((this.parentElement.clientWidth-20) + 'px');
    height: expression((this.parentElement.clientHeight-20) + 'px');
}
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:

    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        #box {
            color: orange;
            background: black;
            position: absolute;
            top: 10px;
            left: 10px;
            bottom: 10px;
            right: 10px;
        }
    </style>
    <!--[if IE]>
    <style type="text/css">
        body {
            height: 100%;
        }
        #box {
            width: expression((this.parentElement.clientWidth-20) + 'px');
            height: expression((this.parentElement.clientHeight-20) + 'px');
        }
    </style>
    <![endif]-->
2

Koszonom

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

Kosz megegyszer!