Marti's blog

Flexible HTML layouts are designs that adapt to the user screen and browser window by not using "hard" width and height: using CSS, sizes are set in percentage and not in pixels. In a time and age where users have screens ranging from 320x240 pixels (PDA and smart-phones) to 2540x1600, I think this is a great quality for any web site to have. Flexible layouts however are harder to do, because it's hard to get them to look pretty at varying screen sizes (large resolutions tend to make the page look empty, and at small resolutions it might look too crowded).

There's another hurdle that goes with making flexible layouts: getting form fields to be as flexible as other elements isn't as easy as it's supposed to be. Normally, all you have to do is set a CSS rule such as input, textarea { width: 100% } and your field is supposed to stretch to the width of its containing element. Well, as I found out this week, neither Firefox nor Internet Explorer (6 or 7) can get this right.

Firefox

It's the least buggy of the bunch, but it still has issues with textarea elements set to 100%. The trick is to go for a slightly lower value like 99% or maybe a bit lower depending on your situation. As it turns out, this also helps with Internet Explorer.

Internet Explorer

Both the 6 and 7 version have issues. The 6 is the worst and I have had great difficulties to get fields to flex properly. In the end I've found a hack that puts different CSS for version 6 and other more modern browsers (including version 7). I've always refused to use any non-standard trick to apply different CSS rules to different browser, but this one is 100% standard and quite clean:

input, textarea { width: 30em }
input[type="text"], textarea[id="IdOfTextarea"] { width: 99% }

With these rules, all elements are first sized to 30em, then browsers who are compatible with attribute selectors will apply the following line to elements with the proper name, type or whatever attribute you use to select them.

However I've still had difficulties going on with Internet Explorer 7 and textarea. Adding a style="width: 100%" to a container such as a div has managed to get the thing right.

There's a bunch of HTML tags we use all the time, sometimes too much, like div which some people feel they must put around every possible other tag. Then there are some that we rarely use, for lack of opportunity or lack of knowledge. But if you have any commitment to making your web pages easy on users, search engines and peoples with disabilities, then you might want to have a second look at the followings:

1. <abbr title="Abbreviation">Abbr.</abbr> The abbreviation tag is used to mark-up... abbreviations. Use the title attribute to give the full word that you abbreviate (browsers will usually render it in a way that let's people find out about it).
2. <acronym title="Personnal Computer">PC</acronym> Works pretty much like the abbr tag, except this one is for acronyms (you do know the difference, right ?).
3. <label for="username">Your user name</label> The label tag is used to mark a portion of HTML as the label for a specific form field (text, checkbox, etc.). It's very useful for blind people as their web browser will be able to figure out what each form field is about, even if labels are not located next to their relevant field. For a graphic browser like Firefox, clicking on the label content puts the focus on the relevant field. Use the for attribute to give the id if the form field you want to label.
4. <address>John Doe, 12345 main Street, Somewhere</address> Well this one is self explanatory. HTML inside it (line breaks and such) is of course allowed.
5. <fieldset><legend>About you</legend>...</fieldset> The fieldset tag is used to group relevant parts of form fields together. If you have for example a big form with a section for the user, a section for his preference, etc. then you can group fields into fieldsets, and use the legend tag to name the section (saddly the default visual effect looks much better in Internet Explorer than Firefox, but you can style this tag with CSS).
6. <del>Some deleted stuff</del> The s and strike tags are deprecated because they carry no semantic information and you can render striked text with CSS. But if you want to mark something as deleted (and not just text either), there's the del tag that by default renders text as strikethrough.
7. <... lang="fr">du texte en français</...> OK this one is not a tag but an attribute that most HTML tags support. The lang attributes lets you define part of your page as written in another language, and since it is also available on the html tag, to also defines the default language of your whole page (important for search engines).
8. <tbody>...</tbody> Tables have been around for a while, but few people use the thead, tbody and tfooter that marks which row(s) represent the head, body and footer of their table (for example Firefox makes use of them when printing tables over multiple pages).
9. <noscript>Turn on your Javascript !</noscript> The noscript tag lets you display something if (and only if) the browser doesn't support Javascript (or has it turned off). Rather than letting users with such browsers in the cold because your nifty scripts can't run, you can use this tag to give them an alternate content to see.
10. <button type="submit" name="submit_button" value="1">My pretty button</button> Everybody has gotten used to making form buttons with the input tag. However these buttons are text only and requires some CSS trickery to make them a bit pretty. Well the button tag is another way of doing form buttons, but it has the advantage of accepting any HTML (including images) within it, so you can be more creative.