Having issues with CSS on Internet Explorer
While this page displays correctly in Firefox, Chrome, and Opera, on IE the "date bar" is overlapping on the first <li> bar
View the issue here:
The current CSS code is:
#content h2.other-posts {
height: 31px;
font-size:12px;
line-height: 31px;
background: #2c2b2b;
padding: 0 10px;
border: 1px solid #1b1b1b;
color: #888888;
margin-bottom:1px;
}
#content #other-posts {
list-style: none;
padding: 1px;
margin-top:15px;
margin-bottom:15px;
margin-left: 20px;
}
#other-posts li {
list-style: none;
background: #151515;
height: 30px;
line-height: 30px;
border-left: 1px solid #050505;
border-right: 1px solid #151515;
border-bottom: 1px solid #050505;
border-top:1px solid #0f0f0f;
margin-bottom: 1px;
padding: 0 10px;
}
#other-posts li a {
float: left;
}
The PHP file in Wordpress is as follows:
<ul id="other-posts">
<?php
$postslist = get_posts('numberposts=50&order=desc&orderby=date');
foreach ($postslist as $post) : setup_postdata($post);
?>
<?php the_date('', '<h2 class="other-posts">Added on ', '</h2>'); ?>
<li><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a></li>
<?php endforeach; ?>
</ul>
Seeking solution to make this render correctly in all browsers