Problema bordi con Firefox

**websky** · 22-01-2008, 18:35

ciao ho realizzato un semplicissimo modello a due livelli di box
box contenitore(pentola) e box piu piccolo all'interno (box).
a scopo didattico (sto imparando)

ecco il css

html, body
{

color:#ffffff;
text-align:center;

background-color:#000000;

}

#box{

/*con explorer si posiziona al centro se non metto posizione, mentre con
mozilla si posiziona sulla sinistra*/

height:100px;
width:100%;
border:4px solid #999ddd;
background-color:#0094d3;
position:relative;

}

#pentola{

height:200px;
width:500px;
border:4px solid #ffff66;
background-color:#6ddf31;
}

e l'html

<html>

<head>

<title>

esercizi sui CSS

</title>

<link rel=stylesheet type="text/css" href="cssbox.css" >

</head>

<body>
<h1>ciao</h1>
<div id="pentola">
<div id="box">
</div>
</div>
</body>

VOLEVO CHIEDERE perché con Firefox il bordo del box piccolo non rientra nel box grande ma deborda, e come fare ad ovviare al problema
grazie
ciao!!!

**fcaldera** · 22-01-2008, 18:45

deborda perchè box piccolo è già alto il 100% del contenitore padre e i bordi vengono aggiunti, quindi la sua altezza complessiva è 100% + 8px di bordo

non è buona regola fissare le altezze ai contenitori a meno di non prevedere un meccanismo di mn-height. Infatti se vi poni del testo all'interno questo verrà tagliato se lo ingrandisci.

**fcaldera** · 22-01-2008, 18:50

analogo discorso per i bordi in orizzontale

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>xhtml 1.0</title>
        
        <style type="text/css">
        html, body {
            color:#ffffff;
            text-align:center;
            background-color:#000000;
        }

        #box{
            height      : 100px;
            border      : 4px solid #999ddd;
            background-color :#0094d3;
        }

        #pentola{
            height      : 200px;
            width       : 500px;
            margin      : 0 auto;
            border      :4px solid #ffff66;
            background-color:#6ddf31;
        }
        </style>
        
    </head>

<body>
    <h1>ciao</h1>
    
        <div id="pentola">
            <div id="box">
            </div>
        </div>
</body>
</html>

* togli width: 100% a box, così prenderà tutto lo spazio orizzontale disponibile senza far uscire i bordi

* metti margin : 0 auto per centrare il box e togli position: relative che non serve

Ciao

Discussione: Problema bordi con Firefox

Strumenti discussione

Ricerca discussione

Visualizza

Problema bordi con Firefox

Permessi di invio