Blockquotes do have some styling by default. Most browsers will indent the text in a blockquote tag, which helps the user recognize that the text is different somehow. But who’s to say that we need to stop there? Here are six different ways you could style your blockquotes using CSS.

The unobtrusive script gracefully degrades, so if JavaScript is disabled, normal form input objects appear instead of your customized elements. This works flawlessly in Firefox, Safari, Internet Explorer 7, Opera and others. In Internet Explorer, the select lists are unstyled, but the checkboxes and radio buttons still look and function beautifully. Check out the demo.

The technology is pretty similar to that was used on our mediaplana contact site called niceforms (demo here) by badboy. An example is shown below.

If you have a good example for awesome looking forms, please let us know and post it as a comment.

The main features

• No CSS hacks
• iPhone & iPod Touch compatible
• SEO friendly
• Full length column background colours
• No Images
• No JavaScript
• Resizable text compatible
• Stackable columns
• FREE for anyone to use

Examples

There are also other interesting solutions like the german intensivstation provide. It includes a box modell which is horizontally and vertically centered for example.

CampaignMonitor has put together this CSS support in email clients guide to save you the time and trouble of figuring it out for yourself. With 21 different sets of results, all the major email systems are covered, both desktop applications and webmail.

There is also a good article at sitepoint about how to code html email newsletters.

This technique can be very effective for improving site performance, particularly in situations where many small images, such as menu icons, are used. The Yahoo! home page, for example, employs the technique for exactly this.

But there are quite a few high quality typefaces that are available on most new computer systems and you can always fall back on the common ones. Of course there are options like creating images, dynamic headlines, and siFR… but all of these techniques increase load time and development time. There are plenty of good reasons to be strategic in the font choices rather than using additional technology. I am shocked at how rarely I see anyone taking advantage of these type options, so here is a quick and dirty list of fonts you should and could use in your desgns and stylesheets.

There also is a good guide to Pre-Installed Fonts in Linux, Mac, and Windows.

By using a border technique, we can create the effect of diagonal lines with some simple code.

SEO is a very sensible business and there are many ways which swear success, but most of them are pain for search engines. In this tutorial we will use headlines for reaching better results in search engines by using the CSS text indent technology. There is also an german article about image replacement by using CSS.

First, take a look into the source code of Knowtebook and you will find in the beginning lines beneath the body tag following code:

<div id="header">

<h1> <a href=http://www.knowtebook.com/">
Knowtebook - Knowtebook is a social open source community
dedicated to web-developers and designers.</a
</h1>

</div>

The lines of code contains an H1 header-element with the title and the description of Knowtebook. The header is put into a div tag. So what’s so special about it? Well, try to find it on the front page!

Most techniques describe image-replacment tricks which are complicated or are very known by search engines and can lead to be kicked out of their index, because of cheating with content. Knowtebook uses the “text-intend” CSS technology shown below:

#header h1{
margin-top:10px;
margin-left: 0px;
background: url(i/logo-web-300px.gif) no-repeat;
float: left;
text-indent: -9999px
}

The CSS code will take your headline and will place it outside of the screen, but will show a logo instead. This way you can use your H1 elements for your search engine optimation and your nice logo. We have had nice experiences with this technology - what are yours? Please give us your feedback below.

(Quelle links: Webmaster Resource).
Trotz kleinerer Anpassungen bleibt der langweilige graue (bzw. hier blaue) Pfeil und bei längeren Menüs kommen die unformartierbaren Scrollbalken.

Manchmal reicht dies jedoch nicht aus und größere Anpassungen müssen gemacht werden. Und es ist möglich!!

In meinen Archiven fand ich 2 Beiträge aus dem Jahr 2005 die genau dies behandeln (Select Something New, Part 1 und Select Something New, Part 2). Leider scheint diese Art von Technik nicht weit verbreitet zu sein, so dass ich hierfür Werbung machen und neue (bzw. ältere) Gestaltungswege für Formulare aufzeigen möchte.

Für diejenigen unter Euch die gleich loslegen wollen, hier der Code. Ihr müsst ihn nur noch an Eure Bedürfnisse anpassen.

Select Replacement Test Form

Header

 <style type=“text/css”>
body {
font: 80% “Trebuchet MS”, verdana, helvetica, arial, sans-serif;
}
input {
display: block;
margin: 0 0 10px;
border: 1px solid #666;
color: #999;
}
legend {
font-size: 1.2em;
font-weight: bold;
}
label {
display: block;
font-weight: bold;
color: #666;
}
select {
display: block;
width: 300px;
}
select.replaced {
display: none;
}
ul.selectReplacement {
background: url(top.jpg) top left no-repeat;
margin: 0;
padding: 0;
height: 1.65em;
width: 300px;
}
ul.selectReplacement li {
background: #cf5a5a;
color: #fff;
cursor: pointer;
display: none;
font-size: 11px;
line-height: 1.7em;
list-style: none;
margin: 0;
padding: 1px 12px;
width: 276px;
}
ul.selectOpen li {
display: block;
}
ul.selectReplacement li.selected {
background: url(bottom.gif) bottom left no-repeat;
color: #fff;
display: block;
}
ul.selectOpen li.selected {
background: #9e0000;
display: block;
}
ul.selectOpen li:hover,
ul.selectOpen li.hover,
ul.selectOpen li.selected:hover {
background: #9e0000;
color: #fff;
}
</style>
<script type=“text/javascript”>
// <![CDATA[
function selectReplacement(obj) {
obj.className += ‘ replaced’;
var ul = document.createElement(’ul’);
ul.className = ’selectReplacement’;
var opts = obj.options;
for (var i=0; i<opts.length; i++) {
var selectedOpt;
if (opts[i].selected) {
selectedOpt = i;
break;
} else {
selectedOpt = 0;
}
}
for (var i=0; i<opts.length; i++) {
var li = document.createElement(’li’);
var txt = document.createTextNode(opts[i].text);
li.appendChild(txt);
li.selIndex = opts[i].index;
li.selectID = obj.id;
li.onclick = function() {
selectMe(this);
}
if (i == selectedOpt) {
li.className = ’selected’;
li.onclick = function() {
this.parentNode.className += ‘ selectOpen’;
this.onclick = function() {
selectMe(this);
}
}
}
if (window.attachEvent) {
li.onmouseover = function() {
this.className += ‘ hover’;
}
li.onmouseout = function() {
this.className =
this.className.replace(new RegExp(” hover\\b”), ”);
}
}
ul.appendChild(li);
}
obj.parentNode.insertBefore(ul,obj);
}
function selectMe(obj) {
var lis = obj.parentNode.getElementsByTagName(’li’);
for (var i=0; i<lis.length; i++) {
if (lis[i] != obj) {
lis[i].className=”;
lis[i].onclick = function() {
selectMe(this);
}
} else {
setVal(obj.selectID, obj.selIndex);
obj.className=’selected’;
obj.parentNode.className =
obj.parentNode.className.replace(new RegExp(” selectOpen\\b”), ”);
obj.onclick = function() {
obj.parentNode.className += ‘ selectOpen’;
this.onclick = function() {
selectMe(this);
}
}
}
}
}
function setVal(objID, selIndex) {
var obj = document.getElementById(objID);
obj.selectedIndex = selIndex;
}
function setForm() {
var s = document.getElementsByTagName(’select’);
for (var i=0; i<s.length; i++) {
selectReplacement(s[i]);
}
}
window.onload = function() {
(document.all && !window.print) ? null : setForm();
}
// ]]>
</script>

Body

<form action=“#” method=“post”>
<fieldset>
<legend>Sample Form</legend>
<label for=“something”>Select to Replace</label>
<select id=“something” name=“something”>
<option value=“1″>This is option 1</option>
<option value=“2″>This is option 2</option>
<option value=“3″>This is option 3</option>
<option value=“4″>This is option 4</option>
<option value=“5″ selected=“selected”>This is option 5</option>
<option value=“6″>This is option 6</option>
<option value=“7″>This is option 7</option>
<option value=“8″>This is option 8</option>
</select>
</fieldset>
</form>

I can hear you say, “But why don’t you just do a fixed position on it. That’s easy enough.” True, but if you do that then it’s always at the bottom of the screen no matter how tall the window is. So if I have a page with a lot of content that footer shouldn’t show up until the content is done. How do we fix this? Let me show you. Here’s what the problem looks like:

This tutorial assumes a few things: 1. That you know basic HTML formatting, and 2. That you have a pretty good understanding of CSS.

Please also consider to check out another method called sticky footer.