Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts

    Question IE v. FF - <div> differences

    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:

    Code:
    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:

    Code:
    <!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:

    Code:
    /* 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

  • #2
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    I guess this must be a tough question as no one can answer it. Sigh.

    Maybe there is a work-a-round?

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by jerry62704 View Post
    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.

    Quote Originally Posted by jerry62704 View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    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.

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •