Log In...
As all my avid readers will be aware (hi Dave, Steve, Chris and Jo), I like using ems to layout websites so they stay nice and elastic. It works great in Firefox, Safari, etc. but not quite nicely enough in Explorer (surprise surprise). So I did a quick google and found this little nugget:
body { font-size: 80% }
That's it. No more ridiculously small fonts when 'smallest' text size is selected (well it's still a bit small, but you can actually read it now) and layouts work much better. Down with pixels!
Zaonce...
This Planet is a Tedious Place...
27/04/08 Elastic-tastic...
posted by Gruntfuggly # 22:21 4 comments
No point asking why that works, but...
I have 'small' as my body font-size. Would that have the same effect or does it have to be a percentage? And does it have to be 80%?
My latest CSS issue is with printing tables. I don't want page breaks in the middle of a table row, so have used:
td { page-break-inside: avoid }
This works well in Firefox (it even replicates the table headings on each new page), but doesn't seem to be supported in IE or Safari. Do you know any tricks for solving this one? So far, my only solution would be to generate the printed version using PDFWriter or similar, but that's a lot more work.
Chris # 28/04/08 07:22
Using 'small' (or medium or large) has the expected effect on the fonts (small makes it all go tiny) but doesn't seem to fix the spacing issues.
Other percentages seem to work as expected, but 80% seems to give a good range from smallest to largest. It's smaller than the default (when set to medium) though.
I think you stuck with your page breaks. When I looked I found fair few people with the same problem but no solutions.
Any chance of using a non-table solution?
Gruntfuggly # 28/04/08 10:05
Even if I didn't use a table, I would still want to prevent page breaks in the middle of certain elements.
The other printing nasty is trying to control print page orientation. Again, this can is specified in CSS like...
@page land { size: landscape }
But no browsers (except Opera?) seem to support this either.
If I change my body.font-size to 80%, I get pixel sizing problems in Safari that I didn't have before! I'll look into this (could be I've got some other font-sizes defined that are interacting).
Chris # 28/04/08 10:29
From what I read, I think page breaks might work reasonably well in other elements - it just seems to be recommended not to use them in tables.
Opera does indeed seem to offer the best support from printing pages.
Hmmm - yes, Safari does do something a little bit different - if you make it 100%, it seems to be the same as not specifying the size (no surprise there), and still improves Explorer. Maybe 100% is the way to go...
Gruntfuggly # 28/04/08 14:27
Somebody # 03/12/24 10:25
Add Comment