Developing New Widget Area - IE8 & Opera Formatting Problem

Thanks to Tammie's excellent tutorial (, I've learned how to place a new widget area wherever I'd like. Unfortunately, even though I've followed the instructions precisely, a formatting problem occurs within IE8 and Opera. Basically the div that's supposed to divide all of the main body content from the footer region is displaced all the way to just beneath the header. As a result, it causes all of the footer widgets to displace upward until they run into whatever's above them. Interestingly, there is no problem on the home page or any general Buddypress community areas (i.e., "Activity," "Members," etc.). It only occurs on pages that I've developed. Please check out the following link in your friendly IE8 or Opera browswer to see what I mean: After this, check it out in Firefox or Chrome (there's no problem in these browsers).

Does anyone have any ideas?

  • Mason
    • DEV MAN’s Sidekick

    Hiya Dave,

    Somewhat surprisingly this issue also shows up in the new IE9 beta.

    The problem with helping troubleshoot this one is that we have a "broken" version to play with to be able to find a fix and even then it could be very time consuming. That and the fact that this is a customization you're implementing and not an issue with our theme template means that this falls outside of our normal support policy.

    That being said, if you'll upload whatever files you've made changes to (save them as txt files for the forums). I'll take a few moments and try to help ya with this. At this point that's the best we can do. If we're unable to find a resolution quickly, it may be best to find a developer or designer who can help you develop the rest of this site.

    Thanks kindly for your understanding.

  • David Payne
    • Site Builder, Child of Zeus


    Thanks for being willing to take a look at this :slight_smile:

    Here's exactly what I did:

    The only change that was made were the following two things. Prior to making these changes there were no problems with the formatting in IE8. Afterwards, there was. So I'm positive that it has to do with something relative to these changes.

    1. I found where the spotlight code was in home.php. Just above this spot, within the same div, I added the following code:

    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('topright-sidebar') ) : ?>
    <?php endif; ?>

    2. Then, I went into the functions.php file and added the following code just underneath where it says /* Register the widget columns */:

    register_sidebars( 1,
    'name' => 'topright-sidebar',
    'before_widget' => '<div id="%1$s">',
    'after_widget' => '</div>',
    'before_title' => '<h3>',
    'after_title' => '</h3>'

    So the above allowed me to have a widget above the spotlight section, which you can find on the home page on the right side just below the slides area but above the spotlight section. But it caused the formatting problems in IE8 and Opera.

    I've attached two text files, one for home.php and the other for functions.php.

    By the way, if I need to hire a developer and/or designer, is there a particular person you'd recommend. I really don't know the guys well who list themselves in the request area. Are you a developer? If so, are you able to take on projects on the side? How does all of this work?

    Thanks for everything!


  • Mason
    • DEV MAN’s Sidekick

    Ok, after looking at this further, it's not the new widget that you're creating that's causing the issue. That widget isn't even loaded on the page in question.

    I'm not sure how to go about resolving this as I'm unable to recreate the error myself. My only suggestion would be to go back through and retrace your steps.

    Try the following:
    Make a backup copy of your entire theme and all files.
    Rename your theme folder and information at the top of style.css to something else (PA Theme or something memorable)
    Upload a new copy of Scholar theme and activate it. (with any luck your theme options will all be saved)
    If not, at least change to mono.css theme style.
    Check to see if Regular pages are showing correctly in IE.
    They should be!
    If they're not, it's an issue unrelated to the theme such as a plugin.
    If they are, you'll need to go through each file, one at a time and overwrite the Scholar one with your PA Theme file.
    Keep going until each file has been overwritten refreshing after each file to see if the error shows itself.
    When copying files, I would start with home.php, function.php, mono.php and then all other CSS files as I don't believe any of these have caused the problem.
    If you get to the point where your site looks as it should with no errors in IE, I'd say stop there and trust that whatever file was misbehaving has not been added back in.

    I know it's a ton of steps, but at the end of it you may have the theme working the way you like.

    Let us know if there's anyway we can assist you more specifically in this process.


Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.