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)

10+ Year Member

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)

10+ Year Member

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)

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

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)

WebmasterWorld Senior Member 5+ Year Member

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?

Featured Threads

Hot Threads This Week

Hot Threads This Month