Grow your CSS skills. Land your dream job.

WP Dynamic Sidebar not rendering correctly in IE. PHP issue?

  • # November 29, 2009 at 2:48 am

    This is weird – http://bepeace.org/blog

    I have set up two different dynamic sidebars for wordpress, one for my homepage one for others. Each of the widget areas have empty divs surrounding them in the function.php file to set up CSS background images.
    In everything except IE the boxes, specifically the "top" and "bottom" of the boxes are showing up perfectly. In IE all you can see is one big, undifferentiated background.

    Any ideas? Not sure if its a php issue or silly css mistake…

    Thanks in advance!

    my function.php file:

    Code:
    < ?php
    if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>‘sidebar1′,
    ‘before_widget’ => ‘
  • ‘,
    ‘after_widget’ => ‘

  • ‘,
    ‘before_title’ => ‘

    ‘,
    ‘after_title’ => ‘

    ‘,
    ));
    register_sidebar(array(‘name’=>’sidebar2′,
    ‘before_widget’ => ‘

  • ‘,
    ‘after_widget’ => ‘

  • ‘,
    ‘before_title’ => ‘

    ‘,
    ‘after_title’ => ‘

    ‘,
    ));
    ?>

my sidebar.php file:

Code:

my css:

Code:
#sidebar {width:260px; position:absolute; top:50px; left:710px;}
#sidebar1 {width:260px; position:absolute; top:245px; left:720px;}
.widget {width:255px; background:url(http://bepeace.org/images/box.png) repeat-y; overflow:visible;}
.widget li {clear:both; padding:0px 10px 5px 20px; color:#499797; font:13px tahoma, arial, sans-serif; }
.widget li a:hover {color:#efd54b;}
.widgettitle h2 {position:relative; margin:0 0 2px 5px; top:0px; font:16px georgia, times, serif; letter-spacing:1px; text-transform:uppercase; display:inline;}
.top-box {background:url(http://bepeace.org/images/topbox.png)no-repeat; width:244px; height:7px; margin:10px 0px 0px 0px;}
.bottom-box {background:url(http://bepeace.org/images/bottombox.png)no-repeat; width:244px; height:10px; margin:0px 0px 0px 1px;}
#searchform {padding:20px 10px 0 20px; height:50px; width:200px;}
.screen-reader-text {display:none;}
#s {height:25px; width:130px; border:2px solid #efd54b; background:#fafafa; font: 14px verdana, arial, sans-serif; color:#676767; padding: 7px 2px 0 3px; position:absolute; top:48px; }
#searchsubmit {width:62px; height:47px; border:none; background:url(http://bepeace.org/images/searchbutton.png) 0 10px no-repeat; cursor:pointer; position:absolute; top:40px; left:200px;}
Rob
# November 29, 2009 at 4:22 am

You do have a few errors, I would run your site though the:

http://jigsaw.w3.org/css-validator

and

http://validator.w3.org/

Other than that I would say you need to rethink your boxes… for example you have the top box div inside the LI and the bottom outside the LI… now technically you shouldn’t put an block element (DIVs for example) inside in-line elements (LI’s for example).

IE being stupid, obviously is having some issues with that…

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".