Forums

dryan1144

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:

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'sidebar1',
'before_widget' => '<li id=\"%1$s\" class=\"widget\"><div class=\"top-box\"></div>',
'after_widget' => '</li><div class=\"bottom-box\"></div>',
'before_title' => '<h2 class=\"widgettitle\">',
'after_title' => '</h2>',
));
register_sidebar(array('name'=>'sidebar2',
'before_widget' => '<li id=\"%1$s\" class=\"widget\"><div class=\"top-box\"></div>',
'after_widget' => '</li><div class=\"bottom-box\"></div>',
'before_title' => '<h2 class=\"widgettitle\">',
'after_title' => '</h2>',
));
?>

my sidebar.php file:

<div id=\"sidebar\">

<ul>
    <?php 	/* Widgetized sidebar, if you have the plugin installed. */
					if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
</ul> 

</div> <!--END SIDEBAR -->

my css:

#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;}

Robskiwarrior

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...

treehouse : what would you like to learn today?

Forums

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