If you view this page as an example:

http://www.hipmama.com/blog/8572

...with IE 6, the left-hand column overlaps onto the main content. I'm not sure what to alter in ie.css to fix this behavior, which appears to only be on the blog pages--not individual entries, just the overviews. Screenshot attached. Thank you.

CommentFileSizeAuthor
msie6-trouble-pixture-reloaded.png197.27 KBLynnS
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Jeff Burnz’s picture

Probably a hasLayout issue, not seen this before, bit odd since I haven't really changed that much with regards to the layout in recent versions.

I am only seeing this when I resize below 1024 browse width, still, the left sidebar should stay pinned to the left and never drift over the content.

Jeff Burnz’s picture

Category: bug » support

I do not see this issue on the test site unless the width is very narrow, which is why one should set a min width. However your site is not that narrow so I have to assume that you have made some changes or installed a module that is messing with the CSS.

tom_brennan’s picture

It is fairly easy to replicate this bug. See examples at http://test.ufnsw.com.au/node/3 or http://test.ufnsw.com.au/node/1

These are on a test site with a basic Drupal 6.13 install, but no installed modules so there shouldn't be anything interfering with the CSS.

It appears to be caused when there is an item in the centre column that is too wide for the screen size. In the case of the Hip Mama blog, the North Carolina bumper sticker is causing the problem. In IE6 as you narrow the physical width of the browser, the left sidebar moves at the same rate to the right. In other browsers this works fine.

Tom

tom_brennan’s picture

Category: support » bug
Jeff Burnz’s picture

Status: Active » Closed (won't fix)

It appears to be caused when there is an item in the centre column that is too wide for the screen size.

Theres your issue, seems you can resolve it by *not putting* something too wide for the centre column.

If you know this to be a bug, can you please reopen the issue and point it out to me.

tom_brennan’s picture

Status: Closed (won't fix) » Active

In the case of designing for IE6, I don't know where to draw the line between a bug and something that you just need to work around. If the problem only occurred when the browser window was unreasonably small (say below the 800px set as min-width) then I would agree with you that it's not worth fixing.

But if I put a 400px wide image in the centre column - which I've done at http://test.ufnsw.com.au/node/3 - then I can only get the browser down to 1070px wide before the left sidebar starts to detach. 400px is not an unreasonably wide image, and nor is 1070px an unreasonably small screen size (1070px > 1024px, which plenty of people still use).

Also, you said yourself in comment 1 that "the left sidebar should stay pinned to the left and never drift over the content."

So I would say this is a bug

It's mentioned several times in the comments to the A List Apart article on the Holy Grail
http://www.alistapart.com/articles/holygrail/
but unfortunately no-one provided a template fix. I'll keep looking.

cheers

tom_brennan’s picture

I've found a bit more info. This bug is covered pretty well at
http://www.positioniseverything.net/explorer/expandingboxbug.html
and while it doesn't provide a magic bullet, it does give a couple of workarounds.

I'm testing a solution on my site by adding a few lines to my CSS overrides file -
#header,
#content,
#navbar,
#sidebar-left,
#sidebar-right,
#footer,
#closure-blocks {
_overflow: hidden;
}
On first look it seems to be working. The left column stays fixed even when the screen is resized. Not particularly pretty CSS, and it doesn't validate (but then neither does mask() or word-wrap in the release version). The _ before overflow hides it from anything but IE (versions 6 or below). This could also be done in the template using conditional comments, but it's less change to try this first.

cheers