Avatar billede tjacob Juniormester
12. maj 2007 - 13:56 Der er 8 kommentarer og
1 løsning

100% dimensioner på div -XHTML/CSS

Jeg er sikker på at dette har været oppe før, men jeg synes ikke rigtigt jeg kan finde noget brugbart via 'søg'.

Hvis jeg i CSS forsøger at lave en div 100% bred, f.eks. sådan:

#gradtube
{
position:absolute;
top:250px;
width:100%;
height:50px;
background-image:url(tubegrad1.png);
background-repeat:repeat
}

så kommer der et hul på 10 pixels til venstre, og en scrollbar pga. at siden bliver 10 pixels bredere.

Jeg har fundet en løsning: Jeg kan sætte left:0px, eller jeg kan i body sætte margin:0.

Mit spørgsmål er: hvorfor?
Jeg HAR kunnet læse mig til at det er noget med at størrelsen beregnes med border, padding og margin.

Men jeg har overhovedet ingen værdier på disse størrelser i min HTML (eller CSS)! Har disse størrelser en default værdi fra starten?

PS Jeg kører IE 7.
Avatar billede mstorgaard Praktikant
12. maj 2007 - 15:28 #1
Så vidt jeg ved har body en margin på 10 pixels, hvilket du bør kunne løse med
body
{
margin:0;
}
Avatar billede tjacob Juniormester
12. maj 2007 - 16:10 #2
Ja, det løser problemet (som jeg nævnte i spm).

Men efter yderligere research på Google er jeg totalt forvirret:

IE6 har default 15px margin på top/bottom og 10px på left/right
IE7 og Netscape og Firefox har 8px margin??? hele vejen rundt. (er der så også noget padding og/eller border?)
Opera har 0 på margin, men en padding på 8px.
Nogle af disse oplysninger er uden tvivl forældede, men alligevel:

HVAD FANDEN ER DET FOR NOGET ROD???

Er der en ekspert der kan fortælle mig (links er OK) hvad default værdien er for henholdsvis border, padding og margin i følgende browsere: IE6, IE7, Firefox og Opera?
-Points kan sættes op.
Avatar billede mclemens Nybegynder
12. maj 2007 - 17:14 #3
Der er ingen standard på det område,
derfor nulstiller en hel del med f.eks.:
html,body {margin:0;padding:0;}

... og så kan du jo kaste en margin på
body {} bagefter eller du kan sige:
html {margin:0;padding:0;}
body {margin:10px;padding:0;}

... Det samme problem eksisterer
med bl.a. p, h1-7, ul elementer ...
(sikkert også flere, men jeg bruger
ikke mange forskellige elementer selv)
Avatar billede tjacob Juniormester
12. maj 2007 - 17:47 #4
OK, mclemens -den havde jeg regnet ud (altså nulstille, -det ser ud til at listen skal udvides til html,body,p,span,div -det er omtrent de elementer jeg bruger).

Jeg er alligevel overrasket over at så fundamentale elementers basale attributters default værdier er så forskellige i diverse browsere.

Vil du og mstorgaard smide et svar..........
Avatar billede mclemens Nybegynder
12. maj 2007 - 18:13 #5
Springer over point her, så kast til mstorgaard ;)
Span og div elementer har jeg aldrig haft problemer med.
Avatar billede mstorgaard Praktikant
12. maj 2007 - 18:16 #6
Svar (:
Avatar billede roenving Novice
12. maj 2007 - 23:18 #7
span er et inline-element,så det har ingen margener eller paddings ...

-- og som det antydes med dette, så er det kun block-level-elementer (f.eks. de, som mclemens omtaler 17:14:51 !-), du kan støde ind problemet med, og da der ikke er en egentlig standard for deres rendering, er det nødvendigt selv at skabe denne for dokumentet, f.eks. kan du hente et default stylesheet fra http://w3c.com !o]

-- det betyder desværre ikke, at du kan undlade ovenstående 'nulstillinger' ...
Avatar billede tjacob Juniormester
13. maj 2007 - 08:26 #8
OK, I skal alle have tak for hjælpen.
Avatar billede olebole Juniormester
14. maj 2007 - 15:10 #9
<ole>

span og andre inline-elementer har ikke _vertikal_ margin/padding  ;o)

/mvh
</bole>
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