Blogs about xhtml:
Noscript.
The <noscript> element can be used indicate content to be displayed if the desired scripting language (usually JavaScript) is not available in the browser. Here are a couple of finer points about <noscript> that I'd like to remember:
- Even if a browser does have the desired scripting language available, content inside the <noscript> tag is downloaded to the browser, and is available to the DOM. It is simply not rendered. Assets such as Flash files and images are not downloaded by the browser.
- Moving content inside the <noscript> tag can affect SEO. Most search engines do not index <noscript> tag. Even those that do index <noscript> content would not weight it as highly as plain content.
A CSS Styled Form.
Why can't clients just tell me when they go live?!? Are the fifty billion little bullet points that ask them to do so not enough? Gah! Idiots.
Now that I've got that out of my system, I feel it's time I shared some more code with you. I present, the CSS-styled form!
This example is taken from Web Design in a Nutshell, 3rd Edition.
Here's the CSS that gets it done.
<style type="text/css">
body
{ font-family: Arial, Verdana, Helvetica, sans-serif; }
form
{ border: solid #FFFFFF 1px;
width: 28em;
margin: 5px;
padding: 5px;
}
label
{ width: 6em;
float: left;
text-align: right;
margin: .5em 1em;
clear: both;
}
input, textarea
{ font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: small;
margin: .5em 0;
width: 17em;
}
input[type="submit"]
{ float: none;
clear: both;
width: auto;
margin-bottom: 1em;
margin-left: 8em;
}
br { clear: both; }
</style>
Notes:
- The user-interactive fields (input and textarea) do not inherit font properties from the body. This is why I've all the font specifications in the input & textarea section of the style-sheet.
- The magic here is that while the label elements are floated left and have their width fixed at 6em; the text inside them is aligned right. This keeps all the text lined up on the right side. The input and textbox elements are then pushed away from the
- That fancy stuff on the selector for the submit button is the attribute selector. It selects any input elements with an attribute of type set to submit. It's very handy for separating the buttons from checkboxes and radio buttons.
- At one time I desired a method to override the Google Toolbar's auto-fill occaisonal highlighting of form fields. Something along the lines of Disabling IE's Image Resizing would be lovely. However Chris Heilmann made the excellent point that your user chose to see the yellow highlighting by installing the Google Toolbar. But part of accessible and flexible design is allowing a user to interact with your site on their terms.
Dan Cedarholm - Genius.
Dan Cedarholm, CSS guru and advocate, is a genius. I believe I first stumbled across his site while trying the answer the great raisins-in-oatmeal-cookies debate.
I read more CSS/Web Standards stuff and was convinced I must buy his book. It's been well worth the $25.19; way cheaper than taking any course. The proof of his genius:
- DL, DT, DD tag set to keep pictures floated inside a descriptive bit of text. I struggle for the longest time getting the images to behave nicely, and good old fashioned HTML was the answer all along. Behold! Try all you want - the images just can't escape their header and text. Mwa-ha-ha-ha! And it's semantically sound markup.
- Fantastic Tabs built from a list of links look soo classy. You can even add some gradients as background images to give a design more of a "Web 2.0" look. This technique is enhanced and explained in detail in Dan's above-mentioned book.
Dan Cedarholm, thanks for helping me pull my resume out of table-tastic year-2000 design and into the brave new world of all CSS all the time 2006. Non-geek readers: sorry for boring you with the foolishness. Please accept this Thin Mint Recipe.
Also, is it sad if your Animal Crossing character has more skin color that you do?