By petergus on

i want to position my logo to the top, but whatever i do it just goes into hidden because there is a fusion core style of 

.row, .nested, .block {
overflow:hidden;

ive gone so far as to do this...nothing works! should, can i , disable that style in fusion...but i guess its prolly used for something else!


#logo {

  margin-top:-35px;
position:absolute;
display:block;
height:300px;
width:200px;
overflow:visible; !important

}

that works * when* i turn off the fusion class in firebug, ..so i dont know what else to do.

thanks for any hints anyone, really confused here!

⋅ Categories: Drupal 6.x

Comments

Drave Robber’s picture

Drave Robber commented

You're using

overflow:visible; !important

whereas correct syntax is

overflow: visible !important;

0.92 probability of this being the cause :)

petergus’s picture

petergus commented

i wish i could laugh and say ya, thats it, but no :(
strange.
what could the other 8% be?

petergus’s picture

petergus commented

it *must* be because its somehow nested and not able to override, so a CSS issue....but still totally confused what, seems ive tried everything, but naturally missed something.

petergus’s picture

petergus commented

got it!
positioned the header-site-info to absolute top.

still dont get why the overflow wasnt being overridden though...

Drave Robber’s picture

Drave Robber commented

I'm betting 6% of my remaining 8% of overflow having nothing to do with the problem;

probably several elements were competing for the same absolute position; if no z-index is specified, the last one comes out on top.

petergus’s picture

petergus commented

hm yes, z-index would make sence, but still dont get why when .row .nested and .block were disabled it worked, even though didnt notice a z-index on those. but maby.

well anyway, positioning the wrapper did it, not sure why or how still.

Drave Robber’s picture

Drave Robber commented

whatever has no z-index specified, has an implied z-index of 0.

BrockBoland’s picture

BrockBoland commented

I'm seeing a similar issue and haven't figured mine out yet.

I've got a sidebar block. There's some JS on an element in there so that when it's clicked, it displays a dropdown-styled div below it. But, the overflow:hidden on .row, .nested, .block is preventing it from being shown. I put overflow: visible on the block using the block ID, and the Chrome inspector shows that the overflow:hidden style is overridden, but it's still preventing that overflowing dropdown div from being visible unless I use the inspector to disable the overflow:hidden completely. The same thing is true in Firebug, using Firebug.

Doesn't make a lick of sense.

BrockBoland’s picture

BrockBoland commented

Turns out, it did make a lick of sense.

The containing sidebar was the element with the offending overflow: hidden. Once I overrode it with overflow: visible on both the block and the sidebar region (which had the .nested class, as I recall) it was fine. I overlooked that my pop-up menu overran the boundaries of that containing region as well as the block itself.

asb’s picture

asb commented

I have a similar problem when trying to put an icon in the block/pane title, and after almost one hour of trial and error I'm a huge step closer to insanity, but not an inch closer to a solution.

On this theme, I had from the beginning on

.row,
.nested,
.block {
  overflow: visible !important;
}

on the bottom of ./css/local.css, but not even bogus like

...
.panels-flexible-column-inside,
.panels-flexible-column,
.panels-flexible-region-inside,
.panels-flexible-region
.panels-flexible-column-inside,
.panel-flexible-inside,
.panel-flexible,
.inside,
.panel-region-separator,
.pane-tweets .inner .pane-content .view-tweets,
.pane-tweets .inner .pane-content,
.pane-tweets .inner,
.pane-tweets {
  overflow: visible;
}

is helping in this case.

Does anyone know of a way to globally reset the overflow to visible for *everything* in a Fusion theme?

Thx!

asb’s picture

asb commented

After a couple of more ours with this madness I came to the conclusion that overriding overflow: hidden is impossible with CSS in Fusion/Panels.

My last attempt was to systematically set all styles in the tree above the h2 element to overflow: visible !important;. This resulted in styles like this:

#main,
#main-inner,
#main-group,
#main-group-inner,
#main-content,
#main-content-inner,
#content-group, 
#content-group-inner,
#content-region,
#content-region-inner,
#content-inner, 
#content-inner-inner,
#content-content,
.panel-flexible,
.panel-flexible-inside,
.panels-flexible-column,
.panels-flexible-column .inside,
.panels-flexible-region,
.panels-flexible-region .inside,
.pane-tweets,   
.pane-tweets .inner {
  overflow: visible !important;
}

.pane-tweets .inner h2.block-title,
.pane-tweets .inner h2.pane-title {
  margin-top: 1.5em;
  background-color: #bbb;
  padding-top: 5px;   
  padding-bottom: 5px;
  padding-left: 0.5em; 
  padding-right: 0.5em;
  margin-bottom: 0;
  background-image: url("../images/twitter-75px.png");
  background-repeat: no-repeat;
  background-position: 200px -10px;
  background-attachment: scroll;
  background-clip: border-box;
  background-origin: padding-box;
  overflow: visible !important;
  display: block;
  z-index: 100;
  font-size: 115%;
}

After this, the Twitter icon is still cropped on the boundaries of the .pane-tweets .inner h2.pane-title element. Neither the z-index, nor the overflow directive seems to have any influence of the rendered output.

The TNT guys seem to know that and have built Acquia Marina, where some block style have overlapping icons, with modified block templates and a custom class <div class="block-icon pngfix"/> plus this CSS:

.icon-chatbubbles .block-icon, .comment-icon-chatbubbles { 
  background-attachment: scroll;
  background-clip: border-box;
  background-color: transparent;
  background-image: url("http://acquiamarina.fusiondrupalthemes.com/sites/all/themes/fusion_acquia_marina/images/icons/icon-chatbubbles.png");
  background-origin: padding-box;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  background-size: auto;
}

.block-icon { 
  height: 48px;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 48px;
  z-index: 100;
}

Based on this approach, I created a views template for the Twitter block and added a dummy div. The icon is added with CSS, and the div is absolutely positioned. No need to hassle with these §"$%& overflow: hidden directives...