Hi,

I'm having great deal of trouble trying to get my site (http://www.itxcel.com ) to look good on most browsers. I already have two separate CSS files for IE and then another for everything else. This seems to work fine. However my latest problem is driving me mad. Take the same site with the same CSS then open it if Firefox 1.0 on windows and then do the same in Linux and the fonts are a different size. It looks like the option to set text the "normal" size sets a different size on each platform.

Has anyone else noticed this or am I just being stupid? I'd appreciate any general advice anyone has on getting constant font sizes across browsers and platforms.

Thanks,
Ewan.

I do see the problem, try this.......


Insert this in the CSS part

font-size:9pt;

hope it helps!

Personally I have found px to be a better option for sizes of all types when it comes to monitor display. The problem with px is that it refers to pixels which can cause irregularites with printing, in which case pt is the better option.

Hope this helps,

There are very few pages that I would expect anyone to be printing so i'll give that a try. thanks.

Use one style sheet for printing and another for screen display. Not sure off the top of my head what the way to do this is, I think you specify in the link.

Different units are used for different things. I try to use fixed sizes (such as em) when making the text bigger would screw with the layout, and for body text which can expand anywhere, I use variable sizes so you can set the text size on your browser if you've got dodgey eyes, and it still looks good

Just to clarify - em is a relative unit of measurement and preferable to fixed measurements such as pt, pc, mm and cm, for accessibility reasons.
Think of em as the equivalent of the default capital 'M', with ex beng the equivalent of the lower-case 'x'
Use decimal to apply proportion, so 2em is twice the size of the default capital 'M'.
1.2em is equivalent to 120% of the default capital 'M'.
Most browsers will equate 2ex to 1em, though it is possible the browser will only support em not ex.

To apply a different StyleSheet to printed output use

<link rel="StyleSheet" type="text/css" href="print.css" media="print">

Note older browsers don't support the media attribute, but if a browser does it is most likely to support the 'print' value but not necessarily the alternative values of 'braille', 'speech' and 'handheld' for example.

I have already adjusted all the sizes to use px instead of pt and the result does appear to be more uniform, looks the same on IE6 and firefox on Windows and Linux. A lot of my design includes divs containing text and an image in the background, this tends to really fall apart when the text is not as intended.

ElectricSheep, thanks for the media="print" tip. I'm sure it will come in useful. You say 1 em is the equivalently of a default capital 'M' but who knows what size that is? I bet it's different on every browser. Then how am I supposed to know what the design will look like? At least with px it is the same in every bowser and if someone can't read it they can always make it larger themselves. Or am I missing some important point?

Thanks,

Hello,

Actually em is set by the size of the capital M for the font size sepcified, which is what I beleive ElectricSheep is saying. This is very useful for print and accessibility as it grows with the font size when a user adjusts their zoom. I use px for everything but I am trying to figure out how to use em more constructivly as I would like to make my pages more 508 friendly.

Cheers,

Hi there.
In the context of accessibility it shouldn't matter what the default font size is.
That is for the user to decide, not the designer. After all, who is the designer designing for?

By careful use of styling and markup you can add varying levels of importance and meaning to your content without imposing total control over the look of the output.

It makes life easier in the short-term for the designer to impose absolute control over styling but this is very poor in relation to accessibility and in the long term more site maintenance will be required to keep up with changes in hardware - such as a typical user's viewing space (larger LCDs, smaller handheld devices).

Also, from a commercial point of view, if someone is using say IE and they need to go to View | Text | Largest to make the font easier to read but the text is unaffected then absolute sizes have been used and a potential customer is lost.

em is the way to go!

PS. I'm not on commission :-)

Ok, i've just found one of the sources of my confusion. In firfox you can (rightly) make the text size larger of smaller no matter if I use px, em, pt. But in IE it stays fixed when using px. When I find the time i'll change all the text that is not size sensitive to em and leave the rest as px.