I'm new to web design and am having trouble getting the bottom margins in blocks to go away. I have looked at the code through firebug and it says that I need to remove "margin-bottom" in line 1014 of the fusion core style.css. I've done that, but whenever I reload the page, the margins STILL appear and firebug says that the 1.5 em margin is still in the file. Please, how do I fix this - I've been struggling for 2 days to try and correct this issue.

http://www.lamelibrarian.net

Also, I am wondering how I can make the background colors for the sidebar-last and content regions stretch to fill the empty space? I'd like the light and dark grey areas to stretch down to meet the top of the red footer area.

Thank you.

Comments

Deepika.chavan’s picture

Deepika.chavan commented

Hi,
Rename your 'local-sample.css' file to local.css which is there in '/css' directory. If it is not there then you can create one local.css file in '/css' directory. (Please do clear cached data) . Try adding following css code in local.css file to remove bottom margin of blocks. 

.block {
 margin-bottom: 0;
}

#header-site-info {
 margin-bottom: 0.5;
}

The above code will remove bottom margin of all the blocks so you can add bottom margin if you want for particular block e.g in above code I have added bottom margin for header-site-info block.

Rgrds,

Deepika Chavan.

lame.librarian’s picture

lame.librarian commented

Thank you so much, Deepika! I feel like such an idiot that it was as simple as doing that, haha.

Any ideas on the stretch to fill empty space on the sidebar/main content areas so that there's no black space?

Thank you again!

jeremycaldwell’s picture

jeremycaldwell commented
Status: Active » Fixed

@lame.librarian, you can try adding this bit of jQuery to your theme's .js file. I'm not sure what your .js file or theme name is called so edit it as needed.

// Equal height columns
Drupal.behaviors.THEMENAMEEqualHeightColumns = function (context) {
  //Make sure sidebars are at least as tall as the main content area
  if(!$.browser.msie || parseFloat($.browser.version) > 7){
  var $mainHeight = $('#main').innerHeight(); 
    $('.sidebar-first-inner').css('min-height', $mainHeight);
    $('.sidebar-last-inner').css('min-height', $mainHeight);
  }
}

Replace "THEMENAME" with your theme's name and clear the site cache and you should be set. Then you can add a background color to your sidebars and content area and they will be equal heights.

lame.librarian’s picture

lame.librarian commented

eternalistic,

Thanks for the advice, but after trying that out, I realized it was yet more poor CSS knowledge on my part. I managed to figure out that there was a class called "main-content-inner" that lies underneath the columnar divisions, so changing that to the sidebar color gives me the effect I desire.

Thanks for your help!

Status: Fixed » Closed (fixed)

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

espirates’s picture

espirates commented
Status: Closed (fixed) » Active

I tried this code and it does work but only on the full node, not the teaser (front page). Is there anyway to make it work for front as well ?

Update: I see how it works now, it does work on the front as you add more nodes. I was mainly looking at this to add background images to the sidebars and main. It's a start anyway.

espirates’s picture

espirates commented
Status: Active » Closed (fixed)