I am using Zen and I want the title of the sidebar blocks to have a background color. So here is what I have:

.sidebar .title {
background-color: #d0d0d0;
}

This works fine with FF, but IE6 doesn't show the color in the first block in each sidebar. The background color shows for all the blocks below the first ones. IE7 cuts some of the title background to about half the size of the block. This happens for both 1.x dev as well as the 0.6 release.

Any ideas what to do? I have tried to fix this for days now.
Thanks
John

Comments

zirafa’s picture

zirafa commented

Do you know if the problem is limited to just those two blocks (if you change the order of blocks does it still happen?)

You may want to style the h2 or h3 element directly:

.block h2.title

I've noticed that since h1, h2, etc have "default styles" they can be finicky to style unless you explicitly select them to style.

zirafa

zirafa’s picture

zirafa commented

Ok, well I'm able to duplicate this problem even after trying my own method above. Not sure what's going on with IE (maybe related to IE's default header stylings overriding things.)

-z

jadams1-1’s picture

jadams1-1 commented

Thanks for your response. I have a feeling this is not a zen-specific issue. I am seeing similar issues on google with IE6. I'll post back if I find out anything else.

robknight’s picture

robknight commented

I tried

h2.title { background:#000; }

and it worked in IE6. It isn't block-specific, but it worked. Try using the HTML inspector in Firefox extension Firebug to see what styles are applied to the element.

add1sun’s picture

add1sun commented
Title: IE6/7 Problem » IE: change sidebar block title bg color
Component: Code » IE Problems

changing title and component

johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented
Status: Active » Closed (fixed)

Given jadams1 last comments, I’m closing this issue. Please re-open this issue if it turns out to be a problem with Zen.

fworsley’s picture

fworsley commented

Any more news on this? I'm having the same problem and haven't found a solution yet.

fworsley’s picture

fworsley commented

I've solved this problem by applying a "height" property to ".block .title" and a "width" property to ".block .blockinner". This forces IE to apply the internal "hasLayout" property and causes the first block to always render correctly.

Here is my CSS from a Zen overrides.css file:

.block .blockinner
{
border: 1px solid #C0C0C0;
padding: 0;
margin: 0;

/* force IE to apply hasLayout property and render block border. */
width: 205px;
}

.block .title
{
padding: 0.2em 0.8em 0.2em 0.8em;
margin: 0;

/* for IE to apply hasLayout property and render title background. */
height: 1.2em;

color: white;
background-color: #003475;

font-size: 9pt;
font-weight: bold;
text-transform: capitalize;
}

Here is a screenshot of the original problem:

http://frank.neatstep.com/custom/drupal/missing_decorations.png

Notice the border of the block and the title were both missing. This is now fixed.

Here is more info on IE's hasLayout property:

http://www.satzansatz.de/cssd/onhavinglayout.html

I hope this is helpful to others.

Anonymous’s picture

Anonymous (not verified) commented
Title: IE: change sidebar block title bg color » another way to force HasLayout

Another way to force IE6 or 7 to apply the hasLayout is to use :

zoom:1;

Only IE recognizes it, I use it a lot, it's actually one of the first trick I use to fix IE6. And it's perfect when you don't want to set a height or a width to your object.

fworsley’s picture

fworsley commented

Yes, I saw that property on the MSDN reference page. For some reason it didn't work for me in this case.