I read through several questions similar to this one before posting, but did not find a solution that worked for me.
I have one page in my site that does not fit the template I use for every other page because the table of info generated for that page is so wide. To make the table show I used overflow-x:visible. The result is exactly what I wanted in every browser except IE. Here is how my div tags are set up:
<body>
<div id="header"></div>
<div id="container">
<div id="left_nav"></div>
<div id="content" style="overflow-x:visible"></div>
</div>
</body>
… and the CSS that matters looks like this:
#content {
background-color: #CCCCCC;
bottom:0px;
font-family: Arial,Helvetica,sans-serif;
font-size:medium;
font-weight:normal;
left:270px;
min-width:505px;/* should be 490px*/
overflow:auto;
overflow-x:hidden;
padding-bottom:20px;
padding-left:20px;
padding-right:5px;
padding-top:10px;
position:absolute;
right:0px;
top:125px;
}
#header {
background-color: #5DB259;
font-family: Arial,Helvetica,sans-serif;
font-size: xx-large;
font-weight: normal;
height: 125px;
left: 0px;
min-width:800px;
position: absolute;
text-align: center;
width: 100%;
top: 0px;
}
#leftnav {
background-color: #999999;
bottom: 0px;
font-family: Arial,Helvetica,sans-serif;
font-size: large;
font-weight: bold;
left: 0px;
overflow: auto;
padding: 20px;
position: absolute;
top: 125px;
width: 230px;
}
The problem is that IE is not giving me two x-axis scroll bars when the browser window width is reduced. The result is that my header div width stays at the specified minimum width of 800px while the overflow from my content is still visible, thus causing a big blank rectangle in the upper right hand corner of my page. What am I missing here?
After over a day of messing with this I found that IE8 Compatibility Mode made the page do what I wanted, but unfortunately Compatibility Mode also messed up my JavaScript. I ended up taking the low road and just hacked up my Dynamic Web Template with some PHP to make it do what I wanted. @#$% IE!