Slow Learner - CSS

[binidj]

Long-standing readers may recall my frustration at being unable to standardise the appearance of font size between browsers when designing a website. Well this morning I finally cracked it and really it's the most obvious thing in the world and I feel such a fool for not doing it before.

The problem is that, with my drive toward writing accessible and standards-compliant sites, I've been using the measurement "em" to define the size of fonts as opposed to the slightly less daunting "px". The reason for this is that the "View - Text Size" feature in Internet Explorer will not work with absolutely sized text ("px") and this is a problem because in order to make a site accessible to people with even a minor visual impairment it is important that the size of text on the screen be adjustable. Now this would be fine, except that I could not seem to get browsers to agree on a common appearance of font sized with "em", Internet Explorer would always render text larger than Firefox ... so it seemed that I could either make my sites accessible or I could make their appearance standard, not both.

Then this morning I awoke early (for me) with my mind seething with possible solutions to this problem. Not able to get back to sleep, I powered up the PC and had a bash at some of the solutions I'd thought of. My initial attempts weren't successful but then I tried the blindingly obvious solution of putting "font-size : 1em" into the "Body" element. Suddenly all of the fonts magically standardised across the browsers I was using, a couple of tweaks later and I finally had the appearance I'd been after!

So now I'm torn between feeling quite good about myself for solving the problem, and feeling quite stupid because it's something that I should have been doing all along ... I just sort of assumed (yeah, I know "ass out of you and me") that the standard size would be 1em and that specific adjustments to individual elements would stem from the same baseline. Ah well, all's well that ends well.

In other news, albeit related, the initial design for the Candleston site was rejected (though in the nicest possible way) and I've now plumped for a more "traditional" look.

Comments

[furzepig.livejournal.com]

Heh. I'm right there with you. I've had very many hair-tearing clashes with CSS and browser quirks.

I've found things that work best for me in the environment I work in, but each time there's a new lot of (d)HTML to be written I find some don't work for the given scenario. I long to be allowed to design flexible, accessible, cross-browser sites. Really I do. But my work is such that I can only succeed in the 'cross-browser' aspect. Just so long as I don't look outside Mozilla/IE of a few years back.

I've also yet to come across a book that covers the problems effectively. There's no great definitive guide (like Moock does for Actionscript) that I've found, though there are some reasonable websites (e.g. Quirksmode) with comparisons.

Sorry to hear about the rejection. Seems to be par for the course with freelance web design. After moving into company-based web design I came across Kelly Goto's web design workflow and wished I'd come across it whilst freelance. The idea of getting a strong idea of what the client wanted up front through surveys appealed to me, as I'd had big BIG problems meeting my first client's quicksilver desires. Not saying any of this applies - or should apply - to your own situation. It just brought back memories; bad and good.

[furzepig.livejournal.com]

Also - I've just noticed your lovely new blog design. Gorgeous! Home made?

[binidj.livejournal.com]

I wish! Sadly my abilities with Photoshop really aren't up to this standard ... it's an off-the-shelf LiveJournal style I'm afraid ... one of the "Expression" styles if I remember rightly.

[binidj.livejournal.com]

Ah, I don't bother trying to standardise across non-current browser versions unless specifically asked to ... I'm super-lazy!

Also I may have overstated the case when I used the word "rejected". The client had some comments about the design¹ which I then implemented. The best way of implementing the requested changes was to change the base design of the site.

¹ Perfectly reasonable comments I might add. He didn't say anything like "I hate what you've done", it was more like "I'd like to see this and at the moment I can't".

[furzepig.livejournal.com]

Wow. Sounds like a great client!

The worst I've heard was "I don't like it, but I don't know why" - and that was the same response regardless of what suggestions/question were put forward.

W.r.t. CSS - there's only so much you can do unless you eitehr go mad or devote your entire life to the study of CSS and the browser quirks. I reckon.

[marktoy.livejournal.com]

Im Scared, Ive obviously been away from plants and gardens too long cos I just think I understood you, when you were talking about sparkly magic box stuff.

[fresh-panini.livejournal.com]

I'm very pleased for you Bin although as a complete technofool with a fuly working luddite field I have to admit I lost you right after "Long-standing readers may recall..."

;o)

[marktoy.livejournal.com]

See, thats why I'm scared, time was when he'd of lost me at that point too. Maybe the springs wound down (batteries being far too advanced)on my luddite field. Now where did I put that winding Key?