For example, we’re taught that a font-family property should have a list of fonts, in case the first choice isn’t available on the visitor’s computer/browser:

font-family: georgia,"times new roman",serif;

So in this case, Georgia comes first, then Times; and if both are missing, the all-encompassing serif.

There’s two problems with this, however:

• What if no one has the serif font on their computer?
• Making a long list like this can be a performance hit on some browsers – is there a ‘short list’ I can use instead?

To answer the first, serif is a keyword in style sheets, and every browser has a fallback font to fit this. The advantage is that this is ALWAYS present by definition; but if you leave it out, then you’re at the mercy of what browser.

Serif isn’t the only default font – there’s also sans-serif (NOT sansserif or sanserif as it commonly appears), cursive, monospace, and fantasy (you can see examples of each on the W3C.org’s website). Use these, and your designs will always work – approximately!

Now, for the issue of a shorter font list – here’s a web page that shows common fonts for Mac and Windows, and gives you the names to pick. It also offers screen shots from other computers, allowing you to see how the same pages look on other systems. And for a quick reference, this page has a handy graphic comparing fonts.

Looking these lists over, you see why most sites use the same fonts – you can’t guarantee people will get the same visuals across computers if you use an unusual font. By staying with the ‘web-safe’ core, you stay with the most predictable. After all, the goal is to maximize impact with your fonts, and you can’t do that if you’re not sure exactly what your visitor is seeing!

So, on the subject of fonts and impact, it’s perhaps ironic that there is one font that looks the same and is spelled the same across both Macs and Windows: Impact!

The problem is not unique to ABTheme – in fact, any web page that was designed by one person will likely have a layout or positioning not to the liking of someone else.

The technique to position code, text, images, etc. on a web page (or WordPress blog) is quite simple. And although this site is first and foremost blog related, this technique works not just for blogs, but any site:

First, simply wrap the ‘anything’ you are positioning in a <div> tag with an enclosed style attribute:

<div style="">
whatever you need to position
</div>

Next, in that attribute, add whatever you need to position. The best one for this case is the margin command.

margin is a simple way to position objects, since it can include negative values (effectively moving the object ‘in the other direction’). For instance, if the position is too far right, try this to move it back:

<div style="margin-left:-20px;">

You can even adjust more than one position at a time with the general version, which takes in all 4 margins:

<div style="margin:-10px -20px -10px -20px;">

If you’re wondering which number is which, the values rotate clockwise, and like a clock, start from the top; so top, then right side, then bottom, then left side.

And although this example uses ‘px’ (pixels), there are other options, such as ‘em’ (a unit related to the current font), ‘%’ (percentage) or a floating position value (for example, 2.5 for 250%).

Which unit to use? Ideally, you want to match the unit used to describe the space you’re trying to move around in. If the spacing was in em units, use the same; if percentages or pixels, follow it. That way, as the page adjusts size (different users/computers, for example), the change will be the same for each.

Combining this with the <div> tag, you have a solution for positioning objects. While not the only way (for example, padding is a command that can only be positive, but has it’s uses), it is a simple one to get the job done – and often fits the bill.

However, there are other alternatives out there, and using them is of benefit.

For instance, if you try Safari, then you’re using the browser favored by Mac users, and you’re seeing the world though ‘their’ eyes.

A recent one I’ve been trying out is Opera, and I’ve been favorably impressed.

Not because of the features (although they are nice, especially popup tabs that appear right beside the current tab, not down at the end like FireFox does), but because it’s a great testing bed.

Using Opera, you have the benefit of seeing the web in a very nonstandard way, one without the usual IE or Firefox views.

And if you work with HTML, XHTML, Javascript, or CSS, you know that browsers each add a little something to the display. Opera lets you see it from yet another point of view – great for testing web pages (and yes, WordPress themes). I used it while working on my ABTheme, to make it a little more robust.

I’m not suggesting changing to it – but take some time, set it up on your computer, and when you are doing any web development, view the page in it as well as IR and FireFox – just to catch a few more bugs!