Avatar billede mik789 Nybegynder
24. juli 2004 - 15:11 Der er 11 kommentarer og
1 løsning

margin fylder i det omgivende element!

Jeg har lavet denne demo: http://dev.e-tidsskrift.dk/margin_or_padding.html

Den demonstrerer hvordan padding og margin på en boks påvirker den omgivende boks (her <body>) forskelligt. Lægges der padding til boksen sker der ingen ting med <body>, men lægges der margin til bliver højden af <body> tilsvarende højere. Det sker dog kun i Gecko browserne, ikke i IE. Nu er spørgsmålet: hvilken browser opfatter CSS reglerne rigtigt, Gecko eller IE? Jeg synes ikke lige jeg kan se noget i CSS specifikationen der siger at margin skulle påvirke det omgivende element på denne måde. Hvad siger I?

//mik
Avatar billede roenving Novice
24. juli 2004 - 15:31 #1
Forstår zq sagtens din undren, for jeg erindrer heller ikke at have set noget, som skulle retfærdiggøre denne fortolkning ...

-- men overrasket er jeg ikke !-)

-- og man kunne gætte på, at forklaringen er, at der er fastlagt en højde, som er opgjort til det areal, som er overskydende, så når et element får en større højde bliver den højde i overskud ...

Men det bliver helt sort, når det underliggende element ikke flytter sig, men det har du måske positioneret absolut ?-)
Avatar billede mik789 Nybegynder
24. juli 2004 - 15:37 #2
ja, jeg har positioneret det underliggende element, en <hr>, absolut for at man bedre skal kunne sammenligne positionen af boksen oven over.

Men hvad tror du er "korrekt" CSS? Skal et elements margin-top virkelig forøge hæjden af det omgivende element uden af det padding-top gør det tilsvarende? Det korrekte må vel være at boksen samlet fylder det samme i højden uanset om der er 50px padding-top eller 50px margin-top. Men hvis højden af den omgivende boks er mål for hvor meget dens child-bokse fylder, ja, så fylder de altså forskelligt alt efter om det er margin eller padding vi taler om.
Avatar billede roenving Novice
24. juli 2004 - 15:39 #3
Det lyder som en fejl for mig ...

Men vi må vel tage Geckoens opførsel til efterretning, dog kunne jeg godt tænke mig at se en Mozilla/Mac's og en Safaris resultat !-)
Avatar billede mik789 Nybegynder
24. juli 2004 - 15:42 #4
ja. lad os se om andre på andre maskiner ser det anderledes. Jeg selv har testet i Firefox, Netscape7.1 og IE6
Avatar billede roenving Novice
24. juli 2004 - 15:47 #5
Firefox 0.9 er den samme Gecko som Netscape 7.1 ...

http://www.blooberry.com/indexdot/history/netscape.htm
Avatar billede mik789 Nybegynder
24. juli 2004 - 15:49 #6
roenving 15:31:53 og mig selv 15:37:16> om igen... det underliggende element er den gule boks, og den flytter sig jo uanset om der tillægges padding eller margin. <hr>'en er næst igen på siden og er positioneret absolut så den under alle omstændigheder ligger under boksene oven over.
Avatar billede mik789 Nybegynder
24. juli 2004 - 15:51 #7
jeg har endnu ikke installeret 0.9 af Ildræven - det er så besværligt med at man først skal afinstallere 0.8'eren + alle add ons osv. og derefter starte forfra... Men hvis 0.8'eren har samme Gecko som NS7.1, ja så har jeg jo testet den alligevel ;-)
Avatar billede roenving Novice
24. juli 2004 - 15:52 #8
Nå, ja, ikke 0.9 ...
Avatar billede mik789 Nybegynder
24. juli 2004 - 15:55 #9
jo 0.9, for jeg vrøvler. Jeg mener: hvis _0.9'eren_ har samme Gecko som NS7.1, ja så har jeg jo testet den alligevel (fordi jeg har testet NS7.1 ;-)
Avatar billede mik789 Nybegynder
24. juli 2004 - 16:01 #10
Det skal lige med at grunden til denne test ikke bare er en gang nørdet pixelfedteri. Sagen er, at hvis man (som jeg og mange andre) ofte tilstræber et design der i et maksimeret browservindue ikke genererer nogen lodret scrollbar, så kan netop det her drille gevaldigt. Dokumenthøjden bliver nemlig forskellig i IE i forhold til Geckoerne.
Avatar billede roenving Novice
24. juli 2004 - 16:01 #11
Bruger selv Moz 1.5, som vist har den samme Gecko som 7.1, så de helt nye ildræve har nok en anelse opdateret Gecko ...
Avatar billede mik789 Nybegynder
28. juli 2004 - 23:07 #12
jeg prøver at indberette det som bugzilla. vender tilbage her, når der er et svar.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester