padding and fieldset border issues in IE 2

[rexolio2008]

I have an issue in IE that I'm not having in other browsers (argh) and not sure what else to do about it. They're minor, but would still like to nail it.

1. I have a form where there's a class called .input-instruct which positions text underneath input fields for instructional purposes.

In FF, the text is nicely space and appearing underneath the field. In IE, there's a lot of space vertically. So I added a style for IE that puts a negative margin on that class. It works for the first instance of the class, but then that's it:

http://71.43.125.170/sites/sunshineartist/submit-event.asp

2. In addition, the 1 pixel border around my fieldsets is fine in FF, but in IE the top border continues to run past where it joins with the right border and runs off the page, though it doesn't do that on all fieldsets.

I've included some screenshots so you can see what I see (in case it's just me).

3. Also, I'm noticing another oddity... I have checkboxes and fields on the form that have text next to them describing the option or instructions. In IE, the text lines up nicely with the field. In FF, the alignment is off... it looks the field is set lower and I can't figure out how to get them to align.

 

[Vragabond]

Your fieldsets crawl out of the screen because your spans are 100% wide (meaning the entire fieldset) and have another 175px margin on one of the sides. Thus they are too wide to fit their container. All other browsers just cut them off but IE expands the parent.

I can't really see anything with the vertical gap, but it might help to play around with floats and clears. Namely, try not to make the spans clear any floats.

With the checkboxes, try vertical-align CSS property to try and put them in the correct height with the text.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[johnwm]

Even though most of the 484 validation errors on your page ( see

http://validator.w3.org/check?verbo...125.170/sites/sunshineartist/submit-event.asp

for details) are simply due to missing quotes and unescaped ampersands, it still worth making sure the page validates before worrying about cross-browser layout issues.

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[rexolio2008]

Vragabond,

Thanks for the input. I adjusted the span I placed on the fieldset (in IE) and it worked. Thanks!

Johnwm,

you are absolutely right... I failed to validate it and will work on that. Thank you!