Jump to content

<div> in FF

Jerry62704

By Jerry62704
in CSS

Recommended Posts

Jerry62704 Member

Jerry62704

Posted
Posted

In a process where I'm trying to replace a table with div tags, I've found a problem with FireFox. That is the divs stack on top of each other when there is wordwrapping. (Code in box)In IE, this spaces the divs so there is a space between them. In FF, the divs stack up over eachother obscuring the text.

<!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="es"> --><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> <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>Calculadora De la Elegibilidad De la Estampilla Del Alimento</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/FSCalcInputShell.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 align="center">Calculadora De la Elegibilidad De la Estampilla Del Alimento</h1>      <div class="linkAlign">         <a href="/FSCalc/FSInputCalc.do?lang=en">            <strong>English</strong></a>            |          <a href="/FSCalc/FSInputCalc.do?lang=es">            <strong>Español</strong></a></div>       <div id="content">         <!-- <h3>Calculadora De la Elegibilidad De la Estampilla Del Alimento</h3> --><form name="FSCalcInputForm" method="post" action="/FSCalc/calculateFS.do">   <fieldset title="Household Information/Información del Hogar"/>      <legend>Información del Hogar</legend>      <div style="width:100%; height:3em">         <div class="formTextAlign">            <label for="numInHH">Número de Miembros en el Hogar</label></div>         <div class="formBoxAlign">            <input type="text" name="numInHH" maxlength="2" size="2" value="" id="numInHH"></div>      <div>      <div style="width:100%; height:3em">         <div class="formTextAlign">            <label for="numberOfChildrenUnder2">Número de niños menores de 2 años de edad por los que se paga cuidado por el dependiente</label></div>         <div class="formBoxAlign">            <input type="text" name="numberOfChildrenUnder2" maxlength="2" size="2" value="" id="numberOfChildrenUnder2"></div>      <div>      <div style="width:100%; height:3em">         <div class="formTextAlign">            <label for="numberOfChildrenOver2">Número de niños mayores de 2 años de edad por los que se paga cuidado por el dependiente</label></div>         <div class="formBoxAlign">            <input type="text" name="numberOfChildrenOver2" maxlength="2" size="2" value="" id="numberOfChildrenOver2"></div>      <div>      <div style="width:100%; height:3em">         <div class="formTextAlign">            <label for="qualifyingMember">¿Hay alguien en el hogar que sea mayor de 60 años, ciego o discapacitado?</label></div>         <div class="formBoxAlign">            <select name="qualifyingMember" id="qualifyingMember"><option value="false" selected="selected">No</option>               <option value="true">Sí</option></select></div>      <div>      <div style="width:100%; height:3em">         <div class="formTextAlign">            <label for="simplifiedProcessingUnitInd">¿Reciben todos los miembros del hogar TANF, SSI o GA?</label></div>         <div class="formBoxAlign">            <select name="simplifiedProcessingUnitInd" id="simplifiedProcessingUnitInd"><option value="false" selected="selected">No</option>               <option value="true">Sí</option></select></div>      </div>   </fieldset>   <fieldset title="Household Income/Ingresos y Bienes del Hogar">      <legend>Ingresos y Bienes del Hogar</legend>      <div class="formTextAlign">         <label for="grossIncome">Ingreso bruto ganado o de trabajo <i>(mensual)</i></label></div>      <div class="formBoxAlign">         <input type="text" name="grossIncome" maxlength="6" size="6" value="" id="grossIncome"></div>	      <div class="formTextAlign">         <label for="otherIncome">Otro ingreso <i>(mensual)</i></label></div>      <div class="formBoxAlign">         <input type="text" name="otherIncome" maxlength="6" size="6" value="" id="otherIncome"></div>      <div class="formTextAlign">         <label for="assets">Bienes</label></div>      <div class="formBoxAlign">         <input type="text" name="assets" maxlength="6" size="6" value="" id="assets"></div>   </fieldset>   <fieldset title="Household Expenses/Gastos del Hogar">      <legend>Gastos del Hogar</legend><!--  <h2><font size="2" face="bold">         Gastos del Hogar</font></h2> -->      <div align="right">         <div class="formTextAlign">            <label for="dependentCare">Costo del cuidado de dependientes <i>(mensual)</i></label></div>      <div class="formBoxAlign">         <input type="text" name="dependentCare" maxlength="5" size="5" value="" id="dependentCare"></div>      <div class="formTextAlign">         <label for="childSupport">Cantidad de mantenimiento de niños ordenado por la corte <i>(mensual)</i></label></div>      <div class="formBoxAlign">         <input type="text" name="childSupport" maxlength="5" size="5" value="" id="childSupport"></div>      <div class="formTextAlign">         <label for="medicalExpenses">Gastos médicos para ancianos o personas discapacitadas <i>(mensual)</i></label></div>      <div class="formBoxAlign">         <input type="text" name="medicalExpenses" maxlength="5" size="5" value="" id="medicalExpenses"></div>	      <div class="formTextAlign">         <label for="rentExpense">Renta / hipoteca <i>(mensual)</i></label></div>      <div class="formBoxAlign">         <input type="text" name="rentExpense" maxlength="5" size="5" value="" id="rentExpense"></div>      <div class="formTextAlign">         <label for="insuranceTaxes">Seguros e impuestos <i>(mensual)</i></label></div>      <div class="formBoxAlign">         <input type="text" name="insuranceTaxes" maxlength="5" size="5" value="" id="insuranceTaxes"></div>   </fieldset>   <fieldset title="Standard Utility Allowances/Cantidad estándar permitida para servicios públicos">      <legend><label for="utilityStandard">Cantidad estándar permitida para servicios públicos</label></legend>      <div class="formBoxAlign2">         <select name="utilityStandard" class="longdroplists" id="utilityStandard"><option value="none">Ninguno</option>            <option value="liheap">¿Está solicitando, recibiendo o espera solicitar para el programa de asistencia para energía (LIHEAP)?</option>            <option value="heat">¿Paga por calefacción o aire acondicionado?</option>            <option value="multi">¿Paga por más de un servicio público excluyendo calefacción o aire acondicionado?</option>            <option value="single">¿Paga por más de un servicio público excluyendo calefacción, aire acondicionado y teléfono?</option>            <option value="tele">¿Paga por teléfono solamente?</option></select></div>   </fieldset>   <div id="buttons">      <br />       <br />      <span>         <input type="submit" name="submit" value="¡Calcule Ahora!" class="buttonstyle">      </span>               <span>         <input type="reset" value="Restaure" class="buttonstyle">      </span>   </div></form></div>      <div id="footer"> </div>         <div id="disclaimer">      <h2 align="center"><font size="4">        Aviso</font></h2>      De acuerdo con Ley Federal y el Departamento de Agricultura de los EE.UU. (USDA) y los reglamentos del Departamento de Salud y Servicios Humanos (HHS), se prohíbe que esta institución discrimine basándose en raza, color, origen étnico, sexo, edad, discapacidad, religión o creencia política. Para registrar una queja de discriminación, comuníquese con el Departamento de Servicios Humanos (DHS), USDA o HHS. La información para comunicarse es la siguiente:      <ul><li>Department of Human Services, EEO office, 401 South Clinton St, 7th Floor, Chicago, Illinois, 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, o llame al 202-720-5964 (Voz / TTY)</li> <li>U.S. Department of Health and Human Services, Director, Office for Civil Rights, Room 506-F, 200 Independence Avenue, S.W. Washington, D.C. 20201 o llame al  202-619-0403 (Voz) o 202-619-3257 (TTY / Teletipo)</li> </ul>      DHS, USDA y HHS son proveedores y empleadores que ofrecen igualdad en las oportunidades.   </div>   </div></body></html>

It is mostly pronounced with Spanish due to the verboseness of the language. The above code displays OK at small fonts where the words don't wordwarp.TIA

Link to comment
Share on other sites
Jerry62704 Member

Jerry62704

Posted
  • Author
Posted

Sorry for the late reply. Meetings, bloody meetings. "Style.CSS":

body, input, select, textarea, button, table { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 80%; }input, select, textarea, button, table { font-size: 100%; }#SkipNavigationDiv, #ToolBarDiv { font-size: 90%; }#OfficeLocatorDiv, #MainRightDiv, #BottomDiv { font-size: 90%; }html { margin: 0; padding: 0; background: #f1eee8; }body { margin: 0 2%; padding: 0; background: #dedacf; }#TopDiv { clear: both; width: 100%; margin: 0; padding: 0; }#MainDiv { clear: both; width: 100%; margin: 12px 0 0 0; padding: 0; }#BottomDiv { clear: both; width: 100%; margin: 0; padding: 0;}#TopLeftDiv { background: transparent url("images/HeaderBackground.jpg") no-repeat 0 0; }#TopRightDiv { z-index: 0; position: relative; clear: both; width: 100%;  min-height: 98px; _height: 98px; _height /**/: 100px; margin: 1px 0 0 0; padding: 1px 0; background: #644F81 url("images/BannerBackground.jpg") no-repeat 0 0; }#MainLeftDiv { margin: 0 12px 0 0; padding: 0; }#MainMiddleDiv { margin: 0; padding: 0; background: #fff url("images/BottomRightCorner.gif") no-repeat 100% 100%; color: #333; }#MainMiddleDiv #ContentDiv { margin: 0; padding: 12px 12px 18px 12px; background: transparent url("images/TopRightCorner.gif") no-repeat 100% 0; }#MainRightDiv { margin: 0 0 0 12px; padding: 0; }.oneColumnLayout #MainLeftDiv { display: none; }.oneColumnLayout #MainMiddleDiv { float: left; width: 99%; }.oneColumnLayout #MainRightDiv { display: none; }.twoColumnLeftLayout #MainLeftDiv { float: left; width: 20%; }.twoColumnLeftLayout #MainMiddleDiv { float: left; width: 78%; }.twoColumnLeftLayout #MainRightDiv { display: none; }.twoColumnRightLayout #MainLeftDiv { display: none; }.twoColumnRightLayout #MainMiddleDiv { float: left; width: 73%; }.twoColumnRightLayout #MainRightDiv { float: left; width: 24.2%; }.threeColumnLayout #MainLeftDiv { float: left; width: 20%; }.threeColumnLayout #MainMiddleDiv { float: left; width: 53%; }.threeColumnLayout #MainRightDiv { float: left; width: 24%; }#SkipNavigationDiv { position: absolute; left: -10000px; float: left; width: auto; padding: 0 0 0 6px; }#ToolBarDiv { padding: 0 6px 0 0; text-align: right; }#HeaderDiv { float: left; width: auto; clear: both; margin: 3px; padding: 0; line-height: 1.1; }#HeaderDiv img { float: left; width: 5.15em; margin: 1px 3px; padding: 0; border-style: none; }#HeaderDiv .agency  { display: block; color: #555; font-weight: bold; }#HeaderDiv .secretary { display: block; color: #777; font-size: 85%; }#HeaderDiv a { text-decoration: none; }#HeaderDiv br { display: none; }#QuickSearchDiv { padding: 6px; text-align: right; }#QuickSearchDiv label { position: absolute; left: -10000px; }#QuickSearchDiv input.textbox { width: 180px; border: 1px solid #999; color: #333; vertical-align: middle; }#QuickSearchDiv input.button { position: relative; top: 0; width: 64px; height: 20px; margin: 0; padding: 0; padding-bottom: 2px; *padding-bottom: 0; border: none; background: transparent url("images/ButtonBackground.gif") no-repeat 50% 50%; color: #fff; font-weight: bold; vertical-align: middle; }#TabBarDiv { clear: both; width: 100%; min-height: 2.35em; _height: 2.35em; background: #C84B13 url("images/TabBarBackground.gif") repeat-x 0 100%; }#TabBarDiv h2 { position: absolute; left: -10000px; }#TabBarMenu { float: right; margin: 6px 3px 0 3px; padding: 0; list-style: none; }#TabBarMenu .tab { z-index: 1; position: relative; float: left; width: 11em; margin: 0 1px; padding: 0; text-align: right; }#TabBarMenu .tab a { display: block; position: relative; color: #fff; font-weight: bold; text-decoration: none; }#TabBarMenu .tab .background { display: block; position: relative; _height /**/: 0; }#TabBarMenu .tab .left { padding-left: 4px; background: transparent url("images/TabBackgroundLeft.gif") no-repeat 0 0; }#TabBarMenu .tab .right { padding-right: 4px; background: transparent url("images/TabBackgroundRight.gif") no-repeat 100% 0; }#TabBarMenu .tab .middle { padding: .25em 1em; background: #ca5112 url("images/TabBackground.gif") repeat-x 0 0; }#TabBarMenu .tab .script { font-family: "Monotype Corsiva", "Times New Roman", serif; font-size: 120%; font-style: italic; font-weight: normal; }#TabBarMenu .tab.open .left { background-image: url("images/TabBackgroundLeftSelected.gif"); }#TabBarMenu .tab.open .right { background-image: url("images/TabBackgroundRightSelected.gif"); }#TabBarMenu .tab.open .middle { background-color: #df7012; background-image: url("images/TabBackgroundSelected.gif"); }#TabBarMenu .tab.open .menu { left: 1px; }#TabBarMenu .menu { position: absolute; left: -10000px; margin: 0; padding: 0 0 1px 0; border: 1px solid #e87713; border-top-width: 0; background: #df7012; list-style: none; }#TabBarMenu .menu li { width: 10.7em; margin: 0; _margin-left /**/: -16px; padding: 0; text-align: left; }#TabBarMenu .menu a { display: block; margin: 0; padding: 3px 9px; background: #df7012; color: #fff; text-decoration: none; }#TabBarMenu .menu a:hover, #TabBarMenu .menu a:focus, #TabBarMenu .menu a:active { background: #e58735; }#BreadcrumbDiv { margin: 9px 300px 4.5em 12px; line-height: 1.15; }#BreadcrumbDiv h2 { position: absolute; left: -10000px; }#BreadcrumbDiv ol { margin: 0; padding: 0; list-style: none; }#BreadcrumbDiv li { display: inline; margin: 0 0 0 0; *margin-right: 4px; padding: 0 13px 0 0; background: transparent url("images/BreadcrumbSeparator.gif") no-repeat 100% 50%; zoom: 1;}#BreadcrumbDiv a { color: #fff; text-decoration: none; }#BreadcrumbDiv a:hover { text-decoration: underline; }#PageHeadingDiv { position: absolute; bottom: 0; padding: 0 300px 9px 12px; }#PageHeadingDiv h1 { margin: 0; color: #fff; line-height: 1.05; }#PageHeadingDiv h1 img { padding: 0 0 .1em .15em; vertical-align: bottom; }#BannerDiv { position: absolute; top: 0; right: 0; height: 100px; }/*#ContentDiv { overflow: auto; _overflow: visible; min-height: 385px; _height: 385px; }#ItemContentDiv { min-height: 320px; _height: 320px; }*/#OfficeLocatorQuickSearchDiv { overflow: hidden; _overflow: visible; _height: 0; margin: 0 -12px -18px -12px; padding: 9px 6px 6px 12px; background: #ebe7e0 url("images/BottomRightCorner.gif") no-repeat 100% 100%; }#OfficeLocatorQuickSearchDiv h2 { margin: 0; font-size: 100%; }#OfficeLocatorQuickSearchFormDiv { float: left; width: 25em; }#OfficeLocatorCountyDropDownList { width: 10em; }#HotLineDiv { float: left; width: auto; }#HotLineDiv ul, #HotLineDiv li { margin: 7px 0 0 0; padding: 0; list-style: none; }#MainRightDiv h2 { margin: 0; color: #fff; font-size: 100%; text-align: right;}#MainRightDiv h2 .left { display: block; padding-left: 4px; background: transparent url("images/TabBackgroundLeft.gif") no-repeat 0 0; }#MainRightDiv h2 .right { display: block; padding-right: 4px; background: transparent url("images/TabBackgroundRight.gif") no-repeat 100% 0; }#MainRightDiv h2 .middle { display: block; padding: .25em 1.5em; background: #ca5112 url("images/TabBackground.gif") repeat-x 0 0; }#MainRightDiv p { margin: 0; }#MainRightDiv ul { margin: 0; padding: 0; list-style: none; }#QuickLinksDiv, #MenuDiv, #CalendarDiv, #EventsSideBarDiv, #NewsSideBarDiv, #FeaturettesDiv { margin: 0 0 12px 0; padding: 0; }#QuickLinksDiv h2, #FeaturettesDiv h2 { position: absolute; left: -10000px; }#QuickLinksDiv .sidebarbox h2, #FeaturettesDiv .sidebarbox h2 { position: static; left: 0; }#MenuDiv ul, #FeaturettesDiv .sidebarbox ul  { padding: 3px 12px; background: #fff; }#MenuDiv ul ul, #FeaturettesDiv .sidebarbox ul ul  { padding: 3px 0; }#MenuDiv li, #FeaturettesDiv .sidebarbox ul li { margin: .5em 0; padding-left: 15px; background: transparent url("images/Bullet.gif") no-repeat left .25em; }#CalendarDiv h2 .label { position: absolute; left: -10000px; }#CalendarDiv table { width: 100%; margin: 0; border-collapse: collapse; border-style: none; background: #fff; color: #777; font-size: 95%; }#CalendarDiv thead th { background: #ebe7e0; }#CalendarDiv th, #CalendarDiv td { padding: 1px 2px; border: 1px solid #ebe7e0; border-width: 1px 0; text-align: center; }#CalendarDiv table a { display: block; width: 100%; height: 100%; padding: 1px 0px; color: #666; text-align: center; text-decoration: none; }#CalendarDiv table a:hover { background: #fbf7f0; }#CalendarDiv .currentDate { background: #e3efe9;  }#CalendarDiv .displayDate { background: #ebe7e0; }#CalendarDiv .otherMonth { color: #aaa; }#EventsSideBarDiv h2 { position: absolute; left: -10000px; }#EventsSideBarDiv table { width: 100%; margin: 0; border-collapse: collapse; border-style: none; background: #fff; color: #666; }#EventsSideBarDiv thead th { padding: 0; background: #dedacf; color: #fff; font-weight: bold; }#EventsSideBarDiv thead th .left { display: block; padding-left: 4px; background: transparent url("images/TabBackgroundLeft.gif") no-repeat 0 0; }#EventsSideBarDiv thead th .right { display: block; padding-right: 4px; background: transparent url("images/TabBackgroundRight.gif") no-repeat 100% 0; }#EventsSideBarDiv thead th .middle { display: block; padding: 4px; background: #ca5112 url("images/TabBackground.gif") repeat-x 0 0; }#EventsSideBarDiv th, #EventsSideBarDiv td { padding: 4px; border-style: none; font-weight: normal;  }#EventsSideBarDiv img { vertical-align: bottom; }#NewsSideBarItemsDiv  { padding: 3px 12px; background: #fff; }#NewsSideBarItemsDiv li { margin: .5em 0; padding-left: 15px; background: transparent url("images/Bullet.gif") no-repeat 0 .25em; }#CalendarControlsDiv, #NewsSideBarControlsDiv { padding: 3px; background: #ebe7e0; color: #777; text-align: center; font-size: 95%; }#CalendarControlsDiv a, #NewsSideBarControlsDiv a { color: #777; text-decoration: none; }#CalendarControlsDiv a:hover, #NewsSideBarControlsDiv a:hover { text-decoration: underline; }#CalendarControlsDiv .previousLink, #NewsSideBarControlsDiv .previousLink { padding-left: 12px; background: transparent url("images/prev.gif") no-repeat 0 50%; }#CalendarControlsDiv .nextLink, #NewsSideBarControlsDiv .nextLink { padding-right: 12px; background: transparent url("images/next.gif") no-repeat 100% 50%; }#FooterDiv { float: left; width: auto; padding: 6px; color: #333; }#FooterDiv h2 { position: absolute; left: -10000px; }#FooterDiv ul { margin: 0; padding: 0; list-style: none; }#FooterDiv li { display: inline; margin: 0; padding: 0; }#FooterDiv a { margin-left: 6px; padding-left: 6px; background: transparent url("images/LinkSeparator.gif") no-repeat 0 50%; color: #333; text-decoration: none; }#FooterDiv a:hover { text-decoration: underline; }#LoginLinkDiv { padding: 6px 9px 0 6px; text-align: right; }#LoginLinkDiv a { color: #333; text-decoration: none; }#LoginLinkDiv a:hover { text-decoration: underline; }.invisible { position: absolute; left: -10000px; }/* Home Page */.HomePageType .columns .column1 {  }.HomePageType .columns .column2 p { margin: 0 0 .25em 0; }.HomePageType .columns .column3 {  }.HomePageType .columns h2 { margin: 0; }.HomePageType .columns ul { margin: 0; padding: 0; list-style-type: none; }.HomePageType .columns li { margin: 0 0 .5em 0; padding-left: 15px; background: transparent url("images/Bullet.gif") no-repeat 0 .25em; }/* Search */.SearchItemsType #ContentSearchFieldsDiv label { position: relative; top: 3px; float: left; width: 5em;  }.SearchItemsType #ContentSearchFieldsDiv label.checkbox { position: static; float: none; width: auto;  }.SearchItemsType #ContentSearchFieldsDiv input.text { width: 17em;  }.SearchItemsType #ContentSearchFieldsDiv select { width: 17.5em;  }/* Login */.LoginType #LoginDiv label { position: relative; top: 3px; float: left; width: 6em; }.LoginType #LoginDiv #LoginButtonsDiv { padding-left: 6em; _padding-left: 6.2em;  }.LoginType #LoginDiv #LoginButtonsDiv .button { width: 6.25em; }/* Editor */.EditItemType #TopDiv { /* prevent IE peek-a-boo bug: */ line-height: 1.2; }.EditItemType #TabBarDiv { min-height: 6px; height: 6px; font-size: 0; }.EditItemType #TopRightDiv { min-height: 10px; _height: 10px; _height /**/: 12px; margin-bottom: 3px; }.EditItemType #MainMiddleDiv { margin: 0; padding: 0; background: transparent none; }.EditItemType #MainMiddleDiv #ContentDiv { margin: 0; padding: 0; background: transparent none; }.EditItemType #EditMenuDiv { font-size: 85%; }/* Print */@media print {	html { background: #fff; }	body { margin: 0; }	#MainMiddleDiv { color: #000; }}

The page.css is much smaller. The part I added to allow the table replacement via div tags is towards the bottom:

/* 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:		38em;		overflow:	scroll; 		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; 	}

BTW, I have no idea of why the: #container { width: 700px;/* \width: 700px; *//* w\idth: 700px; */are in there. I added the comment as I don't understand why "\width" or "w\idth" are there. Any ideas?

Link to comment
Share on other sites
jlhaslip Devoted Member

jlhaslip

Posted
Posted

They are hacks for legacy browsers. IE5 and 5.5 mac if i remember... maybe netscape 4??Modern Browsers see the comments, they don't, and the slashes affect only specific browsers in their own way.Probably safe to not use the hack these days. They affect a very small percent of the market now.http://archivist.incutio.com/viewlist/css-discuss/48386

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...