CivicSpace Header PNG Transparency

it also happens on the node editing screen as well

That is really weird.

I tested it with Firefox and MS IE, and they both have the same problem on the PoleVaultPit web site linked to above.

We will have to refer this one to Chris Messina. Setting to critical so he will get an email on it.

The problem seems to be the <br class="clear" /> that is generated before the links when user pictures (a.k.a. avatars) are used. This br is meant to keep the links below the picture for very short nodes (or very large pictures), but, in this case, the br pushes the links down below the blocks. I can reproduce this on my site as well by enabling user pictures.

thanks for spotting the problem, atleast I know where to start looking for a workaround...i'll be sure to post if I come up with something before anyone else does

I turned off the avatars in posts, which fixed the main page, but its still happening on the aggregator page and other pages I listed. I'm not seeing any <br clear="foo"> tags in the src anywhere on those pages, so i'm not sure that is the culprit in these cases.....

The problem is almost 100% drupal.css.

And this is a much larger problem that goes to the core of laying out three column designs with floated items that are eventually cleared than anything else. In every theme I've created for Drupal, this has been a problem, including Democratica. The solution so far has been to remove all "clear:both" rules, particularly those introduced in drupal.css.

Here is what I would like to do: I want source ordered content and I want to not use negative margins. Steven has done some work to this end, but I'm not sure his solution will work for us yet.

In any case, I've been aware of this problem and would be interested in pioneering a more permanent solution for 2 and 3 column layouts that takes care of this float & clearing problem.

Changing title to better reflect problem.

There were two duplicates:
http://drupal.org/node/17910
http://drupal.org/node/17866

Perhaps the problematic clear's could be overridden in one of the theme's CSS files? I don't think that asking users to edit their drupal.css is a feasable option, and I'm vehemently against the removal of the print $head (which pulls values from drupal_get_html_head) which includes drupal.css. Overriding certain rules seems like a reasonable solution.

However, there are some clear's that I feel are necessary: for instance, the clear after user pictures (a.k.a. avatars) guarantees that, for short nodes, the links will appear after the image rather than next to or on top of it... for extremely short nodes, it guarantees that the picture does not appear alongside the next node. This is important, IMO. Can this be accomplished without using the clears somehow?

Followup to http://drupal.org/node/17910

I'm not sure whether this is a help or a hindrance at this point. In any case, I commented out all instances of "clear: both" in my drupal.css, but there was no change in the aggregator display, still below the blocks.

jubjub: I was able to stop aggregator content appearing under the blocks by commenting out the clear:both for #aggregator .news-item .description and #aggregator .news-item on my test site. Keep in mind that the problem can also be caused by clear:left or clear:right, depending on your blocks configuration.

Thanks, TDobes, I commented out "clear: both" for those two items. That cleared it up for me. I also noticed that the polls display correctly now. Yesterday, the shaded graph portion of the polls was stacked up at the bottom below the list items.
http://jub-jub.net

I just downloaded the latest from CVS, and after applying the css background image patch, everything is looking much better! No more large gaps in the content! One thing I did notice, and if we can knock this one out of the way, i'll tink that might do it. When logged in the admin user, and editing a node, the form for the node overlaps the admin controls for the node. See attached screenshot.

seems to only be happening in firefox and safari, but not in IE......

The overall problem, again, is with the floating of the fieldsets in .admin-standard. The only way to get the "traditional" Drupal admin node creation form (where the three upper fieldsets are blocks that run up against each other), you'd have to float every form element left, and this is just not practical.

Hence fbomb's problem. If you remove clear:both; from .admin-standard, then the fieldsets float "under" the other form elements (like the title and url alias). But, if you don't override the clear:both; style, then you get the "dropping content" problem, particularly in IE.

So the only plausible solution is the one that doesn't look nice for admins... undoing the floats and the clears on .admin-standard.

Please keep these issues in mind when submitting patches for CVS or suggesting other solutions. I spent many-an-hour on this problem, and although the current situation is not satisfactory, I've yet to find a better one.

I've got the <div class="standard"> thing working by commenting out these lines in /misc/drupal.css:

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

...and replacing it with this:

.node-form .standard {
  width: 100%;
  float: left;
}

The 100% width makes sure the "standard" div appears on its own new line, and floating it left makes it appear next in sequence below the top form elements in the correct place.

I haven't yet checked to see what this breaks in other themes, so YMMV, and I did try to place this declaration at the end of the theme's layout.css - but it had no effect. Someone smarter than I can probably think of a better place to put this declaration within the theme to avoid the need to edit a copre drupal file. Right now I have it working OK and it'll do for me.

handelaar: I'm pretty sure that in order to override that specific drupal.css rule in layout.css, you would need to override the clear... as in:

.node-form .standard {
clear: none;
width: 100%;
float: left;
}

Similarly, to remove the clears as suggested by Anonymous, you'd need to override them by adding

#aggregator .news-item .description {
clear: none;
}

#aggregator .news-item {
clear: none;
}

to layout.css.

Of course, this is still really only a band-aid that will make things work in some situations. It's not a real solution because you still will need/want clears in some places (perhaps even within node content on your site), and clears continue to break the theme.

TDobes:

Thanks for the slap-my-head obvious fix :-)

I'm with you on the clears in other circumstances, but I think adding these clear: none declarations to the theme wants doing, if only because manually entering stylesheet data into articles is *such* an edge-case that the numbers don't usually justify the pain caused to the overwhelming majority.

How does the current spreadfirefox.com site deal with this?

Looks like spreadfirefox.com has the same problem: http://www.spreadfirefox.com/?q=aggregator/

Someone posted a suggestion of fixing the problem using tables. While this would work, I'm not sure it will be met by a great response. ("Tables are to be used for tabular data ONLY" and all that.)

I'd also like to point out that I regularly use "clear: right;" or "clear: left;" within posts on my site to clear below images that I've floated left or right. Whatever solution is eventually arrived upon needs to focus on making this theme deal with clears properly rather than simply working around (or removing) the clears from Drupal's core. The lack of ability to use clears within one's posts is exceptionally debilitating to admins that like to float items within their articles.

TDobes, thanks for your reply to the other comment. I'll be responding as well.

With the nearing release of CivicSpace 0.8.1 (no definitive date ATM), I hope to put another round of changes into my themes, including overhauling the column CSS in this theme. I seem to have some code that gives me both source-ordered content and the ability to use clears, so I'm excited to get this work done. You can see the prototype code on civicspacelabs.org in the layout.css file.

I solved the issues adding the following css to the /themes/spreadfirefox/layout.css file.

.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;
}

I just searched for clear properties in drupal.css and defined all the classes containing it with clear: none;
So far it's working great.

DrSlump's suggestion worked for me too.

Thanks!

message #25 applied to my democratica theme did not work on my main problem : the gap when looking the aggregator.

I put all lines from message #25, at the end of the file layout.css plus I added this :
.clearing {
clear: none;
}

and now it solved my problem.

But unfortunately I have the problem mentionned in this thread, with a screenshot, about the admin elements, when posting a content.

So I removed everything and I4m still stuck with the gap problem.

Please do your best to crack this, because the democratica theme is really nice and nothing compares to it (at least I haven't find one that does)

Hi, I followed the whole thread here and cannot figure out the clue to my problem. I freshly installed Drupal 4.6 and SpreadFirefox 4.6, PHPTemplate 4.6. The layout of my site looks a lot different from http://www.spreadfirefox.com, where the spaces surrounding the whole page is gone and the left block looks strange. Any settings or patch I have missed out?

This also happens with webforms

I'm merely experiencing white-space on certain admin pages (access control, user profiles, etc.). Also taxonomy pages exhibit this dreaded white-space. I've tried the fixes mentioned above but haven't had any luck. Bummer...

A great theme... I think I'll stick to it for now because of its superior handling of different screen resolutions and the thoughtful admin layout additions.

I'll hope for a clearer explanation of the fix-- or better, a super-duper patch?

I'm rewriting this theme from the ground up to fix this problem. I'm removing drupal.css and using a brand new column layout technique that's in use at civicspacelabs.org. It should fix this problem once and for all!

hi factoryjoe, have you had time to finish the rebuilding of this theme ?
cheers,

Looked over the thread at 17844 and tried the suggestions. In Firefox there is no issue, but in IE there is the typical large white space on some admin pages and when using events.

Removed drupal.css by commenting out the call in theme.inc. This did work, but then introduced additional issues of a missing header and other spacing issues. All of the clear tricks failed to produce any results.

An indication was given in May that a rewrite was in order to solve the misc/drupal.css issue once and for all. How is that coming and when will that task be completed.

Good luck with the project and Democratica is one great theme!!!!!

Thanks,

Jim

I did complete the work on the rewrite but ended up with a totally new theme, which is available here or in the CivicSpace 0.8.1 release. Alas, I was unable to finish porting Democratica to Groundswell's foundation, but you're welcome to take a look since I believe 99% of the whitespace issues have been solved with the new column technique I adopted.

The only white space issues with the new theme are related to column content being significantly wide.

Just loaded the template and yes it does play very nice. I am IMPRESSED!!!!

There is no indication in the text, but can I assume that this also uses the php Template?

When do you anticipate the finish date for the last 1%? I would assume in a week or two?

I like what I see and thanks for taking care of the issues. Seems that IE still does not like to play nicely with CSS, but we all know that is expected.

Jim
Anchorage, Alaska

Here is a report of some of my findings with CivicSpace.

1) themes/civicspace/global/images/bg_status.png not found. As reported in the Drupal log.

2) The password field in Firefox are asterisks but in IE6 it is rectangular boxes.

3) The logo.png (both your original and my replacement in the header) is reversed when loading the page in IE, but OK in Firefox. When the graphics in the right column load then the image returns to is normal state.

Attached a screen shot. If that does not work, send an email to my Drupal address.

Tested in FF 1.04 and IE 6 on with browsers set at 800 and 1024 wide.

Jim

The PNG transparent image in the header does not like IE as IE does not fully support PNG transparency. FireFox supports PNG without issue for CivicSpace.

The solution (at least from my part) is to redo the header transparent image as a gif and add to the theme's "Path to custom logo" in CivicSpace.

As a note, the rectangular boxs in place of asterisks show up when logging in as user/login.

Jim

I have tested this bug extensively with aggregator on Drupal 4.6.3 and IE6, and can't reproduce this problem. I do notice that the logo will go white from time to time, but it does indeed go away. If you want to use a logo other than the one shipped, then make sure it isn't a transparent png. A transparent gif, like Alaska above suggested, sounds to be like the right solution.

Trae