I’m helping a friend of the family set up a GP website for their business.
Part of the idea is to help people order their regular medicine online rather than always calling or making appointments.
I have put together a few rough things for now until I get it all working.
I have a basic layout here for the order form, but when I viewed it on their machine (IE7 I think), the form was all down one side and looked awful!
You can get this by switching compatibility mode on and off in IE.
You could still get rid of the breaks by setting the label and the input to display:block in that section and apply margins to the parent div to move each further away (or even margins on the label or input).
However forms are one of the few places where a break can be used to make a line break between elements but in most other scenarios breaks should be avoided when used to just to make space and there is never a time when two breaks next to each other are a good idea.
You would use breaks between the lines of a poem or between the lines in an address. In most other cases a break is nt needed as you can use the margins on the exiting element to control the spacing more accurately.
The problem in IE7 is that you have set a width to the form-right elements which means that there is no room for the form_left element ans so it starts on a new line and clears the form_left element.
In reality it is always better to float both items when you want two columns and avoid all the IE bugs (apart from the double margin bug on floats which can be killed by adding display:inline). Then just make sure that each pair of left and right floats is wrapped in a div that is set to clear:both so that each pair starts level.
Regarding your layout you should not use breaks to make space but use margins on the elements themselves.
The form labels should be in label elements anyway which gives you automatic hooks for styling and positioning at the same time as being semantic.
e.g.This:
<div id="form_right"> Your Date of Birth:<br />
<br />
<input type="text" name="dob" size="24" />
<br />
<br />
</div>
should be something like this:
<div class="form_right">
<label for="dob">Your Date of Birth:</label>
<input type="text" name="dob" id="dob" size="24" />
</div>
Don’t use numerous ids when the styling is the same. Just use the same class. In a lot of cases multiple classes can be avoided by targeting via context instead using a parent id.
I notice you have html comments in your css file which is not allowed and may trip some browsers up. Only css and css comments are allowed in external css files.
