I've done searches and seem to come "close" to a solution but not quite.

I have two custom widget areas on my front page, within the upper top left and right of the center page. They have appeared fine on Firefox, Safari, and IE, but within 24 hours they are now wacky.

www.cambridgebaptistchurch.org

Even with IE Developer I can't figure this out at all and not being a techie, experiencing serious frustration. The widget area content shifts to the left side taking up only about 1/3 or so of the widget area. There are two almost identical widget areas below them that are fine.

Please take a look and share your insight and possible solutions.

Thank you for your time and assistance.

Craig

It probably has something to do with the CSS I had previously suggested. Could you please post the code you are using for the widget areas? I think we could tweak that code instead of using CSS which may fix the problem.

Hi Larry,

Here is the code for FP1 and FP2:

#my_widget_area_fp_1 {
width:200px;
margin-right:10px !important;
padding-right:10px;
}
#my_widget_area_fp_2 {
width:155px !important;
}
#my_widget_area_fp_2 div.widget-title {
margin-bottom:10px !important;
}

Viewing in IE8 using Developer Tools and drilling down html to fp1 the Style indicates Inherited: strikethrough with the correct values as above. However, when I click on "width: 200px;" and click again in the Style section the widget area fp1 goes all the way across squeezing fp2 then back to what it should look like. Well, until I refresh the screen anyway.

What is interesting, I used this exact code with a slight modification for the widget areas below FPB1 and FPB2 and they appear fine in both browsers:

#my_widget_area_fpb_1 {
padding-right:5px;
}
#my_widget_area_fpb_2 {
padding-left:5px;
}
#my_widget_area_fpb_2 div.widget-title {
}

I hope this helps.

Thank you,
Craig

The code I'm talking about Craig is the code you used to create the widget areas. I think we can tweak that to eliminate some of the CSS.

OK Larry,

Sorry for the misunderstanding. Here is the php code for both fp_1 & 2, fpb_1 & 2:

<?php bfa_widget_area('name=My widget area FP&cells=2&align=3&align_2=2&align_3=7&width_4=700 &before_widget=<div id="74" class="header-widget %2$s">&after_widget=</div>'); ?>

<?php bfa_widget_area('name=My widget area FPB&cells=2&align=1&align_1=4&align_1=2&width_4=70 0&before_widget=<div id="74" class="header-widget %2$s">&after_widget=</div>'); ?>


Thank you,
Craig

Try using this for creating the widget area and eliminate the CSS. I don't know why I didn't think of this before.

<?php bfa_widget_area('name=My widget area FP&cells=2&align_1=3&align_2=9&width_1=400&width_2=300 &before_widget=<div id="74" class="header-widget %2$s">&after_widget=</div>'); ?>

That should give you a two cell widget area with a left area width of 400px and a right area of 200px.

It seems like I periodically have to fiddle with CSS with IE. Does that code make sense to you? Half the battle is wrapping my head around some of the Greek that some call code.