When I configure all my blocks to the right sidebar (nothing in the left sidebar) and my default front page is configured as 'node', I get the right sidebar starting under the central node content. This only happens on the front page, all other pages are OK. Do you have any idea why? I have attached a screen shot of the problem, the catalog block is in the right sidebar. I have not modified the style sheet and am not using the local.css option.
Thanks.

CommentFileSizeAuthor
#19 Right Sidebar.jpg81.15 KBcrisigune
#6 DanlandProb2.jpg41.03 KBTerm1nator
#1 DanlandProb.jpg84.54 KBTerm1nator
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Term1nator’s picture

Term1nator CreditAttribution: Term1nator commented
Title: Right sidebar appears under main content on home page » Right sidebar appears under main content on front page
FileSize
DanlandProb.jpg84.54 KB

Sorry screen shot got lost for some reason, so here it is.

danpros’s picture

danpros CreditAttribution: danpros commented

Hi,

It's strange behavior, it work fine in all of my browser. My homepage also work fine with only right sidebar.

Try to clear the cached data under performance.

Term1nator’s picture

Term1nator CreditAttribution: Term1nator commented

Hi thanks for the reply.
I have tried to clear the cache and it makes no difference. Can you think of anything else?

danpros’s picture

danpros CreditAttribution: danpros commented

What browser you are currently use? maybe it's because the beer image is to big, in IE sometimes will get this behavior. But in Firefox will overlap the sidebar.

Term1nator’s picture

Term1nator CreditAttribution: Term1nator commented

I use IE and Chrome. I've tried it in Firefox and it looks the same.

I've done some more investigations and it's caused by Ubercart product page teasers. I'm not a CSS expert by any means so I don't know how to fix it. When I place normal page teasers on my front page, the right sidebar is in the correct place. I haven't changed the CSS of Urbercart, so it's a strange. I think it must be possible to change the CSS to fix it, but it's beyond my ability.

Term1nator’s picture

Term1nator CreditAttribution: Term1nator commented
FileSize
DanlandProb2.jpg41.03 KB

I have highlighted the page items (and attached a screen shot) and you can see that they are all in line and are not overlapping.

danpros’s picture

danpros CreditAttribution: danpros commented

Hi,

Try to fix it via CSS. The following is where I set the content, sidebar left and sidebar right width in 2 column mode

For two column

Main content

.sidebars-1 #content-front{
width: 68%; <!-- change this / this displaying content in frontpage -->
padding-left: 25px;
float: left;
padding-top: 10px;
}

.sidebars-1 #content{
width: 68%; <!-- change this / this displaying content in regular page -->
padding-left: 25px;
float: left;
padding-top: 10px;
}

Sidebar right

#sidebar-side-1 #sidebar-right {
width: 26%; <!-- change this / this displaying the right sidebar on every page in 2 column mode-->
float: right;
padding-top: 10px;	      
}

Sidebar left

#sidebar-side-1 #sidebar-left {
width: 26%;
float: left;
margin-right: 2%;
padding-top: 10px;	
}

You can try to adjust the content size to 70% then sidebar-right 2 column to 24%. You can experiment to pick the right size. Please use local.css so your change will not overwritten if you install future version of Danland. Read the handbook to use this.

The following is where I set the content, sidebar right, and sidebar left size in 3 column mode

For 3 column

Main content

.sidebars-2 #content-front{
width: 54%;
float: left;
padding-top: 10px;
}

.sidebars-2 #content{
width: 54%;
float: left;
padding-top: 10px;
}

Sidebar right

#sidebar-side-2 #sidebar-right {
width: 21%;
float: right;
padding-top: 10px;	      
}

Sidebar left

#sidebar-side-2 #sidebar-left {
width: 21%;
float: left;
margin-right: 2%;
padding-top: 10px;	
}
Term1nator’s picture

Term1nator CreditAttribution: Term1nator commented

Thanks for your help on this one.
I tried to modify the CSS as you suggested but I could not get it to appear correctly. It always appears below the content. It is as though the sidebar is actually in the content section. Maybe the content contains something that breaks the layout, is that possible? Would you be able to tell what's wrong by looking at the HTML ?

Term1nator’s picture

Term1nator CreditAttribution: Term1nator commented

I've been investigating further and the problem is caused by the content type "Product" in teaser mode on the front page. I removed all the elements of the product one by one and found the fault was caused by the .product-body div. There must be some strange CSS styles behind this div causing the layout problem.

I have managed to fix it (bit of a hack I think) by adding this to my local.css

#wrapper-front .sidebar-front {
  position: absolute;
  top: 0%;
  right: 0%;
}

It puts the right sidebar in the correct place on the front page only.

danpros’s picture

danpros CreditAttribution: danpros commented

Hi,

Congrat you resolve the problems :) I'll commit this. And for regular page then

#wrapper .sidebar-node {
  position: absolute;
  top: 0%;
  right: 0%;
}

Thanks,
Dan

Term1nator’s picture

Term1nator CreditAttribution: Term1nator commented

Hi Dan,
I have tested the theme (with Ubercart) in all permutations of blocks and this is the optimum CSS needed to give the best results:

#wrapper-front #sidebar-right {
  position: absolute;
  top: 0%;
  right: 6px;
}

.sidebars-1 #content-front, .sidebars-1 #content, .sidebars-1 .content {
  padding-left: 15px;
}

#sidebar-side-1 #sidebar-right {
  padding-right: 15px;
}

#sidebar-side-1 #sidebar-left {
  padding-left: 10px;
}

It works with left and/or right sidebars or even no sidebars.
There is no need to make any adjustment for the non-front page right sidebar. Also please note that I have modified the style that fixes the right sidebar to "#wrapper-front #sidebar-right" otherwise it was breaking the left sidebar. Again, these changes have been added to the local.css file.

I reckon your theme is now perfect. It's one of the best I've used and is so flexible, with so many block regions and built in superfish menus and banner transition effects. Well done.

Thanks,
Colin.

danpros’s picture

danpros CreditAttribution: danpros commented

Hello,

Thanks Collin for your help.

Please give me the full CSS so I can test it by myself (your changes only), maybe I should install the ubercart too :)

Dan,

Term1nator’s picture

Term1nator CreditAttribution: Term1nator commented

Dan,
The CSS in comment #11 is the complete CSS from my local.css file.

Take care,
Colin.

Yuri’s picture

Yuri CreditAttribution: Yuri commented

In case someone is not helped by the solutions mentioned above:
I also had exactly the same theme symptoms, and no ccs change helped.
My cause was the content of only one node that had 'dirty' html, probably pasted from Word.
You need to track down which node it is, ie by filtering by content type to narrow down your results.
Cleaning up the html or just choosing Filtered HTML fixes it.
For prevention I now ticked the checkbox in /admin/settings/wysiwyg/profile/2/edit 'Force cleanup on standard paste'.

danpros’s picture

danpros CreditAttribution: danpros commented
Status: Active » Closed (fixed)

Hi,

I think the latest version fix this. Please re-open if find similar issue.

Thanks,
Dan

Inte’s picture

Inte CreditAttribution: Inte commented
Version: 6.x-1.10 » 6.x-2.1
Status: Closed (fixed) » Active

Actually I setup a view with enabled pager and run into this issue.

The frontpage looks ok and the sidebar is placed in the wrapper div:

<div id="wrapper">
  <div id="sidebar-left" class="sidebar"> ... </div>
  <div id="content">
    <div class="breadcrumb"> ... </div>
    <div class="content-middle"> ... </div>
  </div>
  <div id="sidebar-right" class="sidebar"> ... </div>
  <div style="clear: both;"></div>
</div>

Sadly the following pages put the sidebar in the content div instead of the wrapper div:

<div id="wrapper">
  <div id="sidebar-left" class="sidebar"> ... </div>
  <div id="content">
    <div class="breadcrumb"> ... </div>
    <div class="content-middle"> ... </div>
    <div id="sidebar-right" class="sidebar"> ... </div> ---
    <div style="clear: both;"></div>                      |
  </div>                                                  |
                                          <---------------- (sidebar belong here!)
  <div style="clear: both;"></div>
</div>

This ends up with a sidebar below my content instead right of.

cartagena’s picture

cartagena CreditAttribution: cartagena commented
Version: 6.x-2.1 » 7.x-1.0-rc2

I am having the same problem, on the two pages where I've enabled content blocks the right sidebar appears within the content block rather than on the right. If I disable the content blocks or move them to another position on the page, for example bottom, there is no problem. But those locations don't work for what I need to do. It's a great theme, thanks for your help.

ss54’s picture

ss54 CreditAttribution: ss54 commented

It happened with me once. It appeared that this was caused by inseting a table tag incorrectly into the concerned article. In you case I think there is a wrong code on your article.

crisigune’s picture

crisigune CreditAttribution: crisigune commented
FileSize
Right Sidebar.jpg81.15 KB

I experienced the same problem with Views Format set to "Grid" and "Unformatted List" so i switched to "Table" format and hurray, the issue was settled. i.e trying changing the Format of the view for the content in the main content area (see attached image) for an example.

Leeteq’s picture

Leeteq CreditAttribution: Leeteq commented
Version: 7.x-1.0-rc2 » 7.x-1.0
Category: Support request » Bug report
Issue summary: View changes
Status: Active » Fixed

This seems to have been fixed.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.