CSS separates content from design making your sites easier to maintain, faster loading and more search-engine friendly. And if you build basic templates for the layouts you commonly use, just open one up for every new page or site and part of your work is already done.
Certainly using CSS means learning some new code and looking at coding in a slightly different way. But instead of continuing to build sites using outdated code, a little time invested now will save you a lot later.
Read full article »
Using tables to code text-based TGP’s undermines a lot of the SEO potential edge these otherwise content-rich sites might have, by leaving them with a high code to content ratio. And if a little clever CSS isn’t used, they can also suffer from that familiar lag before the whole page pops into view. The advantages of going table-free are not as great for thumb-preview TGP’s, but as this article shows, the code for even a simple site can be reduced by 25%.
Read full article »
Even experienced CSS coders will face a page which doesn’t come out looking as it was supposed to. More often, a page will look fine in one browser but not another. Whether writing HTML and CSS or debugging them, a methodical approach and attention to a few guidelines will make your life a lot easier.
Read full article »
Incompatibilities in the way that different browsers render the same code are infamous and sometimes quite dramatic. Here one such is illustrated… and solved.
Read full article »
Default image positioning in WordPress is left aligned with text following in a new paragraph underneath. Of course this is not the only option, but there are some cross-browser pitfalls lurking for those who seek to be more adventurous.
Read full article »
The humble list offers a rich variety of options for CSS-savvy webmasters and as much as any HTML element, illustrates the potential power of CSS. This article touches on just a few of those options to suggest directions for further experimentation.
Read full article »
Tables were intended as a way to present data which is more comprehensible in tabular form. They became a design tool at a time when there were no better options. But now there is no excuse to be delivering flabby, overweight pages which are expensive to maintain and that cost points with the search engines.
Read full article »
Here are the HTML and CSS you can customize and use to replace tables if that’s how you are currently displaying multi-column toplists.
Read full article »
If you think you have coded everything correctly and your page doesn’t look the way you expected in every browser you use for testing, your doctype declaration - you did use one of course - could be the culprit.
Read full article »
This is an attempt to produce a thumb-preview layout which is both search engine and surfer friendly. It inevitably becomes a hybrid in the process, but some elements can be retained even if you want thumbs only. And did you know that if you size images in em’s instead of pixels, your visitors can make them shrink or grow to suit their screen size and resolution?
Read full article »
Earlier articles have shown how to place thumbnails in a block without the use of tables, but all of them so far have used a single size of thumb. A visitor asked in the forum here how to include one large thumbnail in such a block. The solution - except for having to fix Explorer’s double-margin bug - is very easy.
Read full article »
You created your page, it looks great in one browser and horrible in another. What next? Sometimes the solutions are obvious and other times several small errors are working together to create the changes you see. The only way to catch these and correct them is with a methodical approach to troubleshooting.
Read full article »
Halfway down the page in your new design you suddenly get a space between two lines which you know you didn’t put there. That could be inheritance, although in fairness it is a feature of CSS which not only needs to be understood, but can be used to help you keep your HTML and CSS files as trim as possible.
Read full article »
