margin-top:0; is niet bovenaan pagina (Firefox) - Softwareontwikkeling

woensdag 31 augustus 2005 03:43

Acties:

Verwijderd

Topicstarter

Deze w3c goedgekeurde pagina welke verwijst naar de onderstaande CSS heeft iets raars:

code:

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

<head>
<meta http-equiv="Content-Language" content="nl">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>testmargin</title>
<meta name="description" content="blabla">
<meta name="keywords" content="blatieflatie">
<link rel="stylesheet" type="text/css" href="stijl.css">
</head>

<body>

<p>ik gaan naar school</p>

</body>

</html>

CSS:

code:

BODY {
margin-top:0;
margin-bottom:0;
margin-left:0;
margin-right:0
}

Als ik 'm in Firefox bekijk dan is de bovenmarge niet 0, het lijkt een regel naar beneden ofzo. Komt dit door Firefox dat die niet helmaal bovenaan wil uitlijnen of ligt dat aan iets anders?

EDIT: het valt me op als ik die doctype weglaat dat die dan wel, ook in Firefox, helemaal bovenaan wordt uitgelijnd. Dus die doctype wordt in Firefox anders geinterpreteerd???

woensdag 31 augustus 2005 05:02

Acties:

MueR

Admin Devschuur® & Discord

is niet lief

Heeft een <p> niet meestal allerlei margins boven en onder? Probeer anders ook de padding eens op 0 in te stellen

[ Voor 36% gewijzigd door MueR op 31-08-2005 05:02 ]

Anyone who gets in between me and my morning coffee should be insecure.

woensdag 31 augustus 2005 05:36

Acties:

mimic

O ja joh?

code:

body
{
margin: 0px;
padding: 0px; /* Hoewel je deze waarschijnlijk niet nodig hebt. */
}

p
{
margin: 0px;
}

[ Voor 65% gewijzigd door mimic op 31-08-2005 05:39 ]

woensdag 31 augustus 2005 08:45

Acties:

Verwijderd

de html tag heeft in firefox ook bepaalde marges.
De volgende code zou dit moeten verhelpen.

code:

html, body
{
   margin: 0px;
}

woensdag 31 augustus 2005 09:23

Acties:

wizzkizz

smile...tomorrow will be worse

volgens mij heb je je css niet laten controleren door w3c, doe dat voor de grap eens en je zult zien dat je ipv alleen een 0-waarde officieel 0px moet doen.

Verder zou ik je case (BODY en body) in zowel je CSS en je HTML gelijk houden, dat scheelt ook wel eens (ok, mn bij id's en classes, maar is een goede gewoonte).

afaik heeft HTML geen margins oid, ik geef dit nooooit op en krijg mn pagina's (indien gewenst) toch echt helemaal strak tegen het bovenkantje

edit:

oh ja, je kunt ook proberen om de strict-doctype in te stellen, zo te zien voldoet je pagina daar wel aan. eens kijken of dat uitmaakt

[ Voor 16% gewijzigd door wizzkizz op 31-08-2005 09:24 . Reden: toevoeginkje ]

Make it idiot proof and someone will make a better idiot.
Real programmers don't document. If it was hard to write, it should be hard to understand.

woensdag 31 augustus 2005 09:30

Acties:

Zoefff

❤ 

Nul wat? Nul eieren? Nul appels? Oh, nul pixels! Maak er dus even "margin-top:0px;" van.

Het kan overigens ook komen door het p element, dat heeft ook een bepaalde topmarge die standaard niet op 0 staat.

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

woensdag 31 augustus 2005 09:36

Acties:

thomaske

» » » » » »

Zoefff schreef op woensdag 31 augustus 2005 @ 09:30:
Nul wat? Nul eieren? Nul appels? Oh, nul pixels! Maak er dus even "margin-top:0px;" van.

Maakt het jou iets uit of ik jou nul eieren geef of nul appels? Resultaat blijft hetzelfde: je hebt niks.

Brusselmans: "Continuïteit bestaat niet, tenzij in zinloze vorm. Iets wat continu is, is obsessief, dus ziekelijk, dus oninteressant, dus zinloos."

woensdag 31 augustus 2005 09:41

Acties:

Zoefff

❤ 

thomaske schreef op woensdag 31 augustus 2005 @ 09:36:
[...]

Maakt het jou iets uit of ik jou nul eieren geef of nul appels? Resultaat blijft hetzelfde: je hebt niks.

Gelukkig staan we hier niet op de markt, maar zijn we bezig met CSS. En daar hebben we afgesproken dat we gewoon netjes een eenheid achter een waarde zetten

Ik weet overigens wel vrij zeker dat het met de marge van het p element te maken heeft, heb er zelf ook wel eens last van gehad.

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

woensdag 31 augustus 2005 09:41

Acties:

Bosmonster

*zucht*

Zoefff schreef op woensdag 31 augustus 2005 @ 09:30:
Nul wat? Nul eieren? Nul appels? Oh, nul pixels! Maak er dus even "margin-top:0px;" van.

Het kan overigens ook komen door het p element, dat heeft ook een bepaalde topmarge die standaard niet op 0 staat.

Laat 0 nou inderdaad de enige uitzondering zijn op die regel

0px=0%=0em=0....

edit: spuit 11

Marges van een p op 0 zetten lijkt me niet zo goed plan overigens, daarmee haal je heel het idee van de p-tag onderuit. Als je dan al wat aanpast, zet dan alleen de top-margin op 0.

[ Voor 24% gewijzigd door Bosmonster op 31-08-2005 09:46 ]

woensdag 31 augustus 2005 09:52

Acties:

Zoefff

❤ 

Joah, dat bedoel ik.

Doe altijd iets van "#content p:first-child { margin-top:0px; }"

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

woensdag 31 augustus 2005 10:26

Acties:

Sappie

De Parasitaire Capaciteit!

dit heet dus margin collapsing..

verder 0 = 0 maakt niet uit of het px of appels zijn. "px" hoeft er echt niet achter

edit:
ook niet verder gelezen dan mn neus lang is..

[ Voor 25% gewijzigd door Sappie op 31-08-2005 10:27 ]

Specs | Audioscrobbler

woensdag 31 augustus 2005 10:30

Acties:

Jerry

Who?

Je kan ook eventueel zoiets bovenin je css file zetten:

Cascading Stylesheet:

*
{
    padding: 0;
    margin: 0;
}

Alle margin en padding wordt nu voor elk element op 0 gezet.
Nu kan je zelf alle padding en margin bepalen

[ Voor 16% gewijzigd door Jerry op 31-08-2005 10:34 ]

woensdag 31 augustus 2005 10:37

Acties:

Clay

cookie erbij?

Whoa, even alle margins en padding mollen

dat is wel heel zwaar geschut ...

Geef je p's (en andere content gerelateerde elementen) anders gewoon standaard een bottom margin van 1em ofzo, en een top margin van 0. Dan blijft het lekker uit elkaar staan, en je hebt geen last van topmargins die naar parentnodes collapsen. Normaal hebben ze sowieso een top en bottom margin die (meestal) naar 1em collapsed. Zie b.v. dit stukje css uit de default html.css van firefox zelf:

Cascading Stylesheet:

p, dl, multicol {
  display: block;
  margin: 1em 0;
}

* Clay vindt trouwens dat margins ueberhaupt niet naar parents zouden mogen collapsen, maarja, wie ben ik.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

woensdag 31 augustus 2005 12:31

Acties:

Verwijderd

Topicstarter

Het lijkt erop dat ik beide moet aangeven als in

code:

1
2
3

body,p {
   margin:0;
}

Als ik alleen body aangeef als in

code:

1
2
3

body {
   margin:0;
}

Dan wordt die vertikaal een regel verschoven wel lijnt die links tegen de kant uit.

Als ik aangeef

code:

1
2
3

p {
   margin:0;
}

Dan wordt die zowel vertikaal als horizontaal iets naar binnen geplaatst.

woensdag 31 augustus 2005 13:18

Acties:

Mexxus

In principe is het heel simpel...

code:

html, body{
      padding-top: 0px;
      margin-top: 0px;
}

woensdag 31 augustus 2005 13:21

Acties:

XangadiX

trepanatie is zóó kinderachtig

O'reilly verteld ons dat bij de 0 je helemaal geen eenheid hoeft te geven

En de body tag gaat wel tot bovenaan, zet er maar eens voor de grap background-color: #FF0000; bij dan zul je het zien, het is je p tag die roet in het eten gooit

ik ga ook voor de

code:

1	* { margin: 0; padding: 0; }

@clay want de bevat toch geen content

[ Voor 8% gewijzigd door XangadiX op 31-08-2005 13:22 ]

Stoer; Marduq

woensdag 31 augustus 2005 13:28

Acties:

BtM909

Watch out Guys...

Toch maar even miepen over standaards

http://www.w3.org/TR/CSS1#margin-top
5.5.1 'margin-top'
Value: <length> | <percentage> | auto
Initial: 0
[...]

Dus geen eenheid bij 0

[ Voor 15% gewijzigd door BtM909 op 31-08-2005 13:28 ]

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 31 augustus 2005 14:16

Acties:

Verwijderd

Topicstarter

Met CSS:

code:

html, body{
      padding-top: 0;
      margin-top: 0;
}

code:

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

<head>
<meta http-equiv="Content-Language" content="nl">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>testmargin</title>
<meta name="description" content="latieplatie">
<meta name="keywords" content="splatieflatie">
<link rel="stylesheet" type="text/css" href="stijl2.css">
</head>

<body>

<p>ik gaan naar school</p>

</body>

</html>

(Firefox) Zeker 1 regel naar beneden staan en horizontaal iets naar binnen. (Maar misschien kun je het zelf ook testen?)

[ Voor 70% gewijzigd door Verwijderd op 31-08-2005 14:17 ]

woensdag 31 augustus 2005 14:20

Acties:

Verwijderd

Topicstarter

Met

code:

html, body, p{
      padding-top: 0;
      margin-top: 0;
}

wordt die wel helemaal boven uitgelijnt, maar horizontaal nog steeds iets naar binnen

woensdag 31 augustus 2005 14:23

Acties:

BtM909

Watch out Guys...

Verwijderd schreef op woensdag 31 augustus 2005 @ 14:20:
Met
Cascading Stylesheet:
1
2
3
4
html, body, p{
      padding-top: 0;
      margin-top: 0;
}
wordt die wel helemaal boven uitgelijnt, maar horizontaal nog steeds iets naar binnen

Da's toch logisch, omdat je nu alleen padding-top meegeeft

Probeer anders padding/margin-left mee te geven

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 31 augustus 2005 14:37

Acties:

Verwijderd

Topicstarter

kzit ff niet op te letten...

code:

html, body, p{
      padding: 0;
      margin: 0;
}

maar volgens mij hadden we die al..

En wat doet die padding, ik weet wat padding is. Als ik m weghaal veranderd er niets.

Dit werkt net zo goed

code:

1
2
3

body, p{
      margin: 0;
}

Maar dat had ik ook al gezegd

Dus vanwaar die toevoegingen `html` en `padding`
Zie http://www.daanooms.nl/testmargin.htm http://www.daanooms.nl/stijl2.css

[ Voor 93% gewijzigd door Verwijderd op 31-08-2005 14:50 ]

woensdag 31 augustus 2005 16:46

Acties:

Verwijderd

Topicstarter

weet iemand het verschil tussen <html> en <body>. Wanneer gebruik je in css welke?

donderdag 1 september 2005 13:15

Acties:

Verwijderd

Verwijderd schreef op woensdag 31 augustus 2005 @ 16:46:
weet iemand het verschil tussen <html> en <body>. Wanneer gebruik je in css welke?

De html tag moet zodat de browser weet wat hij voor zijn kiezen krijgt, inde body stata alle content. CSS gebruik je op he htl en body tag omdat die html tag ook wel een margin heeft.(3 pixels ofzo dacht ik).

donderdag 1 september 2005 14:52

Acties:

Verwijderd

Topicstarter

Dus volgens jou al ik een <p> helemaal (zonder marges) linksboven in de hoek wil krijgen moet ik hebben als ccs

code:

1
2
3

html, body, p{
      margin: 0;
}

[ Voor 11% gewijzigd door Verwijderd op 01-09-2005 14:52 ]

donderdag 1 september 2005 18:09

Acties:

Verwijderd

Verwijderd schreef op donderdag 01 september 2005 @ 14:52:
Dus volgens jou al ik een <p> helemaal (zonder marges) linksboven in de hoek wil krijgen moet ik hebben als ccs
code:
1
2
3
html, body, p{
      margin: 0;
}
?

Dat zou ik eerder zo doen:

code:

p
{
position:absolute;
top:0px;
left:0px;
}

Maar jouw code kan ook als de p dan het eerste is binnen de body.

donderdag 1 september 2005 18:39

Acties:

drm

f0pc0dert

Zoefff:
Nul wat? Nul eieren? Nul appels? Oh, nul pixels! Maak er dus even "margin-top:0px;" van.

Da's juist het argument om geen eenheid op te geven bij 0

> Hoeveel kost dat?
< Nou, 0, eigenlijk...
> 0 wat?!
< Euh, 0 dollar?
> Ah, dat komt best uit, met die euro/dollar koers. Als 't 0 euro was geweest had ik er nog even over nagedacht

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

donderdag 1 september 2005 22:59

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op donderdag 01 september 2005 @ 18:09:
[...]

Dat zou ik eerder zo doen:
code:
1
2
3
4
5
6
p
{
position:absolute;
top:0px;
left:0px;
}

ja maar das weer zo lastig voor de rest van de site..

ik vroeg me vooral af of die <html> noodzakelijk is? Iemand zei dat die tag ook 3 pixels nam, maar ik zie het niet. Volgens mij is body en p margin 0 geven genoeg

[ Voor 65% gewijzigd door Verwijderd op 01-09-2005 23:02 ]

donderdag 1 september 2005 23:07

Acties:

crisp

Devver

Pixelated

Het html element heeft in geen enkele browser default styles, dus daar expliciet een margin: 0 voor te geven is inderdaad overbodig.
Het body-element heeft in Opera default geen margin, maar wel padding...

Intentionally left blank

Pagina: 1

Reageer