[CSS] geeft 12pt weer hoewel er staat 10pt - Softwareontwikkeling

vrijdag 28 september 2001 13:05

Acties:

a.k.a. Olthuis

Topicstarter

Mijn CSS is niet helemaal goed, maar hij zal het wel goed moeten doen, want volgens mij zitten er geen fouten in.

De CSS

code:

body    { 
    font-size : 10pt;
    font-family : Arial, Verdana;
    color : #000000;

    background-color : #FFFFFF;
    background-image : url(images/background.jpg);
    background-repeat : no-repeat;
    background-attachment : fixed;
    }
    
h1  {
    font-size : 12pt;
    font-family : Arial, Verdana;
    font-weight : bold;
    color : #B01A03;
    }

A:link  {
       font-size : 10pt; 
       font-family : Arial, Verdana; 
       color : #B01A03; 
       text-decoration : underline; 
    }


A:hover {
       font-size : 10pt; 
       font-family : Arial, Verdana; 
       color : #B01A03; 
       text-decoration : none; 
    }


A:active {
       font-size : 10pt; 
       font-family : Arial, Verdana; 
       color : #B01A03; 
       text-decoration : none; 
    }

Een voorbeeld pagina waar het ook niet goed gaat:
http://www.marganza.nl/seren/contact.html

Het vage is dus, dat hij de link wel op 10pt aangeeft, maar de tekst zelf niet

Waar ligt dit aan

vrijdag 28 september 2001 13:08

Acties:

Dennis

CSS wordt door IE nooit overgenomen in tabellen.
Zet achter body ook span dus

code:

1
2
3

body, span {
(hier css)
}

en zet vervolgens de teksten ook in je span

vrijdag 28 september 2001 13:09

Acties:

Verwijderd

probeer body te veranderen in P...

vrijdag 28 september 2001 13:10

Acties:

Markje_X

a.k.a. Olthuis

Topicstarter

Maar toch staat het goede lettertype in de tabel maar niet de juiste grote!

De adresgegevens,

Stoeterij Seren
e.d.

Staat ook in punt grote 12 en niet in punt grote 10, zoals het zou moeten wezen

vrijdag 28 september 2001 13:11

Acties:

Dennis

Op vrijdag 28 september 2001 13:10 schreef Mark Olthuis het volgende:
Maar toch staat het goede lettertype in de tabel maar niet de juiste grote!

De adresgegevens,

Stoeterij Seren
e.d.

Staat ook in punt grote 12 en niet in punt grote 10, zoals het zou moeten wezen

Klopt, het is ook een bug van IE. In mozilla werkt het nl. prima

vrijdag 28 september 2001 13:12

Acties:

Markje_X

a.k.a. Olthuis

Topicstarter

Oke de tekst is nu in 10pt

maar hoe krijg ik die tabel zo ver

vrijdag 28 september 2001 13:16

Acties:

Verwijderd

Op vrijdag 28 september 2001 13:12 schreef Mark Olthuis het volgende:
Oke de tekst is nu in 10pt

maar hoe krijg ik die tabel zo ver

maak ook en aparte vermelding voor <td>

vrijdag 28 september 2001 13:18

Acties:

Markje_X

a.k.a. Olthuis

Topicstarter

Heb ik net gedaan en het werkt!

Thanks!

vrijdag 28 september 2001 13:27

Acties:

jochemd

Op vrijdag 28 september 2001 13:05 schreef Mark Olthuis het volgende:
Mijn CSS is niet helemaal goed, maar hij zal het wel goed moeten doen, want volgens mij zitten er geen fouten in.

Er zit niet zozeer een fout in, je hebt een concept van CSS niet goed begrepen. In CSS gaat het allemaal om 'inheritance', het erven van eigenschappen van hoger gelegen elementen. Echter, voor jouw text in niet <body> het hoger gelegen element, maar <td>. Jouw text erft dus eigenschappen van <td>, maar niet van <body>. Wat heb je gedefinieerd op <td>? Niets, dus wordt er niets georven. Het handigste is om in plaats van alleen <body> ook een reeks andere elementen op te nemen in de lijst waarvoor je eigenschappen definieert.

code:

1
2
3

body {....}
wordt:
body, td, p, blockquote {....}

Maar wacht even, erft <td> dan niet de eigenschappen van <tr>?
Nee. <td> is een zogeheten 'block-level element' en heeft als enige parent <body>. Dus <td> erft niet van <tr>, <tr> erft niet van <table> etc.

Maar als <body> de parent is van <td>, dan erft <td> toch van <body>?
Dat doet <td> ook, alleen niet alle eigenschappen

Omdat <td> een block level element is erft het alleen block level properties, en geen text properties.

Het probleem is dus dat het inheritance model van CSS gebaseerd is op de formele definitie van HTML, die niet altijd even intuitief is op het eerste gezicht. Als je er aan gewend bent is het eigenlijk best wel logisch.
[waarschuwing]
Dit is niet het complete officiële verhaal, maar het zou inzichtelijk moeten maken wat er speelt. Voor het complete verhaal: http://www.w3.org/
[/waarschuwing]

vrijdag 28 september 2001 13:29

Acties:

Dennis

Mooi verhaal zeg

Maar waarom doet Mozilla het dan wel

vrijdag 28 september 2001 13:45

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

Op vrijdag 28 september 2001 13:27 schreef jochemd het volgende:

Er zit niet zozeer een fout in, je hebt een concept van CSS niet goed begrepen.

[..]

nee sorry maar dat heb je helemaal mis, juist inheritance volgens het W3C model betekent dat elementen van een stylesheet overnemen, echter tevens van omvattende (parent) elementen.
overigens kunnen de ingerit waardes specifiek verschillen (paddings en margins worden meestal niet ge-inherit)
Cascading is de methode waarop de ua besluit welke style toe te passen (!important) en het feit dat styles van een parent-element onderdeel uitmaken van het style-object van het element zelf

de table die geen styles van de body overneemt is een bug, die voornamelijk veroorzaakt wordt door de vreemde waarde van de BODY-tag;
het het document.all-model staat die gelijk aan het document-object, maar dat is fout en levert wat problemen op.

eigenlijk geld als advies dat je sowieso beter geen styles aan document zou moeten hangen, behalve background-properties (en padding/margins, maar zelfs daar gaat msie de fout in)

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

vrijdag 28 september 2001 13:53

Acties:

jochemd

Op vrijdag 28 september 2001 13:45 schreef RM-rf het volgende:

[..]

nee sorry maar dat heb je helemaal mis, juist inheritance volgens het W3C model betekent dat elementen van een stylesheet overnemen, echter tevens van omvattende (parent) elementen.

Zoals ik het heb begrepen zit de clou hem in het woordje omvattende. Ergens in de inheritance tree zit een niet omvattend element.

En nog even een tip voor Mark Olthuis: als je een achtergrond plaatje gebruikt en je zet die in je CSS, gebruik dan een volledige link. Als je een relatieve link gebruikt hebben NN en IE een verschil van mening of dat relatief ten opzichte van de CSS of de HTML pagina dient te zijn.