Slow Learner - CSS
Jan. 31st, 2007 10:43 amLong-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.
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.