...

View Full Version : IE v. FF - <div> differences



jerry62704
10-15-2007, 04: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">







<!-- <body STYLE="size: 8.5in 11in"> -->

<!-- <html lang="en"> -->
<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>







<!--Content Area Begins Here-->
<!-- width="660" -->
<h1 class="textCenter">Potential Foodstamp Program Eligibility</h1>

<hr class="textCenter" />

<!-- if allotment amount greater than 0 use one message otherwise use a different one -->
<div style="font-size: 80%;">

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


</div>

<hr class="textCenter" />

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

<!-- this works in IE, but not in FF at larger texts. -->

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

<div class="tblAlignLeftSmallBold">
99</div>
<div class="tblAlignCenter">&nbsp;</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">&nbsp;</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">&nbsp;</div>

<div class="tblAlignLeftSmall">&nbsp;</div>
<div class="tblAlignCenter">&nbsp;</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">&nbsp;</div>
<div class="tblAlignCenter">&nbsp;</div>
<div class="tblAlignLeftBig">&nbsp;</div>
<div class="tblAlignLeftSmall">&nbsp;</div>
</div>

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

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

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

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

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

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

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

</div>

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

<div class="tblAlignCenter">&nbsp;</div>
<div class="tblAlignLeftBig">&nbsp;</div>
<div class="tblAlignLeftSmall">&nbsp;</div>
</div>

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

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

Passed
</div>

</div>

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

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

Passed
</div>
</div>

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

<div class="tblAlignLeftBig">&nbsp;</div>
<div class="tblAlignLeftSmall">&nbsp;</div>
<div class="tblAlignCenter">&nbsp;</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">&nbsp;</div>

<div class="tblAlignLeftBig">&nbsp;</div>
<div class="tblAlignLeftSmall">&nbsp;</div>
</div>

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

<div class="tblAlignCenter">&nbsp;</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

jerry62704
10-18-2007, 04:53 PM
I guess this must be a tough question as no one can answer it. Sigh.

Maybe there is a work-a-round?

Arbitrator
10-18-2007, 05:32 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.You do realize that tables are meant to be used for data association on a grid, right? Why are you converting table elements to div elements when table elements are exactly what is called for here?

Note that only the information in the middle appears to be tabular data. The information at the top and bottom should not be in tables.


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.If you really want to do this anyway, you might try using the max-height, max-width, overflow, and white-space properties to constrain things.

jerry62704
10-18-2007, 06:27 PM
I appreciate the quick response!

We are trying to separate the tables used for positioning from our pages. As none of the data have a causality other than a description and resulting from a calculation piece we were looking at replacing the positioning table with <div> elements.

Due to the problem with having <div> tags maintain positioning sans absolute positioning, we have have to keep the table just for the purpose of positioning things.

I was hoping people with more experience with this would be able to say, "just do this, that and the other and it will work." Simple and direct. Given it works in IE by using a containing <div> to block the four cells, I was hoping it would be a simple matter to get FF to do the same. Sigh.

felgall
10-18-2007, 10:02 PM
Looks like you have caught a bad case of DIVitis. Using divs inappropriately is just as bad as using tables inappropriately.

Use the correct semantically meaningful tags that identify what the pieces or your content are. Apply the styles to those tage. Only use div tags where you need to separate the content into divisions (eg. header, content, footer) or where there is not a semantically correct tag to use.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum