ugrás a tartalomhoz

Margó mögött eltűnik a háttér Firefoxban

Anonymous · 2005. Aug. 17. (Sze), 14.58
Helló!

A problémám tárgyát képező kód:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
	<title>Untitled</title>
<style type="text/css">
.fejlec
{
   background: teal;
   width: 100px;
   height: 25px;
}

.tartalom
{
   background: url(./hatter.gif);
   width: 100px;
}

.valami
{
   margin-top: 10px;
}

</style>
</head>

<body>
<div class="fejlec">gfhjghjg</div>
<div class="tartalom">
<div class="valami">dfgfdg</div>
</div>

</body>
</html>
Látható, hogy a tartalom divnek van egy háttere, a hatter.gif. A tartalomban van még egy div, ami a tartalom tetejétől 10 pixelre van. A gond csak az, hogy firefoxban, azon a 10 pixelen eltűnik a háttér. De miért? Számomra logikus lenne, hogy ott is legyen...
‹ XHTML 1.1 strict es az ismap Inputmező értékek összegzése JavaScriptben ›
 ■
1

cím, kód javítva

Hojtsy Gábor · 2005. Aug. 17. (Sze), 15.37
A kódot colorer elemek közé tettem, hogy aki segíteni tud, az jobban el tudja olvasni a dolgokat. A címet okosítottam, a mentegetőzést kivettem :)
2

Box model

Poetro · 2005. Aug. 17. (Sze), 15.47
Helyesen működik a Firefox a Box model szerint. Ha azt szeretnéd, hogy a háttérkép felül is megjelenjen, akkor margin helyett padding-ot használj.
--------
Poetro
3

Egymásba ágyazott margók

Jano · 2005. Aug. 17. (Sze), 16.02
Azért "tűnik el" mert a belső elem margóját nem a befoglaló elem szélétől számolja hanem a belső elem margója "kicsuszik" a külső elemen kívülre.

Ez azért működik így, hogy pl ha egy DIV-vel körbeveszel bekezdéseket akkor ne nőjjön duplájára közöttük a távolság!

A megoldás általános esetben, hogy elkerüld a 2 margó (div 0 magasságú margója és a belső elem 10px-es) találkozását. Pl a tartalom elemnek paddingot vagy bordert adsz.

Nálad konkrétan a tartalomnak ajánlott felső paddingot adni.