PDA

View Full Version : using em for font sizes.


Andromeda
06-03-2007, 03:28 AM
Could someone please check this page and tell me what I'm doing wrong.

http://www.newday.co.nz/site-pproducts/testing01.html

It's the three dark pinkish links in the main area that I'm having a problem with. I've set the font size to be 1.5em. This is the same size as I've given my H1 so why are the links and the h1 different sizes???

Cary
06-03-2007, 10:00 AM
All your h1 elements on the page are styled with 1.5em, but those anchors within h1 tags are also styled with 1.5em. So they end up at 2.25em.

Andromeda
06-03-2007, 06:52 PM
Thanks for putting me right Cary.

I had assumed that any "em"s were measured against the size of the body text but obviously this is not correct.

chriskq
06-03-2007, 11:26 PM
you are correct in saying that Andromeda.

font-sizes throughout ur site are all relative to whatever font-size you place on your body.

Andromeda
06-04-2007, 12:16 AM
In which case the three links which I have at 1.5em should be the same size as my H1 which is also 1.5em - but they don't.

What Cary is saying, and it seems to work, is that my anchor H1s were taking their size from the ordinary H1 and not the body.

domedia
06-05-2007, 03:26 PM
If you've set text to 1.5 em in your body already, h1 ones are displayed 1.5 em. If you then in addition set h1's to 1.5em, it's going to turn out like Cary said.

Cary
06-05-2007, 10:24 PM
In which case the three links which I have at 1.5em should be the same size as my H1 which is also 1.5em - but they don't.

What Cary is saying, and it seems to work, is that my anchor H1s were taking their size from the ordinary H1 and not the body.

This is the code you're using on your page:

<div id="trucky2">
<h1><a href="specials.html">Specials</a></h1>
<h1><a href="newproducts.html">New Products</a></h1>
<h1><a href="news.html">Packaging News </a></h1>
</div>Your links are inside h1 tags. As can be seen below, both your h1 tags and your anchors are set to 1.5em. So the anchors are already inheriting the 1.5em font size from their containing h1 tags, and the additional 1.5em styling for the anchors themselves increases their inherited size by an additional 1.5 giving you the resulting size of 2.25ems.

Or another way to look at it. You have set the anchors to 1.5em so that's the base size of the font used for those links. Then your h1 styling is telling the browser to make the links another 1.5 times bigger.

h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#8c5053;
font-size:1.5em;
}

#trucky2 a:link {
color:#8c5053;
font-size:1.5em;
text-decoration:none;
}

Cary
06-05-2007, 10:41 PM
Andromeda, just so you know, this would be a more semantically correct way of coding the above links:

<ul id="trucky2">
<li><a href="specials.html">Specials</a></li>
<li><a href="newproducts.html">New Products</a></li>
<li><a href="news.html">Packaging News</a></li>
</ul>

Andromeda
06-06-2007, 07:49 PM
Thanks. I think I have that piece of info lodged in my brain now!

And thanks for the other tip too. Much appreciated.

chriskq
06-07-2007, 12:22 AM
Cary i think it is important to use headings (ie, H1/h2/h3s were appropriate)

this creates better usability and accessibility (esp for screen readers).

you should really only have one h1 heading per page.... there are exceptions to that thou.

Cary
06-07-2007, 10:14 PM
I agree. Andromeda could very well retain the heading level tags within the li tags of list.