Many size are becoming more accessible and are incorperating text resizers into the design. As a general rule for best cross-browser consistancy, you need to do a few of things for text resizer buttons to work well:
1. in the body tag, define a font size of 76%
body { font-size:76%; }
2. Define all font sizes in "em". This is a relative unit, for example:
p { font-size:1em; }
3. Make all text containers dynamic. An example of this not working is
www.joomla.org. If you make bigger, the container for the horizontal menu does not get bigger, if you use FF to go past the size that you can acheive with the buttons (ctrl+ in FF), the layout breaks. You get round it by not putting any fixed heights on containers, you can see this working at
www.joomlashack.com.
4. Download joomla.org's font style switcher file
(
http://forum.joomla.org/Themes/jooml...tylechanger.js)
5. Put that file somewhere in the folder of the template you are using
6. Put A+, A-, and Reset images in your template's image folder
7. Paste the following code snippet somewhere in your template's index.php file
<script type="text/javascript" language="javascript" xsrc="<?php echo $mosConfig_live_site;?> /templates/<?php echo $mainframe->getTemplate(); ?>/____1____">
</script>
<a xhref="index.php" title="Increase size" onclick="changeFontSize(1);return false;">
<img xsrc="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?> /images/____2____" alt="" border="0" />
</a>
<a xhref="index.php" title="Decrease size" onclick="changeFontSize(-1);return false;">
<img xsrc="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?> /images/____3____" alt="" border="0" />
</a>
<a xhref="index.php" title="Revert styles to default" onclick="revertStyles(); return false;">
<img xsrc="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?> /images/____4____" alt="" border="0" />
</a>
8. Do all of the following:
* Replace ____1____ with the location in your template folder where you saved the .js file
* Replace ____2____ with the name of your A+ image
* Replace ____3____ with the name of your A- image
* Replace ____4____ with the name of your Reset image
