homepage Welcome to WebmasterWorld Guest from 54.242.231.109
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Border and background difference
LukeDouglas




msg:4416107
 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

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

 

LukeDouglas




msg:4416108
 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.

Fotiman




msg:4416126
 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:
[quirksmode.org...]

To fix your issue, try adding overflow: auto to your .reports-contents-container.

alt131




msg:4416205
 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