[HTML &amp; CSS] display waarde van een span

De Parasitaire Capaciteit!

- Zoals je zelf al opmerkt; spans zijn inline elementen, daarvoor kun je geen hoogte en breedte instellen.
- zonder (volledige) DTD rendert IE in quirksmode (dwz oa niet-standards box-model)

Om hetzelfde resultaat in alle browsers te bewerkstelligen zoals je 2e link in IE kun je bijvoorbeeld een tweetal div's laten floaten:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <style type="text/css">
    #rechts, #links { 
        width: 200px; 
        height: 200px; 
        border: 1px solid black; 
        float: left;
    }
    
    #rechts img {
        display: block;
        width: 200px;
        height: 100px;
        background: blue;
    }
    </style>
</head>
<body>
    <div id="links"></div>
    <div id="rechts">
        [img]"#"[/img]
        lorem ipsum....
    </div>
</body>
</html>

[ Voor 16% gewijzigd door Sappie op 26-01-2006 17:55 ]

donderdag 26 januari 2006 17:49

Acties:

Verwijderd

Een block level element mag niet in een inline element. Never. Ever.

donderdag 26 januari 2006 17:51

Acties:

Verwijderd

Graveheart schreef op donderdag 26 januari 2006 @ 17:37:
Als ik de breedte of hoogte instel op de span dan werkt hij wel goed in IE, maar FF blijft weigeren! Meestal hoor je van mensen dat IE een rare intrepetatie heeft van html, maar volgens mij zit FF er hier toch echt naast.

Dat is geen wijze aanname. Lees de specificaties, en dan zie je daf Firefox het goed doet volgens die specificaties. Internet Explorer komt in standards compliance mode ook aardig in de buurt. Begin eens met een doctype declaration.

donderdag 26 januari 2006 18:00

Acties:

donderdag 26 januari 2006 19:06

Topicstarter

Sappie schreef op donderdag 26 januari 2006 @ 17:49:
- Zoals je zelf al opmerkt; spans zijn inline elementen, daarvoor kun je geen hoogte en breedte instellen.
- zonder (volledige) DTD rendert IE in quirksmode (dwz oa niet-standards box-model)

Om hetzelfde resultaat in alle browsers te bewerkstelligen zoals je 2e link in IE kun je bijvoorbeeld een tweetal div's laten floaten:
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <style type="text/css">
    #rechts, #links { 
        width: 200px; 
        height: 200px; 
        border: 1px solid black; 
        float: left;
    }
    
    #rechts img {
        display: block;
        width: 200px;
        height: 100px;
        background: blue;
    }
    </style>
</head>
<body>
    <div id="links"></div>
    <div id="rechts">
        [img]"#"[/img]
        lorem ipsum....
    </div>
</body>
</html>

Zo had ik het al opgelost inderdaad. Ik dacht alleen dat het netter zou zijn om het op te lossen met block en inline. Niet dus

Bedankt.

Verwijderd schreef op donderdag 26 januari 2006 @ 17:49:
Een block level element mag niet in een inline element. Never. Ever.

Dit wist ik nog niet.

Acties:

De Parasitaire Capaciteit!

Graveheart schreef op donderdag 26 januari 2006 @ 18:00:
Zo had ik het al opgelost inderdaad. Ik dacht alleen dat het netter zou zijn om het op te lossen met block en inline. Niet dus Bedankt.

_{nofi, maar ik heb niet echt het idee dat je dit zelf al op deze manier had opgelost of dat je het verschil tussen inline en block elementen snapt (niet dat dat wat uitmaakt of dat het ingewikkeld is.. integendeel). Het komt namelijk niet echt op me over dat je er veel van begrijpt maar.. iig goed streven dat je af wilt van tabellen voor je layout.. enne graag gedaan}

vrijdag 27 januari 2006 09:31

Acties:

vrijdag 27 januari 2006 10:53

Topicstarter

Sappie schreef op donderdag 26 januari 2006 @ 19:06:
[...]

_{nofi, maar ik heb niet echt het idee dat je dit zelf al op deze manier had opgelost of dat je het verschil tussen inline en block elementen snapt (niet dat dat wat uitmaakt of dat het ingewikkeld is.. integendeel). Het komt namelijk niet echt op me over dat je er veel van begrijpt maar.. iig goed streven dat je af wilt van tabellen voor je layout.. enne graag gedaan}

Waarom zou ik dit niet al zelf op deze manier hebben opgelost, alleen door het kleine detail

dat ik niet wist dat een block element niet in een inline element hoort

Ik ging er vanuit dat de eigenschap van het block element binnen het inline element zou blijven.

Je zegt nofi, maar het komt toch wel aardig in de buurt. Er zit geen tip of iets anders in je post waar ik iets aan heb

En nog beweren dat ik zit te liegen ook. Ik ben hier zo anoniem als het maar kan, ik hoef me nergens voor te schamen, waarom zou ik dingen gaan verzinnen. Of hoop je dat ik het niet wist, zodat je een betere hulp was. Je hebt me perfect geholpen, door te bevestigen hoe ik het moest oplossen.

Dit komt erop neer dat je eerst sorry zegt en vervolgens toch iemand expres op z'n bek slaat. Beetje jammer...

Maar aangezien je me wel geholpen hebt, kom je in totaal wel in de plus bij me

offtopic:
Okay nu heb ik ruzie met IE

FF doet het netjes...

[ Voor 15% gewijzigd door Fles op 27-01-2006 10:29 ]

Acties:

De Parasitaire Capaciteit!

Graveheart schreef op vrijdag 27 januari 2006 @ 09:31:
Waarom zou ik dit niet al zelf op deze manier hebben opgelost, alleen door het kleine detail dat ik niet wist dat een block element niet in een inline element hoort Ik ging er vanuit dat de eigenschap van het block element binnen het inline element zou blijven.

Je zegt nofi, maar het komt toch wel aardig in de buurt. Er zit geen tip of iets anders in je post waar ik iets aan heb En nog beweren dat ik zit te liegen ook. Ik ben hier zo anoniem als het maar kan, ik hoef me nergens voor te schamen, waarom zou ik dingen gaan verzinnen. Of hoop je dat ik het niet wist, zodat je een betere hulp was. Je hebt me perfect geholpen, door te bevestigen hoe ik het moest oplossen.

Dit komt erop neer dat je eerst sorry zegt en vervolgens toch iemand expres op z'n bek slaat. Beetje jammer...

Maar aangezien je me wel geholpen hebt, kom je in totaal wel in de plus bij me

Nu ik het teruglees komt het inderdaad een beetje denigrerend over. Ik had misschien beter kunnen zeggen dat het slim zou zijn om je nog wat verder te verdiepen in css. En dan met name goed te kijken naar het verschil tussen block en inline elementen (zo is span bijvoorbeeld de inline equivalent van div). Het komt, zoals ik al zei, namelijk niet echt op me over dat je dat goed onder de knie hebt.

En verder, aangezien je het al op dezelfde manier als ik had opgelost en je je afvroeg wat beter was, had je dat dus beter in de startpost kunnen vermelden. had mij ook weer wat tijd gescheeld

maargoed ben blij dat ik je heb kunnen helpen

offtopic:
Okay nu heb ik ruzie met IE FF doet het netjes...

je hebt toch wel een DTD in je html opgenomen hè?

vrijdag 27 januari 2006 11:00

Acties:

vrijdag 27 januari 2006 11:25

Topicstarter

Sappie schreef op vrijdag 27 januari 2006 @ 10:53:
[...]
Nu ik het teruglees komt het inderdaad een beetje denigrerend over. Ik had misschien beter kunnen zeggen dat het slim zou zijn om je nog wat verder te verdiepen in css. En dan met name goed te kijken naar het verschil tussen block en inline elementen (zo is span bijvoorbeeld de inline equivalent van div). Het komt, zoals ik al zei, namelijk niet echt op me over dat je dat goed onder de knie hebt.

En verder, aangezien je het al op dezelfde manier als ik had opgelost en je je afvroeg wat beter was, had je dat dus beter in de startpost kunnen vermelden. had mij ook weer wat tijd gescheeld

maargoed ben blij dat ik je heb kunnen helpen

[...]

je hebt toch wel een DTD in je html opgenomen hè?

Opgenomen, IE heeft alleen een andere opvatting van marges.

Verschil tussen span en div wist ik idd, vandaar dat ik ook spans had gebruikt in het origineel en geen divs.

Acties:

De Parasitaire Capaciteit!

Graveheart schreef op vrijdag 27 januari 2006 @ 11:00:
Opgenomen, IE heeft alleen een andere opvatting van marges.

Dat duidt dus op een verschil in box-model (border-box ipv content-box), wat vervolgens weer te maken heeft met IE in quirks mode, wat vervolgens weer te maken heeft met oa de DTD. Is deze wel volledig? En verder.. heb je geen comments boven je DTD staan? (dit triggert namelijk ook quirks mode in IE)

meer hierover bijvoorbeeld hier: http://hsivonen.iki.fi/doctype/

Verschil tussen span en div wist ik idd, vandaar dat ik ook spans had gebruikt in het origineel en geen divs.

Wel raar dat je dan van een span een block-level element maakt dmv css

vrijdag 27 januari 2006 11:33

Acties:

ZeilDude

Graveheart schreef op donderdag 26 januari 2006 @ 18:00:
[...]

Dit wist ik nog niet.

Een handige online bron voor html (en ook css, zei het in mindere mate) is handleidinghtml.nl. Gewoon in het Nederlands met duidelijke uitleg. Daar vind je bijvoorbeeld informatie over het span-element en het verschil tussen span en div.

[ Voor 4% gewijzigd door ZeilDude op 27-01-2006 11:34 ]

vrijdag 27 januari 2006 12:02

Acties:

vrijdag 27 januari 2006 12:20

Topicstarter

Sappie schreef op vrijdag 27 januari 2006 @ 11:25:
[...]

Dat duidt dus op een verschil in box-model (border-box ipv content-box), wat vervolgens weer te maken heeft met IE in quirks mode, wat vervolgens weer te maken heeft met oa de DTD. Is deze wel volledig? En verder.. heb je geen comments boven je DTD staan? (dit triggert namelijk ook quirks mode in IE)

meer hierover bijvoorbeeld hier: http://hsivonen.iki.fi/doctype/

[...]

Wel raar dat je dan van een span een block-level element maakt dmv css

Ja klopt had ik ook een div van kunnen maken, maar ik had in m'n start post gezet dat die span met block eigenlijk een img element was met block. Aangezien een img een inline element is heb ik een span gebruikt en daar een block van gemaakt in het voorbeeld.

Ik heb de DTD overgenomen van jou, en ga ervanuit dat die gewoon goed is

edit:
typo

[ Voor 6% gewijzigd door Fles op 27-01-2006 12:05 ]

Acties:

De Parasitaire Capaciteit!

Graveheart schreef op vrijdag 27 januari 2006 @ 12:02:
Ik heb de DTD overgenomen van jou, en ga ervanuit dat die gewoon goed is

Die is ok inderdaad. IE zou daardoor dan toch écht in standards compliant mode moeten renderen. Post je complete html (icm css) eens anders

vrijdag 27 januari 2006 12:31

Acties:

vrijdag 27 januari 2006 12:45

Topicstarter

http://www.ziso.nl/test/marges

Als ik de div waar de tekst in staat wijzig in een span dan staat de marge in IE wel goed.

Let niet op de padding en marges overal door elkaar, hij is nog niet af en ben nog aan het finetunen

Acties:

De Parasitaire Capaciteit!

Graveheart schreef op vrijdag 27 januari 2006 @ 12:31:
http://www.ziso.nl/test/marges

Als ik de div waar de tekst in staat wijzig in een span dan staat de marge in IE wel goed.

Let niet op de padding en marges overal door elkaar, hij is nog niet af en ben nog aan het finetunen

Ik heb even nu geen tijd om er verder naar te kijken (hebben zo presentatie hier op school), maar zo op het eerste gezicht lijkt het erop dat je te maken hebt met de IE double margin bug.

zie voor meer info bijv hier: http://www.positionisever...lorer/doubled-margin.html

vrijdag 27 januari 2006 13:29

Acties: