As you might already know, Internet Explorer won’t allow its users to resize a Web Site’s text if its font-size has been defined using pixel units.

To overcome this issue, you need to define your font size using percentages. Percentages define the font size of an element relative to the font size of its parent element, which might be a bit confusing, especially if you’re used to using pixels. But I’ve recently been shown a simple trick that enables you to convert from pixels to percentages :

Most browsers set the font size to the equivalent of 16px by default. To convert the pixel value we need to percentage, we do the following :

• For a 13px text: 13 / 16 = 0.8125 = 81.25%
• For an 18px text: 18 / 16 = 1.125 = 112.5%

The examples should be self-explanatory. We just move the first three digits (from the left) of the results to the left of the floating point to get the percentage value. Note that if the element’s parent’s font-size has been set to 14px (for example), then you need to divide by 14, not 16.

I personally won’t bother with percentages just to support Internet Explorer, but this might be handy in future projects.

One thing that really frustrated me about web design is that every time i wanted to make a web page, I’d first have to set the margin/padding of all of the elements to zero (since different browsers assign different margins/paddings to elements), then re-adjust them to whatever i want. It was convenient, but it got tiresome quickly.

To overcome this frustrating routine, i had to make a reusable style sheet with default properties defined by myself. This way, I’d only need to do quick adjustments whenever i code a new page, since i know how i usually want my elements to look like.

The first line of code in the style sheet sets all of the elements padding and margin to zero; line height to 18 pixels and font family to Arial. I use ‘Arial’ (or sans-serif) most (if not all) of the time, so why don’t i just assign it beforehand to every element?

The second line defines paragraphs’ properties. The third is just a little trick to force FireFox to show it’s scroll bar (since IE constantly show the scroll-bar and i need a way to compare my layouts in both browsers perfectly). The rest of the lines define properties for lists (ordered and unordered), headers, emphasis elements and image links. These properties could be overridden later when they aren’t suitable for part(s) of my document.

Defining default properties beforehand saved me 50%+ of the time i used to spend on writing style sheets. It’s something you should consider if you’re not doing it already.