Campos de captura no permiten ingresar texto

[k_rm]

Hola!

Tengo un archivo css donde declaro estos estilos:

Código:

.buscador{
	width:100%;
	height:52px;
	background-image:url(../images/buscador.png);
	background-color:#FFFFFF;
	background-repeat:no-repeat;
	position:relative;
}

.txtBusqueda input[type=text] {
	width:177px;
	height:12px;
	margin-left:21px;
	margin-top:5px;
	position:relative;
	top:9px;
	background-color:#093;
/*    background:transparent;*/
    border:0px none;	
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#696969;	
	text-align:left;
	padding:4px;
	text-indent:4px;
	cursor:text;
}
 
.lupa {
	width:25px;
	height:25px;
	position:relative;
	background:url(../images/buscador.png);
	background-position: -278px -11px;
	float:right;
	margin-top:-15px;
    border:0px none;
    cursor:pointer;
}

Y la forma en que los mando llamar desde la pagina es:

Código:

          <div class="buscador">
          	<div class="txtBusqueda">
	            <input type="text" value="Buscar" />
            </div>
            <input type="submit" class="lupa" value="_" />
          </div>

Busco aprender la mejor manera de "personalizar" los campos de texto y los botones de una página.

Mis campos se ven bien (y se comportan correctamente en IE8 y en opera).

Pero al ver la misma pagina en otros navegadores: Firefox, Safari o Chrome no puedo ingresar texto en el campo de captura "txtBusqueda" y no puedo dar clic sobre el boton "lupa".

No entiendo por que sucede, si en la misma pagina tengo otros elementos trabajados de la misma forma (son otros campos, pero pertenecen a un "login").

Si sirve como dato extra, estoy trabajando con el framework de "960" a 16 columnas...

Cualquier ayuda es apreciada!!!

Saludos!

;)



- Karen

[IsaBelM]

el problema no es del css, aunque tiene alguna propiedad curiosa, ni del html. tendrás que preguntar en foro de framework, a ver si allí saben decirte

[k_rm]

Iniciado por IsaBelM

el problema no es del css, aunque tiene alguna propiedad curiosa, ni del html. tendrás que preguntar en foro de framework, a ver si allí saben decirte

Hola!

Muchas gracias. Asi lo hare.
Solo por curiosidad, ¿cual seria esa propiedad curiosa?

Gracias!

[ArturoGallegos]

Hola @IsaBelM, pues la curiosidad mato al gato pero hay vengo :p al igual que el compañero @k_rm me salta la curiosidad de cual es la propiedad curiosa? yo no veo nada raro...

te referirás a [type="text"], que eso para mi no es nada inusual.

por cierto compañero tengo entendido que lleva comillas el [type="text"] para el buen funcionamiento en todos los navegadores.

por otro lado quizás las propiedades position, top y background estén chocando y causando un error visual, me a sucedido a mi que el background se ve en un lugar totalmente distinto a donde realmente esta el campo por lo mismo no puedo seleccionarlo, prueba quitar el position y el top haber si por allí anda el problema

[IsaBelM]

Iniciado por Ag666

te referirás a [type="text"], que eso para mi no es nada inusual.

para mí tampoco. no es la propiedad en sí, sino al control que se le está aplicando

text-align:left;
cursor:text;

se le está aplicando a un textfield, cuando esos valores son por defecto

[k_rm]

Muchas gracias Isabel... *facepalm* fue como un pleonasmo en css no? x'DDD

Bueno. Tendre mas cuidado la proxima vez.

Gracias nuevamente. El problema quedo solucionado. Me sobraba un "z-index" en otra parte de la hoja de estilos (curiosamente la que englobaba el cuerpo de la pagina).