When viewing an anchored link (ie: the comments or file attachments on a blog post), the left sidebar shifts vertically upwards with the page content. The result is that part or all of the left sidebar can be hidden.

On the attached image, the top screenshot shows the described behaviour, and the bottom screenshot shows how the left sidebar should look in all situations.

This bug appears in both Firefox 2.0 and IE 7, but I haven't tested it on any other browsers.

CommentFileSizeAuthor
menu_bug.png74.63 KBjgoz@drupal.org
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

jgoz@drupal.org’s picture

I dug into this deeper and it's caused by the equal height columns hack in layout.css. I just deleted this section and it seems to behave properly now. I also haven't noticed any issues pertaining to unequal column heights on FF 2.0 and IE 7.

thecarlhall’s picture

This might just be a clarification of the above post but I removed/commented out the following code in layout.css and the theme began working correctly for me.

#main, #sidebar-left, #sidebar-right {
  padding-bottom: 32767px !important;
  margin-bottom: -32767px !important;
}
AmirTheSeventh’s picture

Priority: Normal » Critical

Change the Priority to Critical, with this bug it's imposible to use the template on a live site.

The same bug reported here
http://drupal.org/node/107697

can someone merge them??

can someone tell us, why we have "equal height columns hack" at all? (I want to understand the negative aspect of removing it)

Frando’s picture

Marked http://drupal.org/node/107697 as a duplicate of this one.

So, here's the story:
Unfortunately, bluebreeze has a layout that is very difficult to implement in CSS, even though it maybe doesn't look as if it would be so difficult:
A 3-column layout. OK. Then, the middle column has to be floated, as otherwise we can't use Drupal 5's new clearing class. That's why we can't use the "Holy Grail" layout presented by A List Apart (I used this in the early versions of bluebreeze, however, some of you might remember the 'content being moved down' bug). Next thing is, I want to have a footer that goes across all 3 columns and not only across the middle one, which means death for another view layout techniques.
Now, I decided to use a technique called "One true layout" that was described on positioniseverything.net first (http://positioniseverything.net/articles/onetruelayout/).
The one thing we still needed then were equal height columns. Bluebreeze currently uses the method described on positioniseverything.net for this task. And yes, this is a big and ugly hack. And this is where this bug comes from. It makes anchors unusable for IE6 and all Gecko browsers. There is a fix for IE6, but so far there I haven't seen any fix for Gecko browsers.
Those interested may want to read this: http://positioniseverything.net/articles/onetruelayout/appendix/equalhei...

So, what are the possibilities now?

I'm not sure.
I don't know of any technique that would fit bluebreeze's need completly (we need 3 columns, middle column needs to be floated, liquid middle column, fixed width sidebars, footer across all 3 columns and the columns have to have equal heights).
Yes, I know that it may sound weird that it may currently not be possible to create a layout in CSS that would be created with tables in 5 minutes. But unfortunately, it is probably true.

Please report back if you know of anything that would fit all these thing here (and that doesn't use tables).

So, now the possiblities I see at the moment:
* just remove the equal height part. This is perfectly valid if you can guarantee that the middle column is never the shortest. If it becomes the shortest, things will look as in the attached screenshot.
* Faux columns. I never used them so far, but they may solve all this. I'll investigate some more here.

Any other ideas?

AmirTheSeventh’s picture

Title: Left sidebar shifting on anchored link (FF 2.0, IE 7) » Sidebars and content shifting up on anchored links (FF 2.0, IE 7, IE6SP1, FF 1.5)

Changed the title to explain the problem better, you know Frando, there is a 2 columns template called "Kubrick" which in many ways is look like bluebeeze exept support for 3 columns; and doesn't have this issue. maybe we check it out???
here is the link:
http://drupal.org/project/kubrick

Frando’s picture

Kubrick is a fixed-width theme, but bluebreeze is fluent (liquid). Therefore, this doesn't help, unfortunately.

shadyman@erroraccessdenied.com’s picture

Just noting that this happens in 5.x-1.1 too

carldnelson’s picture

This is really a nicely put together theme, but the issue with the content moving up under the header really makes it difficult if not impossible to use this theme on a working site. Good luck on finding some way to fix this issue (the Faux column or some other technique).

I wonder if no other CSS method would work, would it really be so bad to use tables (in some limited way) to achieve the layout you are trying to create?

AmirTheSeventh’s picture

it's my question too, what's bad about using tables? can someone explain or post a link to a good explanation?

wonderland’s picture

Well, all I know is that tables are not meant to be used for layouts as they are, well, tables, meant to present content in an organized manner. So there is a formal reason why you shouldn't use them for layouts but I don't know of any practical reason (except that some people may keep telling you that it is as bad decision).

..- Wonderland

diovi’s picture

According to the SEO people I've talked to, If you have a popular site with 5000 backlinks and a competitor with the same number of backlinks and one is SEO optimized with tables, and the other optimized with CSS, the css-only site will rank higher. Apparently the search engines like the simplicity and lack of cluttering code that css-only sites have.

Frando’s picture

Status: Active » Postponed

I removed the "equal heights" part for now. That means, that if the sidebars are longer than the main content, the white background of the main content column does not expand down to the end of the site.
Tables are not really an option for me.

If someone comes up with a way to fix this with css, I'd be glad to commit it.

itapplication’s picture

Status: Postponed » Closed (won't fix)