homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Gold Sponsor 2015!
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Border and background difference

10+ Year Member

Msg#: 4416105 posted 12:16 am on Feb 10, 2012 (gmt 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]



10+ Year Member

Msg#: 4416105 posted 12:17 am on Feb 10, 2012 (gmt 0)

If you copy this code into your browser, you can see as I couldn't post a screenshot.


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

Msg#: 4416105 posted 1:57 am on Feb 10, 2012 (gmt 0)

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.


WebmasterWorld Senior Member 5+ Year Member

Msg#: 4416105 posted 10:24 am on Feb 10, 2012 (gmt 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?

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved