Border and background difference

Can someone explain why Internet Explorer and Opera displays the following code properly but FireFox and Chrome does not?

The content border only goes around the 1st 5 lines in FF and Chrome as well as the background color for the odd lines do not show in FF or Chrome. It looks correct in Opera and Internet Explorer.

Browser versions:
Firefox 10.0
Chrome 17.0.9
IE 9.0.8
Opera 11.61

<head>
<title>Software</title>
<meta name="description" content="Software">
<style type="text/css">
<!--
body {background-color:#fff;color:#000;}
.report-container {width: 80%;margin-left:10%;font-family:arial,verdana,tahoma,helvetica,sans-serif;}
.report-header {width:100%;text-align:center;padding-bottom:1.2em;}
.report-contents {width:60%;margin-left:20%;}
.reports-contents-container {width:100%;border:solid 1px #000;}
.row-odd {width:100%;color:#000;clear:both;background-color:#f6f5b3;}
.row-even {color:#39f;clear:both;}
.rank, .name, .points-title, .points {float:left;}
.rank {width: 10%;}
.name {width:70%;}
.points-title {width:10%;}
.points {width:10%;text-align:right;;

-->
</style>
</head>
<body>
<div class="report-container">
<div class="report-header">
9:25 PM 02/08/12 Version 12.0 Page 1<br />
Copyright (C) 2004-2010 by Charlie <br />
Producer: 0 Day<br />
Contact: Day <br />
Location: GA<br /><br />
<strong>Results for 01/27/12</strong></div>
</div>
<div class="report-contents">
<div class="reports-contents-container">
<div class="row-odd"><div class="rank">1st</div><div class="name">Example</div><div class="points-title">Points:</div><div class="points">10.0</div></div>
<div class="row-even"><div class="rank">2nd</div><div class="name">Example</div><div class="points-title">Points:</div><div class="points">9.0</div></div>
<div class="row-odd"><div class="rank">3rd</div><div class="name">Example</div><div class="points-title">Points:</div><div class="points">8.0</div></div>
<div class="row-even"><div class="rank">4th</div><div class="name">Example</div><div class="points-title">Points:</div><div class="points">7.0</div></div>
<div class="row-odd"><div class="rank">5th</div><div class="name">Example</div><div class="points-title">Points:</div><div class="points">6.0</div></div>
<div class="row-even"><div class="rank">6th</div><div class="name">Example</div><div class="points-title">Points:</div><div class="points">5.0</div></div>
</div>
</div>
</div>
</div>
</body>

[edited by: alt131 at 1:45 am (utc) on Feb 10, 2012]
[edit reason] Thread Tidy [/edit]

Border and background difference

LukeDouglas

LukeDouglas

Fotiman

alt131

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week