All of the elements within the header-group div are floated. As such applying a background to the area is difficult, to say the least. From my tinkering adding the .clearfix class to the div completely solves the problem and from my limited testing has no side-effects. I believe this may also apply to other regions but I am not sure.

Alternatives if this isn't done that are available to sub-themers:

  • Create a page.tpl.php overriding Fusion Core to add the cleafix class to needed divs
  • Apply the needed clearfix method to needed divs within stylesheet, including adding to IE stylesheets to implement
  • Create a page.tpl.php to add a div block which clears the floated elements
  • Apply a background to .page-inner that is sized to fit the content and center aligned with no-repeat (only works on fixed themes)
  • Come up with some other creative hacky method

I also noticed in fusion_core's css that .clearfix is defined in style.css, ie6-fixes.css, and ie7-fixes.css so I do not know if this is something that was worked out but just not included in the beta3 release or not.

CommentFileSizeAuthor
#1 fusion-bg-fix.patch64.12 KBcodycraven

Comments

codycraven’s picture

codycraven commented
StatusFileSize
new fusion-bg-fix.patch64.12 KB

Ok so I also found that preface-top-inner needs clearfix applied. Thus I created a patch (from HEAD in contrib CVS) to add the necessary clearfix classes. However, there is something going on with your line endings (not just Unix) so my patch rewrites the entire file instead of just the necessary lines...

So in addition to the attached patch, here are the code changes that the patch implements:

File: fusion/fusion_core/template.php
Line: 382

    $output .= '<div id="' . $name . '-inner" class="' . $name . '-inner inner clearfix">' . "\n";

File: fusion/fusion_core/page.tpl.php
Line: 38

        <div id="header-group" class="header-group row <?php print $grid_width; ?> clearfix">
codycraven’s picture

codycraven commented

Regarding my initial post when I provided options if clearfix is not implemented I provided the option of "Apply a background to .page-inner that is sized to fit the content and center aligned with no-repeat (only works on fixed themes)". From my development on my personal sub-theme I have found that this is not a good option as web-kit based browsers (Safari, Chrome, etc) will move primary-menu over by one pixel based on the width of the rendered screen in the browser, in turn overlapping your applied background and looking terrible.

sociotech’s picture

sociotech commented

CodyCraven,

In Acquia Prosper (and Fusion themes in general), we use a combination of both targeted selectors in the css, and adding a clearfix class in the markup.

The targeted selector approach has the advantage of not adding markup to your template files, so you can remove it if needed just using css. You can see this approach in Acquia Prosper at about line 1918 of acquia-prosper-style.css ("Clear fixes") where there is a list of targeted selectors. To use this approach, you'd add the id of the element you want to clearfix to this list with ":after" attached.

In contrast, we use the clearfix class in the markup for node.tpl.php.

I'd be open to looking at putting the clearfix class in the markup for additional selected elements if that seems generally useful and doesn't cause any other issues (e.g., instances where you _don't_ want floats to clear).

To generalize what you seem to be recommending, you'd like to see the clearfix class applied to all the inner divs of full-width rows. Is that correct?

Thanks for your input.

codycraven’s picture

codycraven commented

Correct.

I struggled with Fusion when attempting to set a simple background to the head region. It simply would not work. As I dug in to the code I found that all of the elements within the head region were floated, thus the background would not be rendered. As a solution I applied clearfix which allowed me to manipulate the area as I would in any normal situation. As I continued to work I found that clearfix also needed to be applied to the regions where the grid_row theme call is performed.

The issue that I find with the targeted selectors approach is that not only do you need to add the clearfix in your main CSS, but you also have to create and place it in a CSS file for IE6 and IE7 (three places). For example in my theme I do not need IE6 and IE7 specific CSS files and thus have to override page.tpl.php to add the IE specific markup just to use the targeted selectors so that I can apply a background to the div containing the region.

If clearfix were to be included in the locations that I mentioned in comment #1 then by default subthemers would be able to apply backgrounds, borders, etc to the desired regions without any additional work. If for some reason they do not want the clearfix applied they could easily override it with the following in their main CSS file (only 1 location):
#header-group-inner:after { display: none; }
Note that you would replace #header-group-inner with whatever element it is you want clearfix removed from. This would also remove the need to override page.tpl.php just to apply or remove the clearfixes.

One more note, in my previous posts I said apply clearfix class to header-group div. I think it should instead be applied to the header-group-inner div.

sociotech’s picture

sociotech commented
Status: Active » Fixed

This issue should now be fixed in the latest beta 4 release.

Status: Fixed » Closed (fixed)

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

wattzy’s picture

wattzy commented

The best way to use a clearfix can be found at best clearfix ever. It doesn't use class names to fix the problem but an automatic solution that should be applied to all block level elements except for the p and footer elements.