CSS style problem with Windows XP themes
Ok, I knew that Internet Explorer is highly integrated into the OS, but this issue was new to me…
Smooth 3 column layout, a navigation to the left, some teasers and a searchbox to the right. All three cols have a fixed width. The content area is filled up with a medium complex form. I used fieldset and legend attributes but I don’t want to have a border line all around the fieldset. So I give the fieldset a border:none and let the legend be underlined by a 1px div which has the full with of the parent div container. “All fine” I think and check it in into cvs. Some hours later my co-worker:
- “Hey, this form page you made … kinda messy, eh?”
- “Hu?”
- “The whole teaser area isn’t there where it is supposed to be.”
- “No it isn’t, look at my screen!”
- “Yes it is, look at my screen!”
After some hours of code comparison and several tests we finally figured out the problem. We both work with almost the same notebook, same OS (Windows XP with identical Service Pack and patch status) but different screen resolution (which couldn’t be the problem as we have a fixed layout here) and (here’s the crux!) different windows themes. I’m on “Windows Classic” theme and he has the standard Win XP theme. Funnily the Win XP theme adds a padding to the fieldset element (!!!) so all we had to do was adding a padding:0 to the fieldset css. To be honest, there are much more important things I am willing to waste my time with…
So as a conclusion for you WebDevs out there: Always test your layout on different Windows tehemes aswell 
(Just to make another line on the Mozilla vs. IE list - Mozilla just behaved as expected and all was fine before and afterwards…)