I'm not really a design kind of person, I like designing things, and I'm learning more and more CSS all the time, but it's the server side coding that I love like Apple Pie and custard.

Recently I've had to do a bit more design work, so I've been tripping all over myself to get CSS working in IE6,IE7,IE8 and firefox. I've learnt a few interesting things in the last few days, and I know I'm going to need to use them again. Some are considered 'hacks', some are just clever CSS techniques. They all feel a bit like secret rules of a club I'm not really a member of yet though.

So I'm making a handy list, so I don't loose them. I hope to refine and add to this on an ongoing basis, so if you know a better / easier way please let me know. After all coding standards are for life, not just Christmas, and I don't like the idea of anything being a hack, even if it is CSS.

Adding a 1px high line to IE

It seems that some versions of IE will display a div without content as the same height as your font size. Add html comments to it to drop it down to the right height:

IE is adding padding and margins to everything by default

I think there is a lot more information about this out there, but for now I've found that adding the code below will kill most of IE's random padding/margin issues.

I've built a JQuery accordion and the content doesn't move correctly

When expanding a JQuery accordion element the content underneath it is not moving down, and the accordion is expanding over it. This was a simple fix, but a bit of a pain to find. Just do not specify a height attribute on the div that hold the accordion, IE will stick to the height, but firefox will let it grow to be longer.

Styling form element borders

If you have a CSS rule like the one above that removes all the margins, padding and borders then all your form elements will have no border. IE your text fields and textareas etc will not have a clearly defined edge to them. By adding the line of CSS under this (select,input, etc) you can set the style width and colour of your form elements so that you control them, rather than the browser defaults. In Internet explorer this will also add borders to the checkbox and radio form elements. There does not seem to be any way of writing a CSS style to remove this inherently, so create a style of borderless and set all your radio and checkbox fields to "class=borderless".

Strange IE positioning fix

Sometimes in IE (mainly 6) using position: absolute just does not render the div on screen. I am not sure why. Adding a "clear: both;" or a "clear: left;" or a "clear: right;" appears to fix this.

Easy centering of elements

I used to struggle with centering elements on a page all the time, but now you can do something like this:

This will center a block of text and give it a width of 6.

For images you can do this:

That will auto center the image inside its containing div.

I was discussing some ideas for an application framework this morning with the team, and one of the issues we hit upon was having a common directory for templates, but serving them up as if they were from a different directory.

The idea is to have one instance of a reusable skinnable template, that appears to live on several sites.

IE all the content lives in "webroot/content/templateName.cfm", but is actually served up by many sites, IE "127.0.0.1/site1/template1.cfm", "127.0.0.1/site2/template1.cfm" ... etc

In this way they can be re skinned or adapted as needed, and they aren't database driven. The main stumbling block for the discussion was the need to actually create blank versions of each of the named templates, in each of the sites, as ColdFusion server would error on the request.

I spent twenty minutes trying to work it so that my Application.cfc's onRequest or onRequestStart method would intercept the request before it was actually made, but that just wasn't working. My other idea was to use the onMissingTemplate method, but the server is only running ColdFusion 7, so that was a no go (I figured I could catch the missing template request and just re path it, although I'd have to assess if that was really inefficient due to almost every page request logging as failed).

My eventual solution was Isapi rewrite. I am re writing all the requests to the same template, and just passing in the template variable. In that way I can request pages that don't actually exist, but they appear in the url.

Create an index.cfm template like this:

For this example I am using the free version of Helicon's Isapi rewrite, you can get it here: Link to Helicons Isapi re write

In the example below I have altered the first page link to look like it is actually a .cfm template request, just in case you want the url string to have a .fileextension look to it.

So when you fire it up and test it you just see /page1, /page2 etc, and the pages don't actually exist.

I'm not experienced enough with Isapi rewrite to know if there is a downside to this, but bookmarking in a browser still works correctly, so I can't see an issues at present.

Whilst building a form recently I hit a real noob stumbling block. I was trying to set a select value to selected if the value had previously been submitted, something like this:

Pretty straight forward, you'll all agree. The issue comes in where I had entered selected="selected". This isn't the correct code for a select option.

Handily Firefox will cache the form structure and form data, so that when you refresh the page it just loads up the cached version. This is great if you coded it correctly, otherwise it happily serves you up your coding errors again. So don't refresh your forms in testing.

Add ?test=1 or something to make the request a new URL.