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:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  2.   
  3. <html>  
  4. <head>  
  5.     <title>Untitled</title>  
  6. <style type="text/css">  
  7. .fejlec  
  8. {  
  9.    background: teal;  
  10.    width: 100px;  
  11.    height: 25px;  
  12. }  
  13.   
  14. .tartalom  
  15. {  
  16.    background: url(./hatter.gif);  
  17.    width: 100px;  
  18. }  
  19.   
  20. .valami  
  21. {  
  22.    margin-top: 10px;  
  23. }  
  24.   
  25. </style>  
  26. </head>  
  27.   
  28. <body>  
  29. <div class="fejlec">gfhjghjg</div>  
  30. <div class="tartalom">  
  31. <div class="valami">dfgfdg</div>  
  32. </div>  
  33.   
  34. </body>  
  35. </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.