fontsize in table

  • Onderwerp starter Onderwerp starter Maia
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
M

Maia

Gebruiker
Lid geworden
19 mrt 2012
Berichten
51
Hoi allemaal,

hopelijk kan iemand me helpen want ik zie het niet
In html:

<p class="subkop">Subtitel</p>
<div id="tekst">tekst in div</div>

<p class="subkop">Subtitel</p>
<table class = "test">
<tr><td>
tekst in tabel
</td></tr>
</table>

Ik wil graag dat de letters van de tekst in de div even groot zijn als de letters in de tabel.
Wat gaat er mis? of beter wat zie ik over het hoofd?

In css:
body{
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color:#003399;
text-align: center;
}


p.subkop{
font-size: 1.5em;
color:#003399;
text-decoration:underline;
font-weight: bold;
}

div#tekst{
font-size: 1.2em;
line-height: 21px;
}

table.test th, table.test td {
font-size: 1.2em;
line-height: 21px;
background : #efe none; color : #630;
}

Alvast bedankt,
Maia
 
Als ik de font-size uit de body { } haal, lukt het wel. Vreemd dat die font-size daar de boel in de war schopt.
 
doordat je in body aangeeft dat ie maar 62,5% mag zijn en waarvan weet ik zo ook niet uit het hoofd,
maar je geeft dus 2x aan welk formaat t moet hebben en dan pakt hij volgensmij de 1e.
als die twee div's niet zelfde hoogte hebben, dan zijn de grooten verschillend.
maar dan haal je het toch ook gewoon uit de body tag?
 
Het komt doordat je em als waarde gebruikt voor je font-size. em is afhankelijk van de standaard lettergrootte en kan dus variëren. Met andere woorden 1.2 em is geen vaste grootte. Als je zeker wilt weten dat de grootte altijd gelijk is dan kan je het beste punten gebruiken.
12pt is standaard geloof ik.
 
Oké.
Ik dacht dat standaard lettergrootte altijd 16px is en 1.0 em dus ook 16px.
Ik verander het wel.
Beankt, Maia
 
Hoi Maia,
Mmm, het ligt niet aan de font-size van de body, en ook niet aan de em.

De em is een relatieve maat: en altijd ten opzichte van het element waar het in zit. De font-size wordt altijd geërfd van zijn parent-element, en de em's zijn de em's ten opzichte van de maat van dat parent-element.


  • De <div id="tekst">tekst in div</div> zit direct in de <body>, dus de #tekst {font-size: 1.2em;} is 1.2 keer de font-size van de <body>.

  • De <td>tekst in tabel</td> zit in een <tr>, en is dus via de table.test td {font-size: 1.2em;} 1.2 keer de font-size van de <tr>.
  • De <tr> heeft zelf geen font-size opgekregen, en geldt dus als 100% doorgeefluik van z'n omvattende element.
  • De <tr> zit in de <table>, die zelf ook geen font-size opgekregen heeft, en dus ook 100% van z'n omvattende element doorgeeft.
  • De <table> tenslotte zit in de <body>, en neemt dus de font-size van de body over.
  • Via deze schakeling zit dan de <td>tekst in tabel</td> op...
    ... een font-size van 1.2 x 100% x 100% keer de fontsize van de <body> = ook 1.2 keer de font-size van de body.

Ze horen dus even groot te zijn!!! :)
En weglaten of veranderen van de font-size van de <body> hoort niet uit te maken: dan horen ze alle twee gelijk-op mee te schalen.


  • Een proefje met bovenstaande gegevens bevestigt dat: p-td-size.htm

Ze zijn inderdaad exact even groot, ook als je ze nameet in een tekenprogramma:

p-td-size.png

Conclusie: als ze bij jou toch verschillen, moet er iets anders aan de hand zijn.


  • Bv. de <tr>'s hebben toch een font-size opgekregen.
  • Of: er zit een <div> om de <table> heen, die ook een font-size heeft die niet 100% is.
  • Of: domweg ergens een tikfoutje in de html of css; heb je de html-validator en css-validator al 's gecheckt?

Oftewel: om precies te kunnen duiden waar het 'm in zit, is de complete html en css van de hele pagina nodig.
Heb je 'm online staan, en kan je hier de link zetten?

Met vriendelijk groet,
CSShunter
_________
NB: De relatieve em's zijn juist erg aan te raden, en beter dan een fixed font-size (in px)!
Bij font-sizes in px is het nl. in Internet Explorer onmogelijk voor de bezoeker/ster om desgewenst het letterformaat groter te maken, zonder dat meteen op de hele pagina tegelijk ingezoomd moet worden (wat ook niet erg gebruiksvriendelijk is, want dan moet er extra gescrolld worden om te pagina te zien).
 
Laatst bewerkt:
Aha, ik kom er net achter dat bij mij de doctype het verschil kan maken. In mijn eerdere test had ik geen doctype en was overgaan van em naar pt een oplossing.
Controleer voor de zekerheid even of er een doctype boven je code staat.
Ik ging even kijken naar het verschil tussen mijn test en CSShunters test, het enige verschil is daar een doctype :)
 
tiran818 zei:
Ik ging even kijken naar het verschil tussen mijn test en CSShunters test, het enige verschil is daar een doctype :)
Klik om te vergroten...
Kan kloppen, zonder doctype gaan browsers in quirksmode*, dat levert bij verschillende browsers nogal verschillende resultaten op.

*Komt er op neer dat de browser aanneemt dat de code van slechte kwaliteit is (immers, geen doctype) en dus gaat proberen te gokken wat de maker van de site bedoelde, verschillende browsers gokken op verschillende manieren.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan