James Crooke - Web Developer

If your like me, you will not have read a CSS book. To me, CSS is a skill you learn by example and practise. OK, I’ve read a few tutorials here and there, been amazed at how a bullet menu can be turned into a multi-level drop down, etc. etc.

So the other day I was looking at some CSS code that my fellow fish Stu had written and I noticed he had used (something similar to) the following mark-up:

<div class="red left">Hello World</div>

My first thought was “what’s he done now?” then I thought “hang on a minute, Stu’s the man. There must be a reason for this…” I then found that his CSS contained the following:

.red{ color:red; }
.left{ float:left; }

Unbelievable! I had no idea you could add two (or more) styles to a single html element. Now you know too!

As most CSS gimps know, IE (Internet Explorer) is a bit wacko when it comes to standards.

Take today for example, I needed to create a multi-level CSS drop down menu, which I have done many a time before, including on my own site www.cj-design.com, but with this one, the first level of navigation would not be fixed width.

The code looked something like this:

#nav ul li
{
float:left;
width:150px;
}
#nav ul ul li
{
float:left;
width:160px;
}

But as I said, I needed the first level of navigation to fit the text inside, so I did this:

#nav ul li
{
float:left;
whitespace:nowrap;
}

Firefox = Fine
Opera = Fine
IE = Arghh, what are you doing? - I need some reassurance here!

The fix for IE is as follows:

#nav ul li
{
float:left;
whitespace:nowrap;
width:1%;
}

width 1%, how stupid is that? And of course, this breaks Firefox and Opera doesn’t it. The final code ended up using the star hack to hide IE-only CSS…

#nav ul li
{
float:left;
whitespace:nowrap;
}
*html #nav ul li
{
width:1%;
}

I hope Microsoft do a good job with IE7 because this really annoyed me and it’s a waste of time trying to find a solution. Not even position:relative; or height:1%; could fix this one*. Stu agreed that this was a cool fix, therefore I blog.

*usually the following CSS can usually fix IE6 CSS bugs:

position:relative;
or
height:1%;

OK, you’ve seen how to make your website accessible by using a div based layout? No? Get yourself over to Alistapart to learn how to loose the tables!

So you want to know how to make your input forms accessible. For the beginner, input forms are quite hard to make accessible, that is, not using tables but still getting the same effect.

This website and my new website which is still in production both use accessible forms - so how is it done?

First you need the HTML. In these examples we will have 3 fields, Name, Email and Message (you can easily add more fields by following the convention). The form will also have submit and reset buttons (naturally). Therefore, the HTML looks like this:

<div id="contactform">
<form action="contact.php" method="post">
<div>
	<label class="flabel" for="name">Name</label>
	<input type="text" id="name" name="name" size="35" />
</div>
<div>
	<label class="flabel" for="email">Email</label>
	<input type="text" id="email" name="email" size="35" />
</div>
<div>
	<label class="flabel" for="message">Message</label>
	<textarea id="message" name="message" rows="12" cols="55">
	</textarea>
</div>
<div class="indent">
	<input type="submit" value="Send" />
	<input type="reset" value="Reset" />
</div>
</form>
</div>

So what are we doing above? I’ll take you through it…

Firstly we place the form in a container, don’t worry about this at the moment. We then open the form, if you are lost at this stage - you probably want to do a tutorial on HTML forms. The form is posting to contact.php - change this to whatever your script is.

Next we have an opening <div> which holds the form field. We then declare a label for the form field and after that we put the input element. If we don’t have a label for the field (i.e the submit/reset buttons) then we use <div class=”indent”> to indent the buttons to the desired position. Simple! The hard part is the CSS:

#contactform div
{
	margin-bottom: 0.5em;
}
#contactform .indent
{
	margin:10px 0px 10px 95px;
}
#contactform .flabel
{
	padding:2px 10px 2px 0px;
	text-align:right;
	float: left;
	width: 80px;
}
#contactform .formerror
{
	border:1px solid #800000;
}

Thats the CSS you need - as you can see not too hard to understand. The first declaration gives each <div> a bottom margin of 0.5em - this will allow for text re-sizing.

The next declaration for class “indent” gives it a left margin of 95px - this value will change depending on the width of the form label.

Next we have the form label style - which has padding, a text-align right attribute (which you can delete if you prefer left-aligned labels) and a width of 80px. The labels are also floated to the left, so that you get a column table effect.

I have also declared an “formerror” class - this can be attached to input fields if they have been left blank. To use this you would need a script to post the form, check the values then show the form again with <input class=”formerror”…. put in place if the input data was invalid (or non-existant when required).

If done correctly your form should look something like this:

Contact James Crooke!