Newsgroup: it.comp.www.html
Titolo: posizionamento assoluto e bordi

sono giorni che non riesco a venire a capo di un problema:
se ho un box contenitore (relative) dotato di un bordo spesso (diciamo
10 pixel) e, all'interno, un box posizionato assolutamente in
posizione top:0, left:0, il posizionamento e' del tutto differente se
svolto da Opera o da IE.
In IE, il box interno si colloca a coprire il bordo superiore del box
esterno, MA NON quello sinistro.
In Opera invece il box interno copre entrambi i bordi del box
contenitore.
Qualcuno sa far luce su questi comportamenti?
Grazie. Luigi.

 contenitore.
correggetemi se sbaglio ma visti cosě entrambi i comportamenti, IE e Opera
sembrano scorretti...
il box interno non dovrebbe collocarsi sopra i bordi del contenitore
prova questa pagina...
ciao
<------------------------------------------------------------------------------------------->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#container{
position:relative;
border:10px solid red;
background-color:#ccc;
}
#inner{
position:absolute;
top:0px;
left:0px;
background-color:#fff;
}
h3{text-align:right;}
* html #container{height:1%;}
</style>
</head>
<body>
      <div id="container">
        <div id="inner"><p>inner</p></div>
        <h3>container</h3>
        <h3>container</h3>
        <h3>container</h3>
        <h3>container</h3>
        <h3>container</h3>
    </div>
</body>
</html>
<------------------------------------------------------------------------------------------->
testata con Opera 7.54, firefox , IE/win 6

 testata con Opera 7.54, firefox , IE/win 6
Tutto ok Gianni, il funzionamento del tuo esempio e' quello previsto.
Ma vedo che sei stato costretto a collocare un bug fix:
 * html #container{height:1%;} 
E' un bug fix che conosco bene e so che va usato per correggere alcuni
comportamenti anomali di IE, ma non pensavo che servisse anche a
correggere il posizionamento dei box absolute.
Mi spieghi come hai fatto a scoprirlo?
Grazie mille. Luigi.
PS: mi dispiace dirlo ma l'esempio non va sul mio Opera 6.05: il box
inner copre entrambi i bordi dell'angolo. Ciao.

 inner copre entrambi i bordi dell'angolo. Ciao.
ho potuto vedere la pagina con opera 6 e in effetti il box #inner copre
i bordi del container contrariamente alle specifiche del Box Model [1],
------------------------------
 If the element has 'position: absolute', the containing block is
established by the nearest ancestor with a 'position' other than 'static',
in the following way:
  1.. In the case that the ancestor is block-level, the containing block is
formed by the padding edge of the ancestor.
----------------------------
quindi dovrebbe trattarsi di un bug di opera 6, (che infatti è stato
corretto nelle versioni successive).
non ho trovato un hack specifico per quella versione del browser però con
un javascript che 'sniffi' il browser puoi correggere il bug.
non conosco bene il javascript, questo l'ho provato con Opera 6 e
funziona
<------------------------------------------------------------------------------------------>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#container{
position:relative;
border:10px solid red;
background-color:#CCCCCC;
}
#inner{
position:absolute;
top:0px;
left:0px;
background-color:#FFFFFF;
}
h3{text-align:right;}
* html #container{height:1%;}
</style>
<script language="javascript" type="text/javascript">
<!--
function correggiOpera(){
 if
((navigator.appName.indexOf("Opera")!=-1)&&(parseInt(navigator.appVersion)==6)){
   document.getElementById("inner").style.top="10"
   document.getElementById("inner").style.left="10"
   alert("opera 6 detected")
   }
 }
-->
</script>
</head>
<body onload="correggiOpera()">
      <div id="container">
        <div id="inner"><p>inner</p></div>
        <h3>container</h3>
        <h3>container</h3>
        <h3>container</h3>
        <h3>container</h3>
        <h3>container</h3>
</div>
</body>
</html>
<------------------------------------------------------------------------------>
[1] 
http://www.w3.org/TR/CSS2/visudet.html#containing-block-details
--------------------------------
Inviato via 
http://arianna.libero.it/usenet/

 
Grazie Gianni, includero' il bug e la relativa soluzione nel mio
personale "portfolio" di bug fix (che va man mano espandendosi
*sigh*).
Ciao Luigi.