IE8 Throwing Up Sidebar Problems

  • I’m having problems with the sidebar displaying properly in IE8. I am using the Lightword theme.

    If anyone wants to look (in IE8), the url is https://www.wearerangers.com. The sidebar content moves itself to the left, whereas in Firefox it displays as it should. It also looks fine in IE compatibility mode.

    I’m new to all this but I have looked into it and realise that you can use conditional CSS. I have tried this without much success.

    I have tried to shift the sidebar content by creating a “style_ie.css” file with the following:

    @charset "utf-8";
/* CSS Document */

<!--[if IE 8]>
<style type="text/css">
.content-sidebar input {
[if IE 8] margin-left:20px;
}
</style>
<![endif]-->

    And edited the sidebar.php is as per the following, with the IE condition near the top (not sure if this is the correct place?):

    <div class="content-sidebar">
<?php

/* Widgetized sidebar, if you have the plugin installed. */

if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

<!--[if IE 8]>
  <link rel="stylesheet" type="text/css" href="styles/style_ie.css" />
<![endif]-->

<h3><?php _e('Pages','lightword'); ?></h3>
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>

<h3><?php _e('Categories','lightword'); ?></h3>
<ul>
<?php wp_list_categories('title_li='); ?>
</ul>

<h3><?php _e('Blogroll','lightword'); ?></h3>
<ul>
<?php wp_list_bookmarks('title_li=&categorize=0'); ?>
</ul>

<h3><?php _e('Archive','lightword'); ?></h3>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>

<h3><?php _e('Meta','lightword'); ?></h3>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS','lightword'); ?>"><?php _e('<abbr title="Really Simple Syndication">RSS</abbr>','lightword'); ?></a></li>
<li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="<?php _e('The latest comments to all posts in RSS','lightword'); ?>"><?php _e('Comments <abbr title="Really Simple Syndication">RSS</abbr>','lightword'); ?></a></li>
<?php wp_meta(); ?>
</ul>

<?php endif; ?>
</div>

    Can anyone spot what I’m doing wrong and set me straight? ??

    Thanks

Viewing 7 replies - 1 through 7 (of 7 total)

  • Change your style_ie.css to:

    .content-sidebar input {margin-left:20px;}

    Don’t put conditional comments or any other markup (e.g <style type="text/css">)in a CSS sheet.

    Thread Starter weareran

    (@weareran)

    Hi esmi,

    Thanks for the reply.

    I tried what you said but no success.

    Extract from sidebar section of main ‘styles.css’:

    /* SIDEBAR */
.content-sidebar{width:191px;display:inline-block;overflow:hidden;vertical-align:top;}
.content-sidebar input{padding:3px;border:1px solid #E5E2E0;margin-bottom:2px;}
.content-sidebar h3{margin-top:8px;display:block;background:#FFF url(images/sidebar_h3.png) no-repeat;height:22px;width:181px;font-weight:700;font-size:11px;padding:9px 0 0 10px;}
.content-sidebar h3 a{text-decoration:none;color:#2C2C29;line-height:13px;}
.content-sidebar ul{list-style:none;width:191px;padding:2px;}
.content-sidebar li{list-style:none;}
* html .content-sidebar ul{width:160px;}
.content-sidebar ul li{display:block;color:#9D9793;line-height:16px;padding:4px 0 4px;border-bottom:1px solid #EEE;width:185px;}
.content-sidebar ul ul li{border:0px;padding-bottom:0;width:140px;}
.content-sidebar ul li.page_item ul li.page_item , .content-sidebar ul li.cat-item ul.children li.cat-item{background:url(images/arrow.gif) 0 11px no-repeat;padding-left:11px;margin-top:-3px;}
.content-sidebar ul li.page_item ul li.page_item ul li.page_item, .content-sidebar ul li.cat-item ul.children li.cat-item ul.children li.cat-item{background:url(images/arrow.gif) 0 11px no-repeat;padding-left:12px;}
.content-sidebar ul li a:hover,.content-sidebar .recentcomments a:hover{color:#AAA;}
.content-sidebar .textwidget, .content-sidebar select{padding:3px;margin:10px 2px 10px 2px;width:188px;}
.content-sidebar .recentcomments{display:block;border-bottom:1px solid #EEE;color:#9D9793;padding:4px 0px;line-height:16px;}

    Content of ‘sidebar.php’:

    <div class="content-sidebar">
<?php

/* Widgetized sidebar, if you have the plugin installed. */

if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

<h3><?php _e('Pages','lightword'); ?></h3>
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>

<h3><?php _e('Categories','lightword'); ?></h3>
<ul>
<?php wp_list_categories('title_li='); ?>
</ul>

<h3><?php _e('Blogroll','lightword'); ?></h3>
<ul>
<?php wp_list_bookmarks('title_li=&categorize=0'); ?>
</ul>

<h3><?php _e('Archive','lightword'); ?></h3>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>

<h3><?php _e('Meta','lightword'); ?></h3>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS','lightword'); ?>"><?php _e('<abbr title="Really Simple Syndication">RSS</abbr>','lightword'); ?></a></li>
<li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="<?php _e('The latest comments to all posts in RSS','lightword'); ?>"><?php _e('Comments <abbr title="Really Simple Syndication">RSS</abbr>','lightword'); ?></a></li>
<?php wp_meta(); ?>
</ul>

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="styles/style_ie.css" />
<![endif]-->

<?php endif; ?>
</div>

    And finally the ‘style_ie.css’ file changes with what you said:

    @charset "utf-8";
/* CSS Document */

<!--[if IE]>
.content-sidebar{margin-left:10px;}
<![endif]-->

    Can you see anything above that might cause it to not work?

    Can you see anything above that might cause it to not work?

    Yes!

    /* CSS Document */

<!--[if IE]>
.content-sidebar{margin-left:10px;}
<![endif]-->

    Get rid of the conditionals.

    Thread Starter weareran

    (@weareran)

    I’ve removed those conditions but I just can’t get this to work!!

    Then you’re either not targeting the right element on the page or you need to use another method such as position:relative;left:-10px;. Sometimes it takes a fair amount of trial and error to perfect the CSS. Using Firefox with the Firebug add-on can help but only to a limited extent. Unfortunately, there isn’t a Firebug-like add-on for IE. In comparison, the Developers Toolbar for IE is pretty useless. ??

    Thread Starter weareran

    (@weareran)

    I’m thinking there’s no straightforward answer to this and it’s trial and error as you say. How I dislike IE!! ??

    Thanks for your help esmi.

    I think this sums it up:
    https://quirm.net/2008/10/01/modern-web-design/

    ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘IE8 Throwing Up Sidebar Problems’ is closed to new replies.

Tags