weareranI'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 http://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
