Я прочитал несколько вопросов, похожих на этот, перед публикацией, но не нашел решения, которое бы сработало для меня.
У меня есть одна страница на моем сайте, которая не соответствует шаблону, который я использую для каждой другой страницы, потому что таблица информации, сгенерированная для этой страницы, очень широка. Для создания таблицы я использовал overflow-x:visible. Результат - именно то, что я хотел во всех браузерах, кроме IE. Вот как настроены мои теги div:
<body>
<div id="header"></div>
<div id="container">
<div id="left_nav"></div>
<div id="content" style="overflow-x:visible"></div>
</div>
</body>
... и CSS, который имеет значение, выглядит следующим образом:
#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;
}
Проблема в том, что IE не предоставляет мне две полосы прокрутки по оси X, когда ширина окна браузера уменьшается. В результате ширина моего заголовка div остается на указанной минимальной ширине 800 пикселей, в то время как переполнение моего содержимого все еще видно, что приводит к появлению большого пустого прямоугольника в верхнем правом углу моей страницы. Что мне здесь не хватает?