Foros del Web » Creando para Internet » CSS »

Estilo CSS perdido al perder el foco del control

Estas en el tema de Estilo CSS perdido al perder el foco del control en el foro de CSS en Foros del Web. Hola a todos. Tengo un problema que me está volviendo loco y no logro encontrar la solución. Es un tema muy extraño que sólo me ...
  #1 (permalink)  
Antiguo 08/07/2009, 09:55
 
Fecha de Ingreso: enero-2009
Ubicación: Elche
Mensajes: 59
Antigüedad: 15 años, 3 meses
Puntos: 3
Estilo CSS perdido al perder el foco del control

Hola a todos.

Tengo un problema que me está volviendo loco y no logro encontrar la solución.
Es un tema muy extraño que sólo me ocurre en Internet Explorer (En Firefox va bien, para variar).

El problema es el siguiente: tengo un formulario que contiene textboxes, selects y botones. Cuando escribo en un textbox y paso al siguiente (ya sea con el tabulador o pinchando en otro textbox) el primero pierde su estilo y su texto, y cuando paso el ratón por encima el texto se vuelve a ver, pero el estilo no.
Con los botones también me pasa algo parecido, cuando salgo de uno de ellos con el tabulador se borra el texto, y al pasar el ratón por encima se vuelve a ver.

Ya he mirado y no hay nada de javascript, CSS ni HTML que cambie esto. Me ocurre tanto en IE6 como en IE7, pero en Firefox y Safari no lo hace, en esos navegadores va bien.

Si alguien tiene alguna idea, indicio o sugerencia se lo agradecería muchísimo, ya que no puedo avanzar con el trabajo debido a este problema.

Muchas gracias de antemano.
Un saludo.

Edito: Por lo que he podido comprobar, los controles están perdiendo la segunda clase, es decir si tengo un class="estilo1 estilo2" se está perdiendo el estilo2.

Por otra parte, el tema de perder el valor en los controloes, he probado por javascript y el valor lo mantiene, solo que no lo está mostrando, posiblemente porque el color que esté tomando sea el mismo que el del background, y no sé por qué puede ser.
__________________
Jada Web. Servicios informáticos.
http://www.jadaweb.es

Última edición por Bernad; 08/07/2009 a las 10:51 Razón: Mejor especificación del problema
  #2 (permalink)  
Antiguo 08/07/2009, 11:57
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 10.106
Antigüedad: 15 años, 8 meses
Puntos: 2237
Respuesta: Estilo CSS perdido al perder el foco del control

- IE6 no sabe aplicar dos clases class="clase1 clase2"
- Lo otro parece un problema del tipo "haslayout", tal vez tienes algunos elementos con float, pero sin ver tu codigo es dificil averiguarlo.
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 09/07/2009, 01:05
 
Fecha de Ingreso: enero-2009
Ubicación: Elche
Mensajes: 59
Antigüedad: 15 años, 3 meses
Puntos: 3
Respuesta: Estilo CSS perdido al perder el foco del control

El tema de las dos clases lo he solucionado dejando solo una. Gracias por la aclaración.

Respecto al otro tema, sí que tengo algún elemento con float. A ver si me deja poner el código.
El atributo 'float' está al final del código CSS.

Éste es el formulario:

Código:
<!-- ows_prompt operator's data HTML code -->
<div id="ows_ovrl" style="display: none;">&nbsp;</div>
<div id="ows_ww" style="display: none;">
	<div id="ows_win">
		<div id="ows_w">
			<div id="ows_container">
				<p><div align="right"><label class="mandatory">* <atleap:message key="tenders.operator.form.mandatoryFields"/></label></div></p>
				<p><span id="lbText" style="text-align:justify; ">
					<atleap:message key="tenders.operator.form.disclaimerText1"/>
					<a href="<atleap:content identifier="disclaimer_url"/>" target="_blank"><atleap:message key="tenders.operator.form.disclaimer"/></a>
					<atleap:message key="tenders.operator.form.disclaimerText2"/>
				</span><br /><br /></p>
				<table cellpadding="0" cellspacing="0">
				<form name="economicOperatorApplicationForm" method="post" action="/ows/econoperator/save.do" id="applicationForm">
					<input type="hidden" name="resourceId" id="resourceId" value="<%=request.getParameter("id")%>" />
					<tr>
						<td><label class="mandatory">* </label><label><atleap:message key="tenders.operator.form.name"/>:</label></td>
						<td colspan="3"><input type="text" class="w_long" id="txtName" name="name" onKeyPress="if((event.keyCode==10)||(event.keyCode==13)) ows_clk(1); if (event.keyCode==27) ows_clk(0);"></td>
					</tr>
					<tr>
						<td><label class="mandatory">* </label><label><atleap:message key="tenders.operator.form.company"/>:</label></td>
						<td colspan="3"><input type="text" class="w_long" id="txtCompany" name="company" onKeyPress="if((event.keyCode==10)||(event.keyCode==13)) ows_clk(1); if (event.keyCode==27) ows_clk(0);"></td>
					</tr>
					<tr>
						<td><label class="mandatory">* </label><label><atleap:message key="tenders.operator.form.address"/>:</label></td>
						<td colspan="3"><input type="text" class="w_long" id="txtAddress" name="address" onKeyPress="if((event.keyCode==10)||(event.keyCode==13)) ows_clk(1); if (event.keyCode==27) ows_clk(0);"></td>
					</tr>
					<tr>
						<td><label class="mandatory">* </label><label><atleap:message key="tenders.operator.form.cp"/>:</label></td>
						<td colspan="3"><input type="text" class="w_long" id="txtCP" name="postalCode" onKeyPress="if((event.keyCode==10)||(event.keyCode==13)) ows_clk(1); if (event.keyCode==27) ows_clk(0);" onkeydown="return onlyFiveDigits(event);"></td>
					</tr>
					<tr>
						<td><label class="mandatory">* </label><label><atleap:message key="tenders.operator.form.city"/>:</label></td>
						<td colspan="3"><input type="text" class="w_long" id="txtCity" name="city" onKeyPress="if((event.keyCode==10)||(event.keyCode==13)) ows_clk(1); if (event.keyCode==27) ows_clk(0);"></td>
					</tr>
					<tr>
						<td><label class="mandatory">* </label><label><atleap:message key="tenders.operator.form.country"/>:</label></td>
						<td colspan="3">
							<%
								// obtain countries' names if language changes
								String countriesLang = (String)(session.getAttribute("countriesLang"));
								String lang = ((java.util.Locale)(request.getSession().getAttribute("org.apache.struts.action.LOCALE"))).getLanguage();
								if (countriesLang == null || countriesLang != lang) { %>
									<atleap:messageSet key="ows.country" var="countries" scope="session"/>
							<%		session.setAttribute("countriesLang", lang);
								}
							%>
							<select name="country" id="selectCountry">
								<atleap:iterator var="country" items="${countries}" >
									<option value="${country.key}">${country.value}</option>
								</atleap:iterator>
							</select>
						</td>
					</tr>
					<tr>
						<td><label class="mandatory">* </label><label><atleap:message key="tenders.operator.form.phone"/>:</label></td>
						<td><input type="text" class="w_short" id="txtPhone" name="phone" onKeyPress="return isNumberKey(event);if((event.keyCode==10)||(event.keyCode==13)) ows_clk(1); if (event.keyCode==27) ows_clk(0);"></td>
						<td><label class="mandatory">* </label><label><atleap:message key="tenders.operator.form.fax"/>:</label></td>
						<td><input type="text" class="w_short" id="txtFax" name="fax" onKeyPress="return isNumberKey(event);if((event.keyCode==10)||(event.keyCode==13)) ows_clk(1); if (event.keyCode==27) ows_clk(0);"></td>
					</tr>
					<tr>
						<td><label class="mandatory">* </label><label><atleap:message key="tenders.operator.form.emailAddress"/>:</label></td>
						<td colspan="3"><input type="text" class="w_long" id="txtEmail" name="email" onKeyPress="if((event.keyCode==10)||(event.keyCode==13)) ows_clk(1); if (event.keyCode==27) ows_clk(0);"></td>
					</tr>
					<tr id="errorRow" class="mandatory">
						<td></td>
						<td colspan="3"><!-- <label class="mandatory" id="labelError"> -->
							<atleap:messages invert="true" />
						<!-- </label> -->
						</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td colspan="3">
							<input type="button" class="btn_short" id="ows_ok" onclick="ows_clk(1);" value="OK">
							<input type="button" class="btn_short" id="ows_cancel" onclick="ows_clk(0);" value="Cancel">
							<input type="button" class="btn_short" id="ows_clear" onclick="ows_clk(2);" value="Clear">
						</td>
					</tr>
				</form>						
				</table>
				<p><div align="right"><a href="<atleap:content identifier="disclaimer_url"/>" target="_blank"><atleap:message key="tenders.operator.form.disclaimer"/></a></div></p>
			</div> <!-- // ows_container -->
		</div> <!-- // ows_win -->
	</div> <!-- // ows_ww -->
</div> <!-- // ows_ovrl -->
<!-- // ows_prompt operator's data HTML code -->
Éste el código CSS:

Código:
/* CSS Document with modifications for Call for Tender*/
#ows_ovrl {
background-color: black;
-moz-opacity: .4; opacity: .4;
top: 0; left: 0; position: fixed;
width: 100%; height:100%; z-index: 99;
}
#ows_ww 	{ position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; text-align: center;}
#ows_win 	{ margin: 10% 0 auto 35%; width: 400px; text-align: left;}
#ows_w 		{background-color: white; padding: 3px; border: 2px solid black; background-color: #EEE;}
#ows_t 		{color: white; margin: 0 0 2px 3px; font-family: Arial, sans-serif; font-size: 10pt;}
#ows_w span {font-family: Arial, sans-serif; font-size: 10pt;}
#ows_w div 	{margin:10px 10px 10px 10px;}
#ows_w table				{width:100%;}
#ows_w table input.w_short	{width:75px; background-color:#FFFFFF !important;}
#ows_w table input.w_long	{width:100%; background-color:#FFFFFF !important;}
#ows_w select				{width:101%; background-color:#FFFFFF !important;}
#ows_w table,
#ows_w table tr,
#ows_w table td	{background-color:#EEE; border-color:#EEE;}

#ows_ovrl a		{color:#016394;}
#ows_w a		{color:#016394;}

/*#ows_container	select, input	{background-color:#FFFFFF !important;}*/
#ows_container	input.btn_short	{width: 75px;}

.mandatory			{color:#990000;}

/* These styles override oami_website.css stylesheet (otherwise, in IE, operator's data form appears badly */
#Main form			{padding:0; float:none; margin-bottom:0;}
#Main form label	{float:left; width:auto; background:#EEE; padding:0;}
¿Cómo podría influir 'float' para que no se viera el texto?

Muchas, muchas gracias por la ayuda.
__________________
Jada Web. Servicios informáticos.
http://www.jadaweb.es
  #4 (permalink)  
Antiguo 09/07/2009, 03:45
 
Fecha de Ingreso: enero-2009
Ubicación: Elche
Mensajes: 59
Antigüedad: 15 años, 3 meses
Puntos: 3
De acuerdo Respuesta: Estilo CSS perdido al perder el foco del control

SOLUCIONADO.

Triby estaba en lo cierto, la supuesta "pérdida" de datos, que no era pérdida porque el control seguía conteniendo el valor, era debida al float.

Lo he resuelto de esta manera:

Código:
#Main form			{padding:0; float:none; margin-bottom:0; width:auto;}
#Main form label	{width:auto; float:left; background:#EEE; padding:0;}
El primero con float:none y width:auto (antes no tenía width).
El segundo con float:left (para que se vea como yo quiero) y width:auto, para que coja toda la anchura del td.

Consejo para gente que le pase algo parecido en el futuro: Probad bien las combinaciones de float/clear y usadlos siempre acompañados de width, sino el navegador no lo interpretará.

Muchísimas gracias, Triby. Te debo una.
__________________
Jada Web. Servicios informáticos.
http://www.jadaweb.es
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:38.