Question : CSS IE7 quirky behavior - One word per line

My site is displaying fine in IE8 and FF3, but in IE7 every page starts out with the content being displayed as one word per line, then when a mouse-over occurs on any of the header images it resolves itself.  Also, only in IE7 is an issue with the link buttons on the right being cut off at the end of the button text.  

An example page showing both issues can be found here:  
https://pcmiservices.com/PCMI/DistrictResources/DistrictHome.aspx

Any assistance would be greatly appreciated.

Answer : CSS IE7 quirky behavior - One word per line

Dunno, I don't use the DOM Explorer, your issue is with page load state, the only reason hover "fixes" it is because a reflow occurs (I'm guessing) so changing it back won't necessarily make it reappear, for example, when you've hovered, the width is still 885, yet it looks fine.  

No, I'm not using the DOM Explorer, I'm changing your source files and hitting refresh, this is a more accurate method of investigating page-load-state quirks.  I narrowed the problem down to that property by commenting stuff out until it stopped happening.  It turned out I only needed to comment out the DIV#container style block.  A few iterations later, I could comment everything out of that block except for width:885px to reproduce your problem.  Changing 885 to seemingly any other value fixed it.  Super strange.

--
Lee
Random Solutions  
 
programming4us programming4us