IE v. FF - <div> differences [Archive]

jerry62704

10-15-2007, 03:39 PM

I'm working on converting tables to <div> tags as part of a project my area just inherited. The "result" page displays the results of the data the user inputs. Originally, it was positioned using a table and four columns with two pairs of result description and data.

The problem is that when the page is made larger (View|Text-Size in IE or Cntl-+ in FF), it causes the text in either or both sides to wordwarp. In IE that wordwarp is contained by enclosing the pairs in a container <div>. If FF, the colums are thrown out of wack.

Here is the page data:

DHS
Illinois Department of Human Services
Carol L. Adams, Ph.D., Secretary
Helping Families. Supporting Communities. Empowering Individuals.
Potential Foodstamp Program Eligibility
Food Stamp potential eligibility for household, estimated monthly benefit amount of $12,077
Calculation Details (Food Stamps)

Family size
99

Gross Income Limit for Unit Size
$38,053
Gross Income
$0

Net Income Limit for Unit Size
$29,271

Asset Limit for Unit Size
$2,000
Deductions:

- Earned Income Deduction
$0

Your Gross Income Amount
$0
- Standard Deduction
$191

Your Net Income Amount
$0
- Excess Shelter Deduction
$0

Your Asset Amount
$0
- Dependent Care Deduction
$0

- Child Support Deduction (court ordered)
$0

Gross income test
Passed
- Medical Deduction
$0

Net income test
Passed

Asset test
Passed
Total Deductions
$191

Net Income
$0

Potential monthly benefit amount
$12,077
Notice
In accordance with Federal Law, U. S. Department of Agriculture (USDA ), and U.S. Department of Health and Human Services (HHS) policy, the Department of Human Services is prohibited from discriminating on the basis of race, color, national origin, sex, age, disability, religion, or political belief. To file a complaint of discrimination, contact either the Department of Human Services, USDA, or HHS. Contact information is listed below:

* Department of Human Services, EEO/AA Office, 401 S. Clinton Street, 7th floor, Chicago, IL 60607
* U.S. Department of Agriculture, Director, Office of Civil Rights, Room 326-W, Whitten Building, 1400 Independence Avenue, S.W., Washington D.C. 20250-9410 or call (202) 720-5964 (voice and TTY)
* U.S. Department of Health and Human Services, Director, Office for Civil Rights, Room 506-F, HHS Building, 200 Independence Avenue, S.W., Washington, D.C. 20201 or call (202) 619-0403 (voice) (202) 619-3257 (TTY)

DHS, USDA, and HHS are equal opportunity providers and employers.

Hoping that will display correctly (first post here). If not, here is a representation

aaaa aaaa aaaa aaaa 111 bbbb bbbb bbbb bbbb 2222
cccc cccc cccc cccc 333 dddd dddd dddd dddd 4444

But with word wrap in FF, it looks like this:

aaaa aaaa aaaa
aaaa 111 cccc cccc cccc cccc 333
bbbb bbbb bbbb bbbb 2222 dddd dddd dddd dddd 4444

Here is the page code (you can ignore the Struts stuff as it doens't affect how FF or IE displays data:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Pragma" content="no-cache" />

<meta http-equiv="Expires" content="-1" />
<title>Potential Foodstamp Program Eligibility</title>
<link rel="stylesheet" href="/FSCalc/theme/page.css" media="all" />
<link rel="stylesheet" href="http://www.dhs.state.il.us/Sites/OneWeb/Site.css" type="text/css" />
<base href="http://10.21.85.71:8080/FSCalc/pages/FSCalcResultShell.jsp">
</head>

<body bgcolor="white">
<div id="container">

<div id="TopDiv">
<div id="TopLeftDiv">

<div id="HeaderDiv">
<a href="http://www.dhs.state.il.us">
<img src="/FSCalc/theme/images/DHSLogo.gif" title="DHS" alt="DHS"><br />
<span class="agency">Illinois Department of Human Services</span>
<br />
<span class="secretary">Carol L. Adams, Ph.D., Secretary</span></a>
</div>
<div id="TabBarDiv"></div>
</div>

<div id="TopRightDiv">
<div id="BannerDiv">
<img src="/FSCalc/theme/images/banner.jpg" title="Helping Families. Supporting Communities. Empowering Individuals." alt="Helping Families. Supporting Communities. Empowering Individuals.">
</div>
</div>
</div>



<h1 class="textCenter">Potential Foodstamp Program Eligibility</h1>

<hr class="textCenter" />


<div style="font-size: 80%;">

      <b>Food Stamp</b> potential eligibility for household, estimated monthly benefit amount of &nbsp
<b>$12,077</b>

</div>

<hr class="textCenter" />

<h2 class="text"><b>Calculation Details (Food Stamps)</b></h2>
<br />



<div class="text" style="width:100%;">
<div class="tblAlignLeftBig">
Family size</div>

<div class="tblAlignLeftSmallBold">
99</div>
<div class="tblAlignCenter"> </div>
<div class="tblAlignLeftBig">
Gross Income Limit for Unit Size</div>
<div class="tblAlignLeftSmall">
$38,053</div>

</div>

<div class="text" style="width:100%;">
<div class="tblAlignLeftBig" style="top:22em">
Gross Income</div>
<div class="tblAlignLeftSmallBold" style="top:22em">
$0</div>
<div class="tblAlignCenter"> </div>

<div class="tblAlignLeftBig" style="top:22em">
Net Income Limit for Unit Size</div>
<div class="tblAlignLeftSmall" style="top:22em">
$29,271</div>
</div>

<div class="text" style="width:100%;">
<div class="tblAlignLeftBig"> </div>

<div class="tblAlignLeftSmall"> </div>
<div class="tblAlignCenter"> </div>
<div class="tblAlignLeftBig">
Asset Limit for Unit Size</div>
<div class="tblAlignLeftSmall">
$2,000</div>
</div>

<div class="text" style="width:100%;">
<div class="tblAlignLeftBig">
Deductions:</div>
<div class="tblAlignLeftSmall"> </div>
<div class="tblAlignCenter"> </div>
<div class="tblAlignLeftBig"> </div>
<div class="tblAlignLeftSmall"> </div>
</div>

<div class="text" style="width:100%;">
<div class="tblAlignLeftBig">
   <b>-</b> Earned Income Deduction</div>
<div class="tblAlignLeftSmall">
$0</div>
<div class="tblAlignCenter"> </div>

<div class="tblAlignLeftBig">
   Your Gross Income Amount</div>
<div class="tblAlignLeftSmallBold">
$0</div>
</div>

<div class="text" style="width:100%;">
<div class="tblAlignLeftBig">

   <b>-</b> Standard Deduction</div>
<div class="tblAlignLeftSmall">
$191</div>
<div class="tblAlignCenter"> </div>
<div class="tblAlignLeftBig">
   Your Net Income Amount</div>

<div class="tblAlignLeftSmallBold">
$0</div>
</div>

<div class="text" style="width:100%;">
<div class="tblAlignLeftBig">
   <b>-</b> Excess Shelter Deduction</div>

<div class="tblAlignLeftSmall">
$0</div>
<div class="tblAlignCenter"> </div>
<div class="tblAlignLeftBig">
   Your Asset Amount</div>
<div class="tblAlignLeftSmallBold">
$0</div>

</div>

<div class="text" style="width:100%;">
<div class="tblAlignLeftBig">
   <b>-</b> Dependent Care Deduction</div>
<div class="tblAlignLeftSmall">
$0</div>

<div class="tblAlignCenter"> </div>
<div class="tblAlignLeftBig"> </div>
<div class="tblAlignLeftSmall"> </div>
</div>

<div class="text" style="width:100%;">
<div class="tblAlignLeftBig">
   <b>-</b> Child Support Deduction (court ordered)</div>

<div class="tblAlignLeftSmall">
$0</div>
<div class="tblAlignCenter"> </div>
<div class="tblAlignLeftBig">
Gross income test</div>
<div class="tblAlignLeftSmall">

Passed
</div>

</div>

<div class="text" style="width:100%;">
<div class="tblAlignLeftBig">
   <b>-</b> Medical Deduction</div>
<div class="tblAlignLeftSmall">
$0</div>

<div class="tblAlignCenter"> </div>
<div class="tblAlignLeftBig">
Net income test</div>
<div class="tblAlignLeftSmall">

Passed
</div>
</div>

<div class="text" style="width:100%;">

<div class="tblAlignLeftBig"> </div>
<div class="tblAlignLeftSmall"> </div>
<div class="tblAlignCenter"> </div>
<div class="tblAlignLeftBig">
Asset test</div>
<div class="tblAlignLeftSmall">

Passed

</div>
</div>

<div class="text" style="width:100%;">
<hr class="textCenter" />

<div class="tblAlignLeftBig">
Total Deductions</div>
<div class="tblAlignLeftSmall">
$191</div>
<div class="tblAlignCenter"> </div>

<div class="tblAlignLeftBig"> </div>
<div class="tblAlignLeftSmall"> </div>
</div>

<div class="text" style="width:100%;">
<div class="tblAlignLeftBig">
Net Income</div>
<div class="tblAlignLeftSmall">
$0</div>

<div class="tblAlignCenter"> </div>
<div class="tblAlignLeftBig">
<span class="ql">Potential monthly benefit amount</span></div>
<div class="tblAlignLeftSmallBold">
$12,077</div>
</div>

<div class="textCenter" style="width:100%;">

<hr />
<input type="submit" value="Go Back To Food Stamp Eligibility Calculator" onclick="javascript:history.back()" style="font-size: 8pt" class="buttonstyle"></div>

<div id="footer"></div>

<div id="disclaimer">
<h2 align="center"><font size="4">
Notice</font></h2>
In accordance with Federal Law, U. S. Department of Agriculture (USDA ), and U.S. Department of Health and Human Services (HHS) policy, the Department of Human Services is prohibited from discriminating on the basis of race, color, national origin, sex, age, disability, religion, or political belief. To file a complaint of discrimination, contact either the Department of Human Services, USDA, or HHS. Contact information is listed below:
<ul><li>Department of Human Services, EEO/AA Office, 401 S. Clinton Street, 7th floor, Chicago, IL 60607 </li> <li>U.S. Department of Agriculture, Director, Office of Civil Rights, Room 326-W, Whitten Building, 1400 Independence Avenue, S.W., Washington D.C. 20250-9410 or call (202) 720-5964 (voice and TTY) </li> <li>U.S. Department of Health and Human Services, Director, Office for Civil Rights, Room 506-F, HHS Building, 200 Independence Avenue, S.W., Washington, D.C. 20201 or call (202) 619-0403 (voice) (202) 619-3257 (TTY)</li> </ul>

DHS, USDA, and HHS are equal opportunity providers and employers.
</div>

</div>

</body>
</html>

And here is the CSS:

/* style sheet for food stamp calculation quick sheet */

/* container, banner, content, sidebar-a, sidebar-b, footer are used to define the */
/* overall structure of the page. */
#container {
width: 700px;
/* \width: 700px; */
/* w\idth: 700px; */
border: 1px solid gray;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}

#banner {
padding: 5px;
margin-bottom: 5px;
background-color: #002452;
background-image: url(images/dhs_banner.gif);
background-position: center;
background-repeat: no-repeat;
height: 60px ;
}

#content {
padding: 5px;
margin-left: 20px;
margin-right: 20px;
background-color: white;
}

#contentnomargins {
color: black;
padding: 5px;
background-color: white;
}

#sidebar-a {
float: left;
width: 100px;
/* \width: 100px; */
/* w\idth: 100px; */
margin: 0;
margin-right: 5px;
padding: 5px;
/* background-color: #6382b5; */
}

#sidebar-b {
float: right;
width: 100px;
/* \width: 100px; */
/* w\idth: 100px; */
margin: 0;
margin-left: 5px;
padding: 5px;
/* background-color: #6382b5; */
}

#footer {
clear: both;
padding: 5px;
margin-top: 5px;
background-color: #947ab9;
}

#disclaimer {
padding: 5px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
background-color: white;
}

#buttons {
text-align : center ;
}

/* basic tags */
h1 {
color: black;
font-weight: bold;
font-family: Times New Roman;
margin: 0px;
clip: rect(0px 0px 0px 0px);
font-size: 152%
}

h2 {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 77%;
margin: 0px;
clip: rect(0px 0px 0px 0px);
color: #002452;
}

h3 {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 122%;
margin: 0px;
clip: rect(0px 0px 0px 0px);
color: #002452;
}

p {
margin-top: 0px;
clip: rect(0px auto auto auto);
}

b {
color: #002452;
}

a {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
color: #002452;
}

discl {
font-size: 16pt;
color: black;
}

.ql {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 77%;
margin: 0px;
clip: rect(0px 0px 0px 0px);
font-weight: bold
}

a:hover {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}

/* controls the width of the label entries within the form */
label, span.spacer {
width:430px;
}

/* controls long drop lists */
.longdroplists {
float:right;
}

/* controls the look of text on buttons */
.buttonstyle {
font-family: Lucida, Arial, Veranda, Helvetica, sans-serif;
font-size: 107% ;
color: #000000 ;
font-weight: bold ;
cursor: hand ;
text-align: center ;
}

/* any horizontal rule will clear any preceding float */
hr {
clear:both;
}

/* set the common properties for: label, input, select, and option */
label, input, select, option {
font-family: Lucida, Arial, Veranda, Helvetica, sans-serif;
font-size: 107%;
color: #000000 ;
font-weight: normal ;
text-align: right ;
}

/* cascade the label properties, and add a bold font weight */
label {
font-weight : normal;
}

/* sets the padding, border, and margin for the fieldset container in the form */
fieldset {
border: 1px solid #000066;
/* margin-bottom: 15px; */
padding: 5px;
}

/* sets the font for the form legend */
legend {
font-size: 107%;
font-weight: bold;
}

/* sets the font properties for labels within the form */
.text {
font-family: Lucida, Arial, Veranda, Helvetica, sans-serif;
font-size: 107%;
color: #000000;
font-weight: normal;
/* jd cursor: hand; */
}

/* left over from real benefits example */
.pagetitles {
color: #036;
font-weight: normal;
font-size: 92%;
line-height: 15pt;
font-family: Arial, Helvetica, sans-serif
}

.pagetitles2 {
color: #6382b5;
font-weight: bold;
font-size: 13pt;
font-family: Arial, Helvetica, sans-serif
}

.fieldnamesarial12 {
color: #6382b5;
font-weight: normal;
font-size: 77%;
font-family: Arial, Helvetica, sans-serif;
border: 2px
}

.formfields {
color: black;
font-size: 100%;
background-color: #a9c2ee;
text-align: center;
border: ridge 0px #000000;
background-color: #666633
}

.titles {
font-family: Arial, Helvetica, sans-serif;
font-size: 93%;
font-weight: bold;
color: black;
font-weight: bold;
}

/* ************************************************************ */
/* *** align inputboxes via css */
.formTextAlign {
height: 1.8em;
text-align: right;
width: 87%;
float: left;
}

.formBoxAlign {
height: 1.8em;
text-align: left;
width: 12%;
float: right;
}

.formBoxAlign2 {
height: 3.5em;
margin-right: 3px;
text-align: left;
width: 100%;
overflow: auto;
float: right;
}

.linkAlign {
margin-right: 3%;
text-align: right;
padding-bottom: 6px;

}
.textCenter {
text-align: center;
}

.textLeftBold {
text-align: left;
font-weight: bolder;
font-size: 100%;
color: darkblue;
}

.textBold {
text-weight: bold;
}

/* ************************************************************ */
/* simulate a table - put the floating cells in a div to hold */
/* them for wordwrapping */
.tblAlignLeftBig {
text-align: left;
font-weight: normal;
width: 37%;
float: left;
margin-right: 8px;
}

.tblAlignLeftSmall {
text-align: right;
font-weight: normal;
vertical-align: text-bottom;
width: 8.4%;
float: left;
}

.tblAlignLeftSmallBold {
text-align: right;
font-weight: bold;
width: 8.4%;
float: left;
}

.tblAlignCenter {
width: 4%;
float: left;
}

The appropriate classes are at the bottom.

TIA,
Jerry