Apologies if this is an effin' newbie question, but after two days of searching, I'm stumped.
I'm using the Bluebreeze theme and everything looks peachy-keen in Firefox. On IE7, however, the page is consistently rendered just slightly wider than the window, creating a scrollbar at the bottom, no matter if I have the browser in a window or fully expanded.
I've tried tweaking layout.css to see if I could klutz my way through a fix, but every time I change a container width, it breaks the layout badly - even a single pixel change. For example, my current layout.css has:
#main-wrapper {
float: left;
width: 100%;
}
#main {
margin: 0;
}
.withleft #main {
margin-left: 190px;
}
.withright #main {
margin-right: 190px;
}
#sidebar-left {
float: left;
margin-left: -100%;
width: 174px;
padding: 5px 8px 20px 8px;
}
#sidebar-right {
float: right;
margin-left: -100%;
width: 174px;
padding: 5px 8px 20px 8px;
}
#sidebar-right {
.margin-left: -190px; /* IE7 Fix */
}
* html #sidebar-right {
margin-left: -190px; /* IE6 Fix*/
}
#footer {
clear: both;
} Is this a known bug in IE that I am too stoopid to find or is there a hack to layout.css to fix it? I've tried tweaking the IE fixes above with no luck.
Thanks
RB
Comments
Sounds like an Overflow issue
Have you tried to reset your overflow? For some reason, when set to overflow:auto, IE7 crates a horizontal scrollbar. This scrollbar will most likely overlap some of the content on your page, so a vertical scrollbar is also added. So leaving you overflow to auto will cause the code to always have two scrollbars in IE7, and only one in Firefox.
overflow: hidden
Myst Powers
Geared Design