IE troubles - overflow issue

I created a simple template with common tags. It serves as a quick reference guide for my web development efforts. The web page renders great in Firefox, yet becomes a mess in IE. The HTML and CSS code validates on the server. You may view the template at the following link.

http://neville.f2o.org/IE_overflow.html

These tests relate to FireFox 1.0 and IE 6.0 on XP. Let me know if you encounter further deviations with your browser or OS platform.

Overflow Failure
The pre element has the { overflow: auto; }. Firefox renders the scroll bars while IE extends the entire block beyond the max-width in the #MainContent ID. Why does the overflow override the max-width? In IE, the overflow property causes the entire layout to fail.

http://neville.f2o.org/IE_overflow.html

 

Scrolls sideways on safari (osx).

 

IE doesn't recognize max-width. I also suspect it doesn't apply the overflow to <pre> element. I imagine you have to apply the overflow attribute to a containing div in IE, or else give your <pre> a defined width - %, em, px, etc.

Yes, it looks like you should be applying the overflow attribute to the parent of the <pre> element.

It is talked about here:
http://www.w3.org/TR/CSS21/visufx.html

 

mikmik,
You may want to fix your signature

http://www.bandofgonzos,com/

 

Thanks muchly. I always seem to get one link wrong when I present a finished site to clients