Css difference in firefox/IE

[TheGreatOne]

Hi guys can anyone take a quick look at my code and suggest what changes i need to make so that firefox and internet explorer will look similar


Ive attached what it looks like in both web browsers. The main problem is that it over flows the box in IE. Can anyone suggest something to try?


My CSS

div.jr_listings_mod {
width:170px;
}
div.jr_listings_mod .contentIndicators {
display: none;
}

div.jr_listings_mod .contentThumbnail {
width:170px;
}

div.jr_listings_mod .contentThumbnail img {
border: 1px solid #000000;
height: 100px;
width: 100px;

}
div.jr_listings_mod .listItem table{
width:auto;
background-color: #FF0000;
}
div.jr_listings_mod .listItem .column1 {
float:left;
width:150px;
text-align: center;

}
div.jr_listings_mod .listItem .column2 {

float:left;
width:150px;
text-align: center;

}
div.jr_listings_mod .listItem .rating_table {
margin-right: auto;
margin-left: auto;
padding-left: 5px;
}
div.jr_listings_mod .listItem .rating_table .rating_value{
padding-right:10px;
padding-left:10px;
}
div.jr_listings_mod .listItem .rating_table .rating_label{
display:none;
}
div.jr_listings_mod div.jr_divider {
width:150px;
margin-bottom:10px;
margin-top:10px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #CCCCCC;
margin-right: auto;
margin-left: auto;
}

[yell0wdart]

Could you please post the markup in question as well? Thanks!

[TheGreatOne]

here the html code

<div class="box_title">Random Act</div>
<div class="box_middle">
<div id="jr_modContainer29" class="jr_modContainer jr_listings_mod">
<!-- LISTINGS MODULE BEGINS HERE -->
<div class="listItem" style="width:98%;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="column1" valign="top" style="width:110px;">
<div class="contentThumbnail"> <a href="http://youngscotsoundsright.org/index.php?option=com_content&amp;view=article&amp;catid=1: bands&amp;id=46:what-the-blood-revealed&amp;Itemid=7" ><img src="http://youngscotsoundsright.org/images/stories/jreviews/tn/tn_46_module29_what-the-blood-revealed.jpg" border="0" alt="What The Blood Revealed" /></a> </td>
<td class="column2" valign="top">
<div class="contentTitle" style="white-space:normal;"><a href="http://youngscotsoundsright.org/index.php?option=com_content&amp;view=article&amp;catid=1: bands&amp;id=46:what-the-blood-revealed&amp;Itemid=7" >What The Blood Revealed</a> <span class="contentIndicators">
<img src="http://youngscotsoundsright.org/components/com_jrexpress/jrexpress/views/themes/default/theme_images/new.png" title="New" alt="New" border="0" /> </span>
</div>

<!-- BEGIN RATINGS -->
<table border="0" cellpadding="0" cellspacing="0" class="rating_table">
<tr>
<td align="left" class="rating_label"><img src="http://youngscotsoundsright.org/components/com_jrexpress/jrexpress/views/themes/default/theme_images/review_user.png" title="User rating" alt="User rating" /></td>
<td align="left" class="rating_stars" style="cursor:help;" title="User rating"><div class="rating_bar_user"><div style="width:0%;">&nbsp;</div></div></td>
<td align="left" class="rating_value">0.0 (<span style="cursor:help;" title="User reviews">0</span>)</td>
</tr>
</table>
<!-- END RATINGS-->

</td>
</tr>
</table>
</div>
<div class="jr_divider"></div>
<!-- LISTINGS MODULE ENDS HERE -->
<div class="clr"></div>



</div>

</div>
<div class="box_bottom"></div>

[yell0wdart]

I'd try something like this first:


div.jr_listings_mod .contentThumbnail,
div.jr_listings_mod .contentTitle
{
width:170px;
display: block;
clear: both;
}

[TheGreatOne]

that didn't work no change to how it looks