I'm having a lot of trouble getting the label to align with the text field and then the text field to line up with a potential error field. I'm slightly losing my mind at the moment!
Everything works in all browsers except IE7 where there's a horrible alignment issue with the error message not aligning with the text field. I need it all vertically centered but at the moment it's aligning itself on the lower edge. I've added the code below. I'm hoping somebody can help.
You have an old doctype that will trigger quirks mode in IE so use a full doctype with uri.
Conditional comments are html and should not be in the css file itself. You can call the css from within the conditional comments but you can't actually mix CCs in the stylesheet.
Use inline-block for the label elements instead of floating and then apply vertical-align:middle to the label, inputs and error message and they should then align correctly.
If you also use a span instead of the div then you won't need the hacks for IE7 at all as it understand inline-block on elements that are natively inline and indeed in your structure a span is the more semantic element as it lies next to other inline elements.
Thanks so much for your help with this - I shall take a proper look tomorrow as I'm a little exhausted to go through this now. Sorry, I only added the conditional CSS statement in this example - I have a separate stylesheet for IE7. I must have tried most of what you've said but I think in the end I was probably mixing and matching the incorrect items and therefore that's when everything was starting to look like a dogs dinner (umm, wonder where that came from!). I'll reply back tomorrow after fully testing inside my actual page.
Hi Paul_o_b - Just wanted to say thanks so much for helping out with this. Just tested in all browsers and your code works perfectly. Just goes to show it's often worth asking for help as that was taking me hours to do and I still wasn't getting it right - you come along and do so right away! Thanks again.