Hi,
The following page looks ok when viewing with Mozilla, but when using IE6 it clear:both is not working. and so the fields and labels of the enquiry form are not next to next. Does any one know how to fix it? The page is
Thanks,
RichardActually, it's the clear: both; that's screwing things up. You've got all your form items floated left, but the label tags are cleared on both sides. Really, Firefox shouldn't be displaying the label tags beside the input tags. For some reason IE is showing it right (which is VERY odd).
However, you've got a whole slew of markup errors which may or may not have anything to do with Firefox incorrectly displaying the page: <!-- m --><a class="postlink" href="http://validator.w3.org/check?verbose=1&uri=http%3A//www.gloversure.co.uk/GP/enquiry.htm">http://validator.w3.org/check?verbose=1 ... nquiry.htm</a><!-- m -->
Many of them are from using the <embed> tag, which certaintly isn't a sin. You can use the <object> tag to get the same affect. You've got TR tags placed out of context and no IDs for the form input elements to which the label tags are bound to.
I your case, what you want is some extra markup to get things to display properly in IE. Here's what I normally use:
<p class="formItems">
<label for="foo">Form Item:</label>
<span><input type="text" size="15" name="whatever" id="foo" /></span>
<span class="spacer"> </span>
</p>
Then in CSS
.formItems label {
display: block;
float: left;
position: relative;
width: 30%;
}
.formItems label span {
display: inline;
margin: 0;
}
.formItems span {
display: block;
margin-left: 30%;
position: relative;
}
.formItems span label {
display: inline;
float: none;
width: auto;
}
.formItems .spacer {
clear: both;
height: 1px;
overflow: hidden;
}
It makes things so much more flexible and sure-footed in all browsers. Also, don't be afraid to use tables to lay out a form. After all, form data is tabular data, you just don't know what half of the data is. Your label tags would go inside TH tags and your form input tags would go inside TD tags. Hope this helps.Thanks, I will give it a go
The following page looks ok when viewing with Mozilla, but when using IE6 it clear:both is not working. and so the fields and labels of the enquiry form are not next to next. Does any one know how to fix it? The page is
Thanks,
RichardActually, it's the clear: both; that's screwing things up. You've got all your form items floated left, but the label tags are cleared on both sides. Really, Firefox shouldn't be displaying the label tags beside the input tags. For some reason IE is showing it right (which is VERY odd).
However, you've got a whole slew of markup errors which may or may not have anything to do with Firefox incorrectly displaying the page: <!-- m --><a class="postlink" href="http://validator.w3.org/check?verbose=1&uri=http%3A//www.gloversure.co.uk/GP/enquiry.htm">http://validator.w3.org/check?verbose=1 ... nquiry.htm</a><!-- m -->
Many of them are from using the <embed> tag, which certaintly isn't a sin. You can use the <object> tag to get the same affect. You've got TR tags placed out of context and no IDs for the form input elements to which the label tags are bound to.
I your case, what you want is some extra markup to get things to display properly in IE. Here's what I normally use:
<p class="formItems">
<label for="foo">Form Item:</label>
<span><input type="text" size="15" name="whatever" id="foo" /></span>
<span class="spacer"> </span>
</p>
Then in CSS
.formItems label {
display: block;
float: left;
position: relative;
width: 30%;
}
.formItems label span {
display: inline;
margin: 0;
}
.formItems span {
display: block;
margin-left: 30%;
position: relative;
}
.formItems span label {
display: inline;
float: none;
width: auto;
}
.formItems .spacer {
clear: both;
height: 1px;
overflow: hidden;
}
It makes things so much more flexible and sure-footed in all browsers. Also, don't be afraid to use tables to lay out a form. After all, form data is tabular data, you just don't know what half of the data is. Your label tags would go inside TH tags and your form input tags would go inside TD tags. Hope this helps.Thanks, I will give it a go