PE

I’ve often spent time developing column structures for websites. Structure is a good thing and it’s essential to keep your design looking consistent across a number of website pages. Newspapers all run on complex column grid systems and have done for years. Websites are really no different. Even if you have an irregular design, you’ll still benefit from a little underlying structure.

The following shows one of the more common column structures, with splits for 2 to 6 equally spaced columns. It’s based on a 720 pixel width, so will sit nicely on 800×600.

There are a number of other column sets that split nicely into whole (pixel) numbers. Read on if you’re interested.

(more…)

There’s a wide range of opinion on styling form buttons with CSS. Is it even worth it? Different platforms and browsers all render them differently, right?

This article sets out a practical example of 3 varying button styles of increasing CSS complexity and shows how these render for <button> and <input> on a wide variety of platforms and browsers (40 variants!).

The base code is XHTML (DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"):

<input type="submit" value="Submit" />
<input type="submit" value="Submit" class="s1" />
<input type="submit" value="Submit" class="s2" />
<button value="submit" type="submit">Submit</button>
<button type="submit" value="submit" class="s1">Submit</button>
<button type="submit" value="submit" class="s2">Submit</button>
<button type="submit" value="submit" class="s3">
<span>Submit</span></button>

The last button element includes the embedded span tag in a hopeful attempt to see if the classic “Sliding Doors” technique could work to create nice rounded ends. Alas, this proves unfruitful, as there seems to be some kind of inherent padding inside of the button element. It works flawlessly on Opera and Safari though (bless ’em).

(more…)

I recently acquired a job to re-write an existing web application that was written in “old” HTML code. You know the sort, inline styling, unnecessary tags, weird classes, table based layouts nested to the nth degree, etc, etc.

Rather than starting writing shiny new XHTML from scratch, I thought I’d make use of some of Dreamweaver’s capabilities for batch processing and find and replace functionality.

Looking into “Regular Expressions”, I found the answer.

(more…)