A library of css classes which I hope will take some (if not all) of the pain out of controlling form layout in pure CSS. It uses a modular approach so each form element is independent of it’s neighbouring elements, allowing you to mix and match and still achieve the desired results. I’m still working on additional classes to allow even more flexibility but in the current version should meet most needs. As well as being completely modular it’s also width independent so should work regardless of the available width, it will simply occupy the width of the containing element, alternatively you can just set width for the form element itself.
note - To eradicate the need for extra html markup this system uses label tags that wrap the form elements…
note - While wrapping form fields in labels is a valid technique in the xhtml transition DTD, unfortunately it isn’t valid ‘Strict’ xhtml. I’m happy to say that I’d miss-understood the validation error, The example has been fixed and is now valid strict xhtml.

Use

once the css files has been attached to your document and the class of ‘mForm‘ added to your form tag all you you need to do is add the appropriate class the the element label and mForms should do the rest for you.

Customisation

As well as using the css ‘out of the box’ there are also constants which can be changed to further customise the appearance.

demo

View example of mForm

Download

Download mForm.css

I’ll try and do more work on this, I’m just putting it out there to try and gauge the interest level. If you want me to motivate me to develop this further, incentives are welcomed.

When designing websites in either Photoshop or Illustrator it’s often useful to be able to define a grid to work to. Because it’s better to keep all the measurments pixel perfect it’s handy to know all the multipliers of your chosen screen width. To make this process as quick as possible I’ve written a small script which will calculate all the multipliers (as well as number of grid squares) of any width you specify.
The Grid Calculator Script is here…’ hope it’s useful.

There’s a number of bizare ie rendering bugs which when i did some investigation discovered were related to an ie property called hasLayout. It’s seems that forcing the value of hasLayout will frequenlty fix these bugs. I’ve come accross alot of methods for doing this but i’ve just come across one that negates the need for any additional styles that have to be hidden from well behaved browsers.

zoom:1

Apparently giving an Element the internet explorer property zoom:1 forces internet explorer to set the hasLayout property to ‘true’. There are also other methods of fixing this bug although this particular one seems to be the least invasive as it’s only understood by interent explorer.

see: Fumle.dk for more info.

A useful filter to add safari specific css

html[xmlns*=”"] body:last-child … +(descendent selector)

origional article

…thats it.

A useful little tool for anyone who needs to quickly sample on-screen colours and copy the hex value to the clipboard ready for use. This simple little program does one thing, and does it well… ( win | 415k | free )
instant-eyedropper.com

I’ve been looking for a free application for managing my to-do list for a while and after trying a number of solutions I’ve finally found one that seems to have all the features I require.

ToDoList Is it.

When a design uses a content area which is centred within the browser window you may frequently notice a ‘jolt’ as you click from a page where the content fits in the window to one where the browser has inserted scrollbars on the browser window.

This is caused by a slight reduction in the body width (and consequently the center line) from one page to another.
You can get round this problem by adding a 'overflow-y:scroll;' parameter to the body.

Unfortunately it doesn’t validate although it is supported by both gecko and I.E. and is simply ignored by other browsers.

A common bug where internet explorer crops or fails to display content within floated elements. The exact cause is a bit of a mystery but the problem can usually be fixed with:


div#floatedelement *{position:relative;}


As with all ie fixes I’d recommend putting it in a ie only css file using conditional comments. There may also be instances where you need to be a bit more selective with the css, e.g. when using relative positioning within the floated element. Quite often thought this can simply be modified to something like

'div#floatedelement * *'

to take into account the depth of the nodes… either way a ‘position:relative;’ will usually cause I.E. to display the problematic element.

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.

the following form uses a google mobile web preview feature to demonstrate a linearised content only page

This form can be used to give you an idea of how accessible the content is without any style of behavour scripts