My site is running on the spreadfirefox theme and so far the browser view is excellent if viewing from firefox. However, when viewing the homepage in IE the template breaks considerably. The url of the homepage is http://chibabeat.com/test_site. So far I have tried decreasing column width's to 45% and changed the "clear: both" to "clear: none". Still nothing helps. Is there anything I can do with the css or code to fix this?

Comments

merlinofchaos’s picture

merlinofchaos commented

I played with it a bit (I'm not a CSS expert unfortunately) and this worked out well for me:

.panel-2col-stacked { 
  width: 98%; 
}
.panel-2col .panel-col-first { 
  float: left; 
  width: 50%; 
}
orionvortex’s picture

orionvortex commented

It worked out for me too!. The key is definitely

.panel-2col-stacked {
width: 98%;
}

Before I had tried changing individual column widths but that had no effect. This actually works though.
Thank you so much!

merlinofchaos’s picture

merlinofchaos commented
Status: Active » Fixed
merlinofchaos’s picture

merlinofchaos commented

Another possibility, btw, might be to give .panel-2col-stacked 0 padding 0 margin if you hadn't already.
Not completely sure about that.

Anonymous’s picture

(not verified) commented
Status: Fixed » Closed (fixed)
tracerrx’s picture

tracerrx commented

This fixes the same bug using almost all styles in IE 7 as well

pcwick’s picture

pcwick commented

For me, the code in #1 worked well for IE7, but to get the it to work in IE6 took this:

.panel-2col-stacked {
  width: 98%;
}

.panel-2col-stacked .panel-col-first {
  float: left;
  width: 50%;
}

.panel-2col-stacked .panel-col-last {
  position: relative;
}
chadchandler’s picture

chadchandler commented
Status: Closed (fixed) » Active

Yes, same issue here.

In IE6 the Blocks get pushed down the page. The Titles also get lost, you have to manually override Block Titles to get them to appear.

What exactly needs to be done in the CSS for IE6to display Panels 2 column layout correctly?

merlinofchaos’s picture

merlinofchaos commented

I don't know spreadfirefox well, but there are two things you can do to try and mitigate this.

1) Whatever the containing div is that the panel gets displayed on may well have too much padding. Sometimes you can mitgate this just by placing a placeholder div inside this, and ensuring that div has margin: 0 padding: 0.

2) You can reduce the widths of the individual panels a little bit.

catch’s picture

catch
he/him
Primary language English
commented
Priority: Critical » Normal
Status: Active » Closed (fixed)

Marking as closed since there was no further feedback.