Post by Bradley on Jan 9, 2006 13:23:07 GMT -8
Since a lot people seem to think the text size on here is to small I wrote this up. Unlike other simple CSS codes this allows you to set the sizes of each size font to a specific number. First add this to your global footers, further down the better:
<script type="text/javascript" defer="defer">
// Font Fix / Font Scaling - CCWorld
var fonts = document.getElementsByTagName("font");
for (i=0; i<fonts.length; i++){
if (fonts.item(i).size.match(/\d/)){
fonts.item(i).className = "fontFix" + fonts.item(i).size.replace("+", "Plus").replace("-", "Minus");}}
</script>
Pick one of these. The first appears to be the default sizes exactly, at least in Firefox:
<style type="text/css">
.fontFix1, .fontFixMinus2, .nav, .nav:link, .nav:visited, .nav:hover { font-size: 10px !important; }
.fontFix2, .fontFixMinus1, a, td { font-size: 13px !important; }
.fontFix3 { font-size: 18px; }
.fontFix4, .fontFixPlus1 { font-size: 22px; }
.fontFix5 { font-size: 24px; }
.fontFix6 { font-size: 36px; }
.fontFix7 { font-size: 52px; }
</style>
This one is a bit bigger:
<style type="text/css">
.fontFix1, .fontFixMinus2, .nav, .nav:link, .nav:visited, .nav:hover { font-size: 11px !important; }
.fontFix2, .fontFixMinus1, a, td { font-size: 15px !important; }
.fontFix3 { font-size: 19px; }
.fontFix4, .fontFixPlus1 { font-size: 23px; }
.fontFix5 { font-size: 28px; }
.fontFix6 { font-size: 38px; }
.fontFix7 { font-size: 56px; }
</style>
This last one is even bigger than the second:
<style type="text/css">
.fontFix1, .fontFixMinus2, .nav, .nav:link, .nav:visited, .nav:hover { font-size: 14px !important; }
.fontFix2, .fontFixMinus1, a, td { font-size: 18px !important; }
.fontFix3 { font-size: 20px; }
.fontFix4, .fontFixPlus1 { font-size: 24px; }
.fontFix5 { font-size: 30px; }
.fontFix6 { font-size: 40px; }
.fontFix7 { font-size: 60px; }
</style>
<script type="text/javascript" defer="defer">
// Font Fix / Font Scaling - CCWorld
var fonts = document.getElementsByTagName("font");
for (i=0; i<fonts.length; i++){
if (fonts.item(i).size.match(/\d/)){
fonts.item(i).className = "fontFix" + fonts.item(i).size.replace("+", "Plus").replace("-", "Minus");}}
</script>
Pick one of these. The first appears to be the default sizes exactly, at least in Firefox:
<style type="text/css">
.fontFix1, .fontFixMinus2, .nav, .nav:link, .nav:visited, .nav:hover { font-size: 10px !important; }
.fontFix2, .fontFixMinus1, a, td { font-size: 13px !important; }
.fontFix3 { font-size: 18px; }
.fontFix4, .fontFixPlus1 { font-size: 22px; }
.fontFix5 { font-size: 24px; }
.fontFix6 { font-size: 36px; }
.fontFix7 { font-size: 52px; }
</style>
This one is a bit bigger:
<style type="text/css">
.fontFix1, .fontFixMinus2, .nav, .nav:link, .nav:visited, .nav:hover { font-size: 11px !important; }
.fontFix2, .fontFixMinus1, a, td { font-size: 15px !important; }
.fontFix3 { font-size: 19px; }
.fontFix4, .fontFixPlus1 { font-size: 23px; }
.fontFix5 { font-size: 28px; }
.fontFix6 { font-size: 38px; }
.fontFix7 { font-size: 56px; }
</style>
This last one is even bigger than the second:
<style type="text/css">
.fontFix1, .fontFixMinus2, .nav, .nav:link, .nav:visited, .nav:hover { font-size: 14px !important; }
.fontFix2, .fontFixMinus1, a, td { font-size: 18px !important; }
.fontFix3 { font-size: 20px; }
.fontFix4, .fontFixPlus1 { font-size: 24px; }
.fontFix5 { font-size: 30px; }
.fontFix6 { font-size: 40px; }
.fontFix7 { font-size: 60px; }
</style>