Friday, March 31, 2006

Fun with HTML, CSS and various browsers

So, I'm screwing around with some HTML attempting to determine my preferred way to render forms. I coded the HTML with inline style (all one document). The CSS is version 1 compatible. For text inputs and option selects I tried playing with widths on label tags, putting labels in their own div tag, etc. What seemed to be the most compatible was using the ol'reliable table tag, placing the labels inside th cells and the input/selects inside of td cells. It's a couple of characters more than a div tag, but should render in simple browsers. Radio buttons and check boxes seemed to fit well in ordered lists (with a list-style of none). Textarea tags stand on their own.

I tinkered with the CSS to get things to line up nicely. All sizes (except for borders) use em units.

The first problem I noted was Firefox did not apply formatting to tags inside of a td cell tag. I remember this from the Netscape 4 days back in the age of dinosaurs when I first learned this stuff. To get an element inside a table to format you need to use a selector like form table tr td { formatting; } because any formatting done in the body (like font: small;) must be repeated in the td.

I kept the HTML and CSS as plain and simple as possible; check out the results:

The normal font rendering for Firefox is smaller than IE and Opera's. Also, the 1em; margin on the ul tag seems double the size on Firefox compared to both IE and Opera. Opera renders it's default font much larger than the others. Firefox and IE allow font sizing:

"The nice thing about standards is there are so many to choose from..."

No comments: