SpreadFireFox theme causes 'major' white space on certain pages.

This is not a duplicate.
Although related to the problem discussed in the link provided, the problems and fixes there relate to the Civicspace theme, not to the SpreadFirefox theme.

Note that this problem is solved in the new version of the Civicspace theme, so you may want to give that theme a try, since it's pretty similar to Spreadfirefox (which is based on the Civicspace theme).

The workaround suggested at http://drupal.org/project/spreadfirefox of removing drupal.css is too radical and generates tons of problems (particularly the left margin on most blocks based on invisible bullet lists).

Most of the issues can be addressed by commenting the clear: both; and float: left; lines on misc/drupal.css

On a recent site, where I'm not using book pages/navigation or the aggregator, I took care of the problem by commenting the following on misc/drupal.css:

/*
.node-form .standard {
  clear: both;
}
*/

.node-form .admin .authored, .node-form .admin .options, .node-form .admin .extra {
/*  float: left; */
  margin-right: 2em;
  margin-bottom: 1em;
}

.profile {
/*  clear: both; */
  margin: 1em 0 1em 0;
}

However, as the site grows and book, aggregator, etc. functionality is required, I suspect I would have to further debug the theme.

My best bet is to take the new Civicspace theme, which has solved this issue and add the nice tabs from Spreadfirefox to it, which is the only thing I like better in it ;-)

You will also need to make the following change at the end of themes/spreadfirefox/layout.css

br.clear {
/* 	clear: both;*/
	clear: none;
	}

Although, someone suggested at http://drupal.org/node/17844 to add the following as a global solution the following lines at the end of themes/spreadfirefox/layout.css

.node-form .standard,
#aggregator .news-item, #aggregator .news-item .description,
.itemlist .icon,
#pager,
.book .nav, .book .nav .links, .book .nav .titles,
#node-admin-buttons,
#access-rules .mask
.poll .bar .foreground,
.profile,
br.clear {
  clear: none;
}

After spending the entire weekend exploring the different solutions presented and workarounds, the only one that completely works for me is adding a simple table to the template.

I know, many of you don't want to hear the word table, I didn't either. But believe me it's completely transparent to the layout, programming, functionality, etc. and the final result is what you expect.

Even better, this solution does not require any changes to files other than the theme site files.

I downloaded a fresh copy of the SpredFirefox theme Release 4.6.0, 15/04/2005 - 23:15 at http://drupal.org/project/spreadfirefox

I then added a single table, with 3 columns to fix the problem to the page.tpl.php and changed border to 0 for the table style of the content id in style.css

That's it. Problem solved without messing around with any file in the Drupal distribution. Just a couple of small changes in those two files of the theme.

I'm uploading my updated files in a zip file in case anyone wants to use them or anyone is kind enough to turn them into a patch.

Note that these files are for Release 4.6.0, 15/04/2005 - 23:15 of the SpredFirefox theme at http://drupal.org/project/spreadfirefox

Cheers.

ps: this solution was first sugested and is based on http://drupal.org/node/20507

Works great! Now...would this also work for Democratica? I have same sort of issue with that theme as well...

They're all the same problems since I used the same approach on Democratica, Spread Firefox and Lincoln's Revenge. I solved this problem with the CivicSpace theme but I haven't had a chance to port any of these three to the new technique yet.

I enabled primary links and I love the tabbed look, just one problem, it causes my right side of the page to move waaaaaaaaaaaaayyyyyyyyy over. How do I stop it from doing this? This is one of the nicest themes I have looked at.

Also, I cant get your civicspace theme (any of the ones in the download) to work. I get array merge errors when I try to use them. Posted an issue about it...thanks

Just noticed that with my above fix the view/edit/track tabs don't show for users on their articles on Internet Explorer.

The fix was to remove class="centercolumn" from the td I introduced back as a

I used your patch
It works well except in "Settings " page. there is someting wrong in width。

Problem solved!! (I hope so...)

Try this:

1. Leave all those "clear: " statements in misc/drupal.css uncommented. They are causing the troubles, but we will implement a more fundamental solution.
2. In layout.css you add
   

   .centerpadding {
   	float:left;
   }
   

3. Check it out on your site! You can see the fix in action over here: http://www.tortels.be/contact (book page) and here: http://www.tortels.be/saamdagen for a comment form.
4. If you are interested, you can take a look at the usenet discussion where I got this solution.

Is this working for your site too??

The centerpadding fix worked for firefox, mozilla and konqueror, but not IE. I've tested it on win2k IE6. When I maximize the page it displays correctly, but when i make is smaller everything on the page (from the gallery module) moves below the blocks that I have.

Hi,

I think I've fixed it.. I dont understand how.. I think I stumbled on the solution by mistake.. :-)

take a look and let me know if I've left out anything..

This is based on the original spreadfirefox theme, I didnt use any patches before working on it.

in page.tpl.php - Change to:

  <!-- start main content -->
    <div class="thefix">
      <?php print($content) ?>
    </div>
  <!-- end main content -->

in layout.css Add in the end:

  .main-content {
    clear:none;
  }
  .thefix .profile{
    clear:none;
  }

and you're done.. or atleast my site started working fine.. take a look http://www.ahste.com

if you have any trouble with too much white space:

• check the html code for the 'div class' after the whitespace
• place that whole 'div' inside [div class="thefix"]
• in layout.css Add in the end:
  

    .thefix .[class of the div after whitespace]{
      clear:none;
    }
  

contact me if you're having any trouble..

-Gautam

I have a patch, attached, that at least fixes the whitespace problem for the aggregator page(s).

How I fixed my whitespace issues for all browsers:

First, I applied this fix:

In layout.css add in the end:

br.clear {
/*      clear: both;*/
        clear: none;   //Fix whitespace
        }

Then, at the top of layout.css:

body
        {
        width                           : 965px;  //Force width to fix whitespace
        margin                          : 0px;
        padding                         : 20px;
        }

So, forcing a width seems to help the most. This pixel width will only work for people who view the page at a res of 1024x768 and above, but you know what? It's nearly 2006. If you're still at 800x600, you deserve whatever you get imnsho.

In the layout.css file, you can force a page margin and set the width to "auto" instead of my above pixel width to center the body, but if you have a picture or something in the body, and the browser viewing is at a low res, the picture will encroach on the right blocks. So forcing a static width forces scroll bars to come at a more appropriate width.

I'll post back with the finished product, but I have found that those two things work the best.

I'm no expert, and am learning this all on the fly, so if I'm out to lunch, let me know.

HTH.

I love FF, I do most of my development with FF, I design, debug, fix, and make beautiful with FF.

Then I check with IE. The horror begins.. Most of the white space issues I have seen occurs in IE.

Here is what I have done.

• checked misc/drupal.css for all clear: [left|right|both] and created a similar rule with a clear: none in style.css, as with
  

  .book .nav, .book .nav .links, .book .nav .titles {
    clear: none;
  }
  .node-form .admin,
  .node-form .authored,
  .node-form .standard {
    clear: none;
  }
  #pager {
    clear: none;
  }
  #aggregator .news-item {
    clear: none;
  }
  #aggregator .news-item .description {
    clear: none;
  }
  #access-rules .mask {
    clear: none;
  }
  .profile {
    clear: none;
  }
  

• I then tried to fix some form elements to _not_ have a with of 100% for IE - I sent them to 93% instead - why? you may ask - 'cause it works
  

  .main-content form {
    width: 93%;
  }
  .main-content form .form-text,
  .main-content form textarea,
  .main-content form#node-form textarea#body,
  .main-content form textarea {
    width: 93%;
  }
  #attachments, .attachments, .links {
    clear: none;
    width: 93%;
  }
  .event-calendar div.tableview {
    width: 93%;
  }
  

• I still have the admin/access page to correct - but the best solution there is _not_ to display blocks in the right side bar when in admin/access.
• I then fix FF and all the other browsers by
  

  tml>body #attachments, html>body .attachments, html>body .links {
    width: 100%;
  }
  

I know that some of these 'fixes' should go into module.css - they will when I figure them out.

Paddy.

Sorry! I did not realise that by changing the title - the entire thread would change - i thought that it would just be the comment,

Paddy.

i applied some patches to fix the whitespaces. If you still see some whitespaces, feel free to reopen the bug.

and it's still there I think.

the box of the menu disappears - only the menu items are there and the main content begins und the nav- box.
it seems that this only happens when you have a page full of forms.
"normal" pages with text are there, where they should be.

the hacks above dont work - some of them do nothing and others destroy the layout in another way(eg the nav- box header is too width and does not fit anymore the rest of the nav- box).

tested with FF, IE and all files from the cvs and drupal 4.7.

Spreadfirefox and Drupal 4.7.2

Wow this is a mess... Once adding the tables to the theme in page.tpl.php and the alterations in layout and style.css files (from this file Attachment: fix4whitespaceinspreadfirefox-460-15042005-2315_1.zip (9.29 KB)) the menu at the left just came unhinged! Not mention that even in firefox it displays without any alterations for the tables, two sets of navigation icons, the spread firefox(nice ones) and the ugly lil default ones out to the left in the margin. LMAO!!

This really bad, anyone have a spreadfirefox theme that just works in 4.7.2??

I gotta move on cause this is driving me nuts and my dog is thinking I have lost my mind, and runs for the door. (she's right!)

thx

hedge

this theme is not yet for 4.7!! the cvs version is modified for 4.7 and usable.