Whilst testing a site I’ve designed recently I came across a problem in safari where links were not click-able, In addition the form elements did not respond to mouse clicks.

The problem seems to occur when elements are positioned outside the boundary of their containing parent element. I managed to rectify the problem by simply applying a z-index to the positioned element. I’m not sure if this is actually a bug but as Firefox and I.E. both managed OK, I’m treating it as a bug and reporting it accordingly.

Up until recently I relied upon floating form buttons or elaborate text alignment scenarios to get them to sit at the bottom right of a form. I’ve just discovered that a better method exists and is in fact so glaringly obvious I’m surprised I’ve not come across it before.

If you give your input button a class of btn, all that’s required is:

input.btn {
margin-right:5px;/*or any value*/
margin-left:auto;
display:block;
}

that’s it! of course, if you where being fancy (and didn’t care about ie) you could use input[type=submit] in place of the class selector.

I think i may write an article purely about form layout in the not too distant future. I’ve been styling forms for a few years now and it seems that with each new site i discover an improvement to my previous method. If it’s something people would be interested just let me know and it might encourage me to do it sooner rather than later.