1. Home
  2. Forums Index
  3. Browser Side / CSS 11:39 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

IE6/7 Agree, FF chokes.

100% valid XHTML Code that FF chokes on and IE loves...

         

chippymonk

5:57 am on Nov 10, 2008 (gmt 0)

10+ Year Member



So this is completely new to me... Usually when I run into major display issues, it's IE that's being well... IE... but this time, both IE 6, and 7 agree and display the site 100% correct. Firefox 2/3 on the other hand... Just throws up and the site looks terrible...
I've run both the XHTML code of the pages and the CSS code through the W3 validator and it comes back 100% correct, but firefox is just destroying the page layout...

A little explanation here: R1,R2 etc and their sub elements are 100% width block elements for each "row" of the content.
There is a div class called "holder" which is the actual width of the site layout and contains the content for each of those rows.
The main reason for choosing to do this as opposed to one block with the content in rows was because the color stripes of each "row" are meant to extend to the edges of the page.
If you want to save yourself some time in piecing together the pages to see what I mean, just open the page on our beta server in IE and FF and you'll see exactly what I mean... FireFox is completely destroying the code and block elements are being floated into rows they don't exist in for some odd reason. I've checked this code over and over again for the past 4 hours and I can't find a single thing that would cause those elements to float into cells they don't belong in...

<snip>

Any help would be much appreciated as I am at my wits end with this...

XHTML Transitional 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="lib/css/style.css" />
<link rel="stylesheet" type="text/css" href="lib/css/sub.css" />
<link rel="stylesheet" type="text/css" href="lib/css/features.css" />
<link rel="stylesheet" type="text/css" href="lib/css/transmenu.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HealthPay 24 :: Features</title>
<script language="javascript" type="text/javascript" src="lib/js/transmenu.js"></script>
</head>
<body onload="init();">
<div id="r1">
<div class="holder">
<div id="r1_r_grad"></div>
<div id="r1_logo"><a href="/index.php"><img src="images/logo.gif" width="286" height="104" alt="HealthPay 24" /></a></div>
<div id="r1_nav">
<div id="nav_1">Product Features</div>
<div id="nav_2">Demo Schedule</div>
<div id="nav_3">Our Philosophy</div>
<div id="nav_4">News</div>
<div id="nav_5">Contact Us</div>
</div>
</div>
</div>
<div id="r2">
<div class="holder">
<div id="r2_grad_l"></div>
<div id="r2_grad_r"></div>
</div>
</div>
<div id="r3">
<div class="holder">
<div id="r3_grad_l"></div>
<div id="r3_content">
<div id="r3_content_view_but"><a href="javascript:void(0);"><img src="images/view_demo.png" width="203" height="49" alt="View Demo" title="View Demo" id="DEMO" /></a></div>
<div id="r3_content_text">Achieving Excellence in HealthCare<br />
Point-of-Service Collection Management</div>
<div id="r3_content_text_shadow">Achieving Excellence in HealthCare<br />
Point-of-Service Collection Management</div>
</div>
<div id="r3_grad_r"></div>
</div>
</div>
<div id="r4">
<div class="holder">
<div id="r4_grad_l"></div>
<div id="r4_grad_r"></div>
</div>
</div>
<div id="r5">
<div class="holder" style="background-color:#EEEFEF;">
<div id="r5_grad_l"></div>
<div id="content">
<div class="crow">
<div class="subhead">
<div class="l"></div>
<div class="h">Product Features</div>
<div class="r"></div>
</div>
</div>
<div class="crow">
<div class="cbox">
<h1>We have the tools you need</h1>
<div>Robust reporting, integrated financial counseling featuring payment plans with Equifax credit reports, and cash management tools help make HealthPay24 the premier point-of-service collection management solution for acute care facilities.</div>
</div>
</div>
</div>
<div id="r5_grad_r"></div>
<div id="learnmore">
<div class="header">Learn more about HealthPay24&reg;</div>
<div class="li">Point-of-service Collections</div>
<div class="li">Collection Management</div>
<div class="li">Financial Counceling</div>
<div class="li">Automated Cashiering</div>
<div class="li">Online Payment</div>
</div>
</div>
</div>
<div id="r6">
<div class="holder">
<div id="r6_block"></div>
</div>
</div>
<div id="copyright">
<div class="holder">
<div style="float:left">Designed &amp; Maintained By: Visual Strategies</div>
<div>Copyright &copy; 2008, ImageVision.net, Inc. All rights reserved. Do not duplicate or redistribute.</div>
</div>
</div>
<script language="javascript" type="text/javascript" src="lib/js/transmenu-init.js"></script>
</body>
</html>

CSS From external sheets 

/* CSS Document */
body, td, img {
display:block;
}
img {
border:none;
}
body {
margin:0px;
text-align:center;
color:#000000;
background-color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
background-color:#003BAA;
}
div.holder {
width:971px;
height:auto;
display:block;
margin-left:auto;
margin-right:auto;
position:relative;
}
#r1 {
width:100%;
height:104px;
display:block;
position:relative;
background-color:#FFFFFF;
text-align:left;
}
#r1_logo {
width:286px;
height:104px;
position:absolute;
left:0px;
top:0px;
}
#r1_nav {
width:591px;
height:51px;
position:absolute;
display:block;
left:377px;
top:53px;
background:url(../../images/nav_bg.jpg);
text-align:center;
font-family:Garamond, "Times New Roman";
font-size:18px;
color:#7E7F81;
cursor:pointer;
}
#r1_nav div:hover{
color:#006322;
}
#nav_1 {
width:145px;
height:51px;
display:block;
float:left;
position:relative;
padding-top:16px;
background-image:url(../../images/nav_break.png);
background-repeat:no-repeat;
background-position:top right;
}
#nav_2 {
width:135px;
height:51px;
display:block;
float:left;
position:relative;
padding-top:16px;
background-image:url(../../images/nav_break.png);
background-repeat:no-repeat;
background-position:top right;
}
#nav_3 {
width:139px;
height:51px;
display:block;
float:left;
position:relative;
padding-top:16px;
background-image:url(../../images/nav_break.png);
background-repeat:no-repeat;
background-position:top right;
}
#nav_4 {
width:63px;
height:51px;
display:block;
float:left;
position:relative;
padding-top:16px;
background-image:url(../../images/nav_break.png);
background-repeat:no-repeat;
background-position:top right;
}
#nav_5 {
width:109px;
height:51px;
display:block;
float:left;
position:relative;
padding-top:16px;
}
#r1_r_grad {
width:3px;
height:104px;
position:absolute;
left:968px;
top:0px;
background:url(../../images/r1_right_grad.jpg);
}
#r2 {
width:100%;
height:15px;
display:block;
position:relative;
background-color:#003BAA;
}
#r2_grad_l {
width:3px;
height:15px;
background:url(../../images/r2_grad.jpg);
background-repeat:no-repeat;
display:block;
position:absolute;
left:0px;
top:0px;
}
#r2_grad_r {
width:3px;
height:15px;
background:url(../../images/r2_grad.jpg);
background-repeat:no-repeat;
display:block;
position:absolute;
left:968px;
top:0px;
}
#r3 {
width:100%;
height:216px;
display:block;
position:relative;
background-color:#006322;
}
#r3_content {
width:965px;
height:216px;
display:block;
position:absolute;
left:3px;
top:0px;
background:url(../../images/r3_content.jpg);
background-repeat:no-repeat;
}
#r3_content_view_but {
width:203px;
height:49px;
position:absolute;
left:96px;
top:128px;;
}
#r3_content_text {
width:452px;
height:auto;
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:22px;
color:#FFC938;
display:block;
position:absolute;
left:20px;
top:31px;
z-index:3;
}
#r3_content_text_shadow {
width:452px;
height:auto;
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:22px;
color:#000000;
display:block;
position:absolute;
left:19px;
top:30px;
z-index:2;
}
#r3_grad_l {
width:3px;
height:216px;
background:url(../../images/r3_grad.jpg);
background-repeat:no-repeat;
display:block;
position:absolute;
left:0px;
top:0px;
}
#r3_grad_r {
width:3px;
height:216px;
background:url(../../images/r3_grad.jpg);
background-repeat:no-repeat;
display:block;
position:absolute;
left:968px;
top:0px;
}
#r4 {
width:100%;
height:16px;
display:block;
position:relative;
background-color:#003BAA;
}
#r4_grad_l {
width:3px;
height:15px;
background:url(../../images/r4_grad.jpg);
background-repeat:no-repeat;
display:block;
position:absolute;
left:0px;
top:0px;
}
#r4_grad_r {
width:3px;
height:15px;
background:url(../../images/r4_grad.jpg);
background-repeat:no-repeat;
display:block;
position:absolute;
left:968px;
top:0px;
}
#r5 {
width:100%;
height:auto;
display:block;
position:relative;
background-color:#ACADB1;
}
#r5_cbox_l {
width:345px;
height:250px;
display:block;
float:left;
margin-left:3px;
display:block;
line-height:1.4;
text-align:left;
background-color:#EEEFEF;
z-index:5;
}
#r5_cbox_l div {
margin-top:12px;
margin-left:12px;
margin-right:12px;
}
#r5_cbox_l h1 {
color:#003BAA;
font-size:14px;
font-weight:bold;
}
#r5_cbox_m {
width:296px;
height:250px;
display:block;
float:left;
position:relative;
background-color:#FFFFFF;
text-align:left;
}
#r5_cbox_m div.header {
width:286px;
height:43px;
text-align:center;
background:url(../../images/r5_header.jpg);
background-repeat:no-repeat;
display:block;
margin-left:5px;
margin-top:5px;
padding-top:14px;
color:#003BAA;
font-size:16px;
font-weight:bold;
}
#r5_cbox_m div.li {
min-height:13px;
display:block;
background:url(../../images/li_arrow.gif);
background-position:left;
background-repeat:no-repeat;
margin-left:24px;
margin-bottom:14px;
font-size:16px;
color:#006322;
font-weight:bold;
padding-left:15px;
cursor:pointer;
}
#r5_cbox_m div.li:hover {
background:url(../../images/li_arrow_hov.gif);
background-position:left;
background-repeat:no-repeat;
}
#r5_cbox_r {
width:324px;
height:250px;
display:block;
float:left;
position:relative;
text-align:left;
background-color:#EEEFEF;
}
#r5_cbox_r div.header {
width:314px;
height:43px;
text-align:left;
background:url(../../images/r5_header_news.jpg);
background-repeat:no-repeat;
display:block;
margin-left:5px;
margin-top:5px;
padding-top:14px;
padding-left:8px;
color:#003BAA;
font-size:16px;
font-weight:bold;
}
#r5_cbox_r div.p {
line-height:1.4;
margin-left:22px;
margin-bottom:12px;
margin-right:36px;
display:block;
position:relative;
padding-bottom:12px;
}
#r5_cbox_r div.m {
display:block;
color:#006322;
font-weight:bold;
width:55px;
height:18px;
position:absolute;
right:36px;
bottom:0px;
cursor:pointer;
text-align:right;
}
#r5_grad_l {
width:3px;
height:250px;
background:url(../../images/r5_grad.jpg);
background-repeat:no-repeat;
display:block;
float:left;
}
#r5_grad_r {
width:3px;
height:250px;
background:url(../../images/r5_grad.jpg);
background-repeat:no-repeat;
display:block;
float:right;
}
#r6 {
width:100%;
height:43px;
display:block;
position:relative;
background-color:#003BAA;
}
#r6_block {
width:965px;
height:43px;
background:url(../../images/r6_bg.jpg);
background-repeat:repeat-x;
display:block;
position:absolute;
left:3px;
top:0px;
}
#copyright {
width:100%;
height:32px;
display:block;
position:relative;
}
#copyright div {
text-align:right;
color:#FFFFFF;
font-size:10px;
}
#r3_content {
background:url(../../images/sub/header/features.jpg);
}
#content {
width:646px;
height:100%;
float:left;
display:block;
height:auto;
background-color:#EEEFEF;
}
#content div.crow {
width:646px;
display:block;
}
div.cbox {
width:605px;
height:auto;
display:block;
float:left;
line-height:1.4;
text-align:left;
z-index:5;
margin-left:12px;
}
div.cbox div {
margin-left:12px;
margin-right:12px;
padding-bottom:6px;
line-height:1.5;
background-image:url(../../images/sub/features/content_footer.jpg);
background-repeat:no-repeat;
background-position:bottom center;
display:block;
}
div.cbox div.li {
min-height:13px;
display:block;
background:url(../../images/li_arrow.gif);
background-position:left;
background-repeat:no-repeat;
margin-left:24px;
margin-bottom:14px;
font-size:16px;
color:#006322;
font-weight:bold;
padding-left:15px;
cursor:pointer;
}
div.cbox div.li:hover {
background:url(../../images/li_arrow_hov.gif);
background-position:left;
background-repeat:no-repeat;
}
div.cbox h1 {
color:#003BAA;
font-size:14px;
font-weight:bold;
}
#learnmore {
width:296px;
height:250px;
display:block;
float:right;
position:relative;
background-color:#FFFFFF;
background-image:url(../../images/sub/features/bg_r.gif);
background-position:top left;
background-repeat:no-repeat;
text-align:left;
padding-left:23px;
}
#learnmore div.header {
width:286px;
height:43px;
text-align:center;
background:url(../../images/r5_header.jpg);
background-repeat:no-repeat;
display:block;
margin-left:5px;
margin-top:5px;
padding-top:14px;
color:#003BAA;
font-size:16px;
font-weight:bold;
}
#learnmore div.li {
min-height:13px;
display:block;
background:url(../../images/li_arrow.gif);
background-position:left;
background-repeat:no-repeat;
margin-left:24px;
margin-bottom:14px;
font-size:16px;
color:#006322;
font-weight:bold;
padding-left:15px;
cursor:pointer;
}
#learnmore div.li:hover {
background:url(../../images/li_arrow_hov.gif);
background-position:left;
background-repeat:no-repeat;
}
div.subhead {
float:left;
display:block;
position:relative;
left:8px;
top:5px;
height:44px;
width:auto;
overflow:hidden;
background:url(../../images/sub/headerbg.jpg);
cursor:default;
}
div.subhead div.l {
display:block;
float:left;
height:44px;
width:8px;
background:url(../../images/sub/headerleft.jpg);
}
div.subhead div.h {
display:block;
float:left;
height:34px;
width:auto;
color:#006322;
text-align:center;
font-family:Garamond, "Times New Roman";
font-size:22px;
margin-top:10px;
font-weight:bold;
}
div.subhead div.r {
display:block;
float:left;
height:44px;
width:8px;
background:url(../../images/sub/headerright.jpg);
}

[edited by: swa66 at 10:22 pm (utc) on Nov. 10, 2008]
[edit reason] No personal URLs, please see forum charter [/edit]

swa66

10:35 pm on Nov 10, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



That's a lot of code for so little description of what's wrong between what you want and what it gives you.

Try describing the problems you have one-by one (very long code posts like this one tend to get ignored by many members)

E.g. If you have a floated div inside another div that needs to stretch to enclose the floated div, then the trick is to add something in the outer div that is not floated and has the right clear on it.

Simple solution: 


  <div>
    <div id="idea">
      content
    </div> 
    text here
    <br class="clear" />
  </div>


#idea {
  float:right;
}
.clear {
  clear:right;
}

That an element should not stretch for it's floated children is what's supposed to happen. Try not to develop in IE to avoid being put on the wrong foot.

chippymonk

4:36 am on Nov 11, 2008 (gmt 0)

10+ Year Member



Oy such a simple solution... Thanks so much lol

To clarify for people who may come across this thread again with the same problem:

The code is below: #r5 is a 100% wide div with height:auto. It sets a background color that is to extend to the edges of the window for aesthetic purposes of the layout.

Inside it is the div.holder class which is the actual width of the site layout and set to l/r margin auto and display block to center it in ie/ff/etc.

Inside the holder div is the content of that "row" which is dynamic and may change on each page. We needed a way to make sure the r5 div resized vertically to extend the colors to the edges based on the height of the content.

To do this we used the solution provided. Adding a br.clear class with the attribute clear:both; since we float content to both sides of the content div.

As you'll see in the HTML code, there is a <br class="clear /> at the end of the content to insure that it adjusts the div tags according to the height of the content in them.

The relevant code is below. I hope it helps someone :)

Thanks again!

Relevant HTML:


<div id="r5">
<div class="holder" style="background-color:#EEEFEF;">
<div id="r5_grad_l"></div>
<div id="content">
<div class="crow">
<div class="subhead">
<div class="l"></div>
<div class="h">Product Features</div>

<div class="r"></div>
</div>
</div>
<div class="crow">
<div class="cbox">
<h1>We have the tools you need</h1>
<div>Robust reporting, integrated financial counseling featuring payment plans with Equifax credit reports, and cash management tools help make HealthPay24 the premier point-of-service collection management solution for acute care facilities.</div>
</div>
</div>
</div>
<div id="r5_grad_r"></div>
<div id="learnmore">
<div class="header">Learn more about HealthPay24&reg;</div>
<div class="li">Point-of-service Collections</div>
<div class="li">Collection Management</div>

<div class="li">Financial Counceling</div>
<div class="li">Automated Cashiering</div>
<div class="li">Online Payment</div>
</div>
<br class="clear" />
</div>
</div>

Relevant CSS:


div.holder {
width:971px;
height:auto;
display:block;
margin-left:auto;
margin-right:auto;
position:relative;
}
#r5 {
width:100%;
height:auto;
display:block;
background-color:#ACADB1;
position:relative;
}
#r5_grad_l {
width:3px;
height:250px;
background:url(../../images/r5_grad.jpg);
background-repeat:no-repeat;
display:block;
float:left;
}
#r5_grad_r {
width:3px;
height:250px;
background:url(../../images/r5_grad.jpg);
background-repeat:no-repeat;
display:block;
float:right;
}
#content {
width:646px;
height:auto;
float:left;
display:block;
background-color:#EEEFEF;
position:relative;
}
#content div.crow {
width:646px;
display:block;
}
br.clear {
clear:both;
}
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 11:39 pm May 1, 2026