Toon posts:

Verschil tussen html en body selector in css?

Pagina: 1

Acties:

118 views sinds 30-01-2008
Reageer

dinsdag 19 november 2002 12:59

Acties:

Verwijderd

Topicstarter

Wie iemand het verschil tussen het gebruik van dit:
html {}
of dit:
body{}

Lijkt me in principe toch van hetzelfde laken en pak?
Weet iemand misschien een situatie wanneer het gebruik van de html selector zinvol is?

dinsdag 19 november 2002 13:02

Acties:

OkkE

CSS influencer :+

Lijkt me geen verschil, maar CSS heeft alleen invloed op de dingen binnen <body> dus waarom zou je html{} in je CSS gebruiken?

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

dinsdag 19 november 2002 13:07

Acties:

Willem

Ik snap het ook niet zo goed, waar haal jij html {} vandaan?
Afgezien van het feit dat het een class naam kan zijn...

Motor (of auto) onderhoud bijhouden

dinsdag 19 november 2002 13:09

Acties:

Cheater

Tja zoals gezegd werd... bij html zou je het gehele stuk pakken.
Maar wat heb je bij html meer invloed dan bij body? Ik geloof niets.
Misschien de titel bij HEAD...

dinsdag 19 november 2002 13:10

Acties:

Bergen

Spellingscontroleur

Niet echt, van de titel bij head kun je ook niets instellen.

dinsdag 19 november 2002 13:16

Acties:

Verwijderd

Topicstarter

Dat was dus mijn vraag

Maar de html selector is wel degelijk bruikbaar. De browsers luisteren er iig wel naar.

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style>
html{
background-color:blue;
}
body{background-color:yellow;}
</style>
</head>

<body>

</body>
</html>

Zonder de body selector zou de hele viewport (zo heet dat toch geloof ik) helemaal blauw zijn. Maar met de body selector is die helemaal geel. Behalve dan in Opera7 waar alleen het eerste stukje geel is (Opera7 doet het waarschijnlijk als enige goed).

Ach, ik heb het verschil gevonden

: de html selector is voor de hele viewport en de body selector alleen voor het document. Maar ja, Mozilla en IE maken dan ook van de body height=100% zodat er daar geen verschil tussen is.

Nou dom van mij dus, eerst nadenken voordat je wat vraagt.

dinsdag 19 november 2002 13:18

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

de beste manier om styles voor alle tags te definieren is via de '*'-selector.
BODY is niet echt af te raden, maar is gekoppeld aan het document-object en hierin gelijk aan het gehele venster, effectief is dit enigszins gelijk aan HTML.

BODY als type-selector is meer ingeburgerd dan HTML, maar in theorie zou dit gelijk moeten zijn aan elkaar (ook de HTML-tag is onderdeel van een html-document, als zijnde de gehele content behalve de DTD); kans is echter groot dat HTML meer bugs kent dan BODY, hierbij opgemerkt dat BODY zelf al enigszins buggy wil zijn (zie bv de incorrecte implementatie van margin in zowel mozilla als explorer)

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

dinsdag 19 november 2002 13:19

Acties:

henkleerssen

Your life is as you narrate it

kun je de body... dan kleiner maken dan 100%? ooh? zal wel aan mij liggen .. maar aangezien je body width dan wel height niet kan aanpassen..

dinsdag 19 november 2002 13:27

Acties:

crisp

Devver

Pixelated

Een body heeft standaard margins; deze margins bevinden zich binnen de html en dus binnen de viewport. Vandaar dat Mozilla en Opera inderdaad een randje blauw laten zien. IE rendert de margin binnen de body (= fout, is eigenlijk padding).
Ook de laatste Mozilla's renderen trouwens de body niet default op hoogte 100%...

code:

<style type="text/css">
html{
  background-color:blue;
}
body{
  margin: 10px;
  height: 100%;
  background-color:yellow;
}
</style>

Intentionally left blank

dinsdag 19 november 2002 13:33

Acties:

Verwijderd

Topicstarter

In de nieuwe Opera7 kun je inderdaad de height en de width van de body aanpassen (ook in Mozilla trouwens, net getest). Sterker zelfs, het is aan te raden om de height op 100% te zetten, omdat Opera7 die daar niet standaard op zet. Internet Explorer trekt zich weer nergens wat van aan.
RM-rf wat is houdt die incorrecte implementatie van margin in? (linkje?)

dinsdag 19 november 2002 13:55

Acties:

Verwijderd

Topicstarter

Och ja, Crisp je hebt gelijk.
Nou ik kwam op de vraag, omdat ik keek naar de css van deze pagina. De fout die Mozilla (Phoenix) geeft is dat hij geen scrollbar geeft, terwijl hij dat wel zou moeten doen.
Weet iemand waar dat aan ligt dan?
http://rijk.op.het.net/test/fixed.html
http://rijk.op.het.net/test/fixed.css
Als ik de html selector daarvan weghaal, dan doet ie het opeens wel goed. Lijkt dus sterk op een bug in Mozilla.

dinsdag 19 november 2002 14:06

Acties:

Willem

Allemaal wel heel erg mooi en aardig maar volgens mij is dit niet echt iets waar ik me nou mee bezig zou houden als webdesigner...

Motor (of auto) onderhoud bijhouden

dinsdag 19 november 2002 14:29

Acties:

henkleerssen

Your life is as you narrate it

willem169 schreef op 19 November 2002 @ 14:06:
Allemaal wel heel erg mooi en aardig maar volgens mij is dit niet echt iets waar ik me nou mee bezig zou houden als webdesigner...

Waarom dan niet? Lijkt me toch wel handig om te weten wat met verschillende tags precies mogelijk is ... en zeker voor basale tags als HTML en BODY

dinsdag 19 november 2002 14:35

Acties:

crisp

Devver

Pixelated

Hmmz, dit lijkt het ook op te lossen in Mozilla:

code:

html {
  height: 100%;
  overflow: auto;
}

Intentionally left blank

dinsdag 19 november 2002 14:49

Acties:

Verwijderd

Topicstarter

Crisp, ik snap dat dat het oplost, maar wat ik niet begrijp is, waarom dit zo weergegeven wordt in Mozilla. Aangezien er ook een selector body is met overflow:visible zou er dus gewoon een scrollbar moeten verschijnen. Toch? Of niet?
En ja ik weet het: ik dwaal af.

dinsdag 19 november 2002 15:05

Acties:

Verwijderd

Leuke testcase:
http://bugzilla.mozilla.o...cgi?id=100138&action=view

Hoort bij deze 'bug'

dinsdag 19 november 2002 15:09

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op 19 november 2002 @ 14:49:
Crisp, ik snap dat dat het oplost, maar wat ik niet begrijp is, waarom dit zo weergegeven wordt in Mozilla. Aangezien er ook een selector body is met overflow:visible zou er dus gewoon een scrollbar moeten verschijnen. Toch? Of niet?
En ja ik weet het: ik dwaal af.

Het lijkt me inderdaad een bug in Mozilla, Opera (7) doet het wat dat betreft beter.
Wat trouwens ook vreemd is, is dat de scrollbar in feite niet in de body gerenderd wordt; pas maar eens margins toe op de body; de scrollbar blijft rechts staan...

Intentionally left blank

dinsdag 19 november 2002 15:24

Acties:

Verwijderd

Topicstarter

Daar zeg je zo eens wat, Crisp.
Maar laat ik maar ophouden met pielen, want hoe meer ik test, hoe meer vreemde dingen ik vind. Opera7 doet ook iets vreemds als ik dit gebruik:

code:

html    {
    overflow: hidden;
    }


body
    {
    background: #ddd;
overflow:visible;
height:100%;
    }

Als ik dan scroll, dan is de tekst afgebroken en krijg ik een zwarte achtergrond. Mozilla en IE weigeren om een scrollbar te laten zien.

dinsdag 19 november 2002 19:07

Acties:

disjfa

nog ff een klein dingetje tussendoor

k zie wel een margin maar geen padding... zodat opera er nie goed mee omgaat

body{
margin:10px;
padding:10px;
}

zodat ie overal goed staat

disjfa - disj·fa (meneer)
disjfa.nl

dinsdag 19 november 2002 21:27

Acties:

Woudloper

« - _ - »

* Woudloper denkt dat de ófwel de browser makers (devvers) eens beter de W3C specs moeten gaan lezen met betrekking tot het DOM model en het gebruik van CSS ófwel W3C moet hier gewoon meer duidelijk in verschaffen....

Overigens denk ikzelf dat W3C het redelijk bij het rechte eind heeft gehad en dat de devvers aannames hebben gemaakt gebasseerd op de specs en de enige die aannames mogen maken zijn de mensen die de specs schrijven.

dinsdag 19 november 2002 22:10

Acties:

crisp

Devver

Pixelated

disjfa schreef op 19 November 2002 @ 19:07:
nog ff een klein dingetje tussendoor

k zie wel een margin maar geen padding... zodat opera er nie goed mee omgaat

body{
margin:10px;
padding:10px;
}

zodat ie overal goed staat

Fout! In IE staat de content in je body nu inderdaad 10 pixels vanaf de rand van je viewport; in Mozilla en Opera echter 20 pixels gerekend vanaf de viewport! (10 + 10)

Intentionally left blank

dinsdag 19 november 2002 22:18

Acties:

Hangloozz

{ @$%&# }

crisp schreef op 19 november 2002 @ 22:10:
[...]

Fout! In IE staat de content in je body nu inderdaad 10 pixels vanaf de rand van je viewport; in Mozilla en Opera echter 20 pixels gerekend vanaf de viewport! (10 + 10)

purcies.. nénénénénééééé

Die lessen 'boxmodel' van shadow3333 zijn toch nog ergens goed voor geweest

www.jurgroessen.nl

dinsdag 19 november 2002 23:02

Acties:

crisp

Devver

Pixelated

Hangloozz schreef op 19 November 2002 @ 22:18:
[...]

purcies.. nénénénénééééé

Die lessen 'boxmodel' van shadow3333 zijn toch nog ergens goed voor geweest

...ook eenvoudig achter te komen door het gewoon te testen...

Intentionally left blank

dinsdag 19 november 2002 23:07

Acties:

Hangloozz

{ @$%&# }

crisp schreef op 19 November 2002 @ 23:02:
[...]

...ook eenvoudig achter te komen door het gewoon te testen...

tss, zuurpruim

www.jurgroessen.nl

woensdag 20 november 2002 00:22

Acties:

disjfa

crisp schreef op 19 november 2002 @ 22:10:
[...]

Fout! In IE staat de content in je body nu inderdaad 10 pixels vanaf de rand van je viewport; in Mozilla en Opera echter 20 pixels gerekend vanaf de viewport! (10 + 10)

jamaar ik gebruik altijd 0px

en als ik ze allebij op 0px zet dan klopt t wel

maar dat ben ik dan

en dit sla ik wel weer op in mn achterhoofd

disjfa - disj·fa (meneer)
disjfa.nl

Pagina: 1

Reageer