left sidebar content overlaps to right in ie6
Sharique - September 7, 2007 - 10:55
| Project: | bluebreeze |
| Version: | 5.x-1.2 |
| Component: | User interface |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Jump to:
Description
When I resize ie6 windows, left sidebar moved to right and overlaps contents.
--
Sharique
| Attachment | Size |
|---|---|
| news.jpg | 185.2 KB |

#1
Did you have any luck resolving this issue? I have exactly the same problem and it's very frustrating!
I tried installing the IE7 script from here http://code.google.com/p/ie7-js/ but this didn't help much.
#2
I have this problem also below 1152x864 :(
After about four hours i've been stumped on how to fix this argh. If it could work at 1024x768 and greater I don't think that's unreasonable.
#3
I've posted a thread about this here:
http://www.webmasterworld.com/css/3627171.htm
and got a detailed reply.
Despite this, I haven't quite been able to get it to work but if somebody has a go you might have more luck than I. I'm keen to fix this problem so please post your experience, positive or negative.
#4
bear with me.. Chris I had it working in test - but will check that fix again on full page test
#5
GENIUS- You fixed it Suzy! Well done! For all looking to fix this problem, see the thread here:
http://www.webmasterworld.com/css/3627171.htm
#6
Awesome Suzy, thanks! And thanks Chris for pursuing this.
One question, at the end Suzy mentions
I'm confused which additional part are you talking about adding Suzy? Do you mean add this to layout.css
#main, .node .content {
display: inline-block; /* TRIP hasLayout for IE */
}
#main, .node .content {
display: block; /* SWITCH back the display property */
}
/* the above has to be in 2 separate rules */
or do you mean change layout.css by adding the below and commenting what you commented?
#sidebar-right {
/* float: right; */
/* margin-left: -100%; */
float: left;
margin-left: -190px;
width: 174px;
padding: 5px 8px 20px 8px;
}
/* remove the next two rules */
/*
#sidebar-right {
.margin-left: -190px;
}
* html #sidebar-right {
margin-left: -190px;
}
*/
thanks very much!
#7
Hi stamd
yes I meant the second one, the second two rules are both hacks for IE and are not necessary, and potentially unsafe going forward, I'm not a parse hack fan! - So it was just a suggestion to enable the hacks to be removed ;)
[and yes remove the commented bits I only left them in so it was clear which bits were included]
If you actually change the direction of the float on #sidebar-right (I know it seems weird to left float a right column) you can use the -190px left margin for everyone, and in fact it gives better control on where you want the columns.
With this layout you can actually have the columns anywhere even two left columns or two right columns just by adjusting the left margins.
The first one is also a recommendation, even though it turned out the extra wrapper was needed for this theme, it would still be safest if the content div also had its own "layout" for IE (btw that's what the "tripswitch" is doing, though you can use zoom) just to bulletproof it from oddities that might be input.. IE's fault not this themes ;)