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
Description

When I resize ie6 windows, left sidebar moved to right and overlaps contents.
--
Sharique

AttachmentSize
news.jpg185.2 KB

#1

chrism2671 - April 13, 2008 - 10:10

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

emrsn - April 14, 2008 - 18:20

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

chrism2671 - April 15, 2008 - 15:38

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

Suzy - April 15, 2008 - 16:39

bear with me.. Chris I had it working in test - but will check that fix again on full page test

#5

chrism2671 - April 16, 2008 - 09:10

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

stamd - April 22, 2008 - 00:18

Awesome Suzy, thanks! And thanks Chris for pursuing this.

One question, at the end Suzy mentions

btw.. did you also try the amended column CSS which would allow you to remove the 2 IE fixes (Part 2) of the first suggestion.. that should still work to allow those 2 IE workarounds to go?

-Suzy

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

Suzy - May 4, 2008 - 07:46

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 ;)

 
 

Drupal is a registered trademark of Dries Buytaert.