Firefox text size increases

[ozchris]

Hi.

I am building a site using CSS, that I wanted to keep user-friendly by expressing all navigation and body text in em, so that short-sighted people can enlarge it if they want.

But I wanted the heading excluded, for neatness.

It does work in IE, going to View-Textsize, it happily changes the body and navigation, leaving the heading alone.

But in Firefox, when using ctl++ to enlarge the font, it also enlarges the heading text, pushing the heading photos away, and stuffing up the appearance.

The headings are expressed in px instead of em. I thought this should have stopped Firefox from changing them.

Any tips?

[Faglork]

This has been already discussed here ... AFAIK it is IE which got that wrong. Changing font size is high priority with WAI, and FF just followed W3C/WAI suggestions.

There is no way to change that. BTW, this is the same with OPERA's "zoom" feature.

Alex

[ADAM Web Design]

If you don't have the headings in place for search engine reasons (as in they're just ordinary titles), then I'd go into Photoshop and create GIFs/JPGs of them. They can't be resized no matter what.

This is where I disagree with faglork. I think they both got it "wrong." IE is right in that a pixel is an absolute unit of measure (1/72") and that it shouldn't change. When any other document (a Word doc, PSD, etc.) is set up with text, the text is in pixels and there's no feature built within to resize the text in relative terms of "larger, largest, smaller, smallest".

But that leads me to my next point...where they all got it wrong. And for it, I'm going back to Word for an example. When you have text in Word and you want to make it bigger, you make the whole document bigger by using the Zoom feature, as you would with a PSD. To keep it consistent, browsers should have some sort of Zoom feature as well. This way, the issue of readability is negated for both plain and embedded text.

It's a part of Flash now...why can't it be a part of everything else?

[ozchris]

Sorry, missed the previous discussion about this.

Oh well. I had planned to use ordinary text, for both search engine purposes and also general clarity of text.

I already had 5 small photos on the page, and didn't really want another image, to slow things down.
I read somewhere this week that there were only 4 parallel connections available to retrieve files when opening a page (or something like that).

I will ask the client if they care most about loading speed or accessibility. I guess I could also turn the 5 photos (in a line) into one big one, to reduce the number of files problem.

cheers
Chris

[ADAM Web Design]

Good reasons to want to use plain text.

There may be another alternative (not that I know what it is yet). What's the site in question?

[ozchris]

It's still under development. I've got the structure up at http://www.sydney-web-design.com/fergusons
but am waiting for them to provide more content next week.

They mentioned possibly changing the 5 pictures at the top of each page on different pages, to reflect the different parts of their business, eg a boat-lift, pictures of the boat-repair. Which would again slow the loading of the subsequent pages, because they wouldn't be in cache.

(Sorry. I just discovered cache. I was copying parts of their original site, and was amazed that you can access the movies and java programs from cache).

And yeah, I need to optimise the photos more - they are a little large. They were related photos I had lying around, and I used them for the initial proposal.

This will be my first paid site. It's going to pay for a kayak for my son's birthday next month. As long as the sharks don't get us.

cheers

[ADAM Web Design]

You do have one other alternative.

Move your pictures div outside of your heading div, so it acts as a div on its own. Then set "overflow: hidden;" on the heading div. That way, when you resize your text, your picture div stays put.

You might have to mess with the code a bit beyond that, but it should work.

Cool site, though. I like it. Nice and clean. It could use a proper logo, but you probably don't have that and they may well not either.