[CSS / HTML] P tag in een div met achtergrondkleur

Pagina: 1
Acties:

  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

Topicstarter
Onderstaande code is een test-case voor waar ik mn hoofd op moment even over breek. Zoals te zien is er een paragraaf in een div die de achtergrondkleur rood heeft. Je zou verwachten dat de paragraaf ook de achtergrondkleur rood heeft, echter in FF heeft de (standaard) margin van de p geen achtergrondkleur. In IE gaat dit wel goed.

Kan iemand dit verklaren? of maak ik een stomme denkfout?

Kan het oplossen door bijv:
code:
1
p {margin: 0; padding: 10px 0 10px 0;}

maar daarmee kan ik het nog niet verklaren.

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>blaa</title>
    <style type="text/css">
            #header {
                width: 780px;
                height: 100px;
                background: blue;
            }
            
            #content {
                background: red;
                width: 780px;
            }
        
            #footer {
                width: 780px;
                height: 100px;
                background: blue;
            }
        </style>    
    </head>
<body>
    <div id="footer"></div>
    <div id="content">
        <p>content</p>      
    </div>
    <div id="footer"></div> 
</body>
</html>

[ Voor 13% gewijzigd door Sappie op 11-03-2005 11:01 ]

Specs | Audioscrobbler


  • André
  • Registratie: Maart 2002
  • Laatst online: 06-05 11:13

André

Analytics dude

Op zich heeft FF hier gelijk in aangezien een margin een ruimte is tussen 2 elementen, en daar zou dus ook geen achtergrond bij horen.

  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

Topicstarter
Maar de p bevindt zich in de div, waar dus lijkt me dezelfde achtergrondkleur van toepassing is. Zet ik verder een
code:
1
&nbsp;
oid boven de <p> dan is de achtergrondkleur ook zoals gewild.

[ Voor 7% gewijzigd door Sappie op 11-03-2005 11:26 ]

Specs | Audioscrobbler


  • André
  • Registratie: Maart 2002
  • Laatst online: 06-05 11:13

André

Analytics dude

Sappie schreef op vrijdag 11 maart 2005 @ 11:25:
Maar de p bevindt zich in de div, waar dus lijkt me dezelfde achtergrondkleur van toepassing is. Zet ik verder een
code:
1
&nbsp;
oid boven de <p> dan is de achtergrondkleur ook zoals gewild.
Dan lijkt het er op dat empty elements geen achtergrondkleur krijgen ;)

  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

Topicstarter
André schreef op vrijdag 11 maart 2005 @ 11:32:
Dan lijkt het er op dat empty elements geen achtergrondkleur krijgen ;)
Door de ;) in je reply lijkt het me dat je nix nuttigs bijdraagt (nofi), mocht je echter wel iets nuttigs bijdragen dan snap ik je niet en mag je het ff uitleggen aub :)

Verder doet het 'probleem' zich voor bij alle block elementen met een margin. Lijkt wel of de div de top en bottom-margin 'overerft' ofzo.

Specs | Audioscrobbler


  • André
  • Registratie: Maart 2002
  • Laatst online: 06-05 11:13

André

Analytics dude

Sappie schreef op vrijdag 11 maart 2005 @ 11:45:
[...]

Door de ;) in je reply lijkt het me dat je nix nuttigs bijdraagt (nofi), mocht je echter wel iets nuttigs bijdragen dan snap ik je niet en mag je het ff uitleggen aub :)
Het was zeker wel nuttig bedoeld anders reageerde ik niet. Ik heb het nog even nader bekeken en het lijkt me toch een renderbug want als ik een border van 1px om de div heen zet werkt de achtergrond wel zoals het hoort, ook als ik de div een height geeft.
Verder doet het 'probleem' zich voor bij alle block elementen met een margin. Lijkt wel of de div de top en bottom-margin 'overerft' ofzo.
Van een child zou hij nooit kunnen overerfen maar het lijkt idd of hij het wel doet.

  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

Topicstarter
ok, maar zoals ik al zei nofi :)

Dat van de border had ik ook al opgemerkt idd.. blijft vaag

Specs | Audioscrobbler


  • CrashOne
  • Registratie: Juli 2000
  • Niet online

CrashOne

oOoOoOoOoOoOoOoOoOo

Zoek anders even in debugs van de gecko engine, mocht deze er nog niet instaan, probeer dan te achter halen of het werkelijk een render bug is.

Maak een kleine test case en submit hem op bugzilla.

Huur mij in als freelance SEO consultant!


Verwijderd

Er zijn al genoeg bug reports die nergens op slaan.

  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

Topicstarter
was ook niet van plan een bug report te gaan submitten hoor :)

Had die website over Uncollapsing Margins ook gevonden, maar had em maar vluchtig bekeken en in al mn vluchtigheid niet gezien dat het te maken had met mijn 'probleem'. Ben pas een maandje weer actief bezig met html en alles wat daar mee te maken heeft, dus dan loop je tegen dit soort dingen aan.

Specs | Audioscrobbler

Pagina: 1