Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Border and background difference

12:16 am on Feb 10, 2012 (gmt 0)

New User

10+ Year Member

joined:Dec 15, 2004
posts: 10
votes: 0

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

<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;;

<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 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>

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

12:17 am on Feb 10, 2012 (gmt 0)

New User

10+ Year Member

joined:Dec 15, 2004
posts: 10
votes: 0

If you copy this code into your browser, you can see as I couldn't post a screenshot.
1:57 am on Feb 10, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
votes: 24

Actually, Firefox and Chrome have it right. The problem is with the floats. There's a good description of what's going on here:

To fix your issue, try adding overflow: auto to your .reports-contents-container.
10:24 am on Feb 10, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0

Hi fotiman - great to see you around!

@LukeDouglas welcome to css. :)
I know you didn't ask about this issue, but the content does seem to be tabular data. Have you considered marking it up as a table?