Elemento de formulario que no respeta la alineación vertical de CSS en Opera

He insertado un formulario de motor de búsqueda personalizado de Google dentro de una barra de navegación, pero no puedo conseguir que se alinee en el centro en Opera. Todos los navegadores respetan perfectamente la alineación vertical (¡sí !, incluso IE ... ¡guau!).Elemento de formulario que no respeta la alineación vertical de CSS en Opera

Puede consultarlo en www.micod.cat (el sitio no está en inglés, pero puede ver fácilmente el cuadro de búsqueda en la barra de menú, a la derecha). Opera está empujando el campo de entrada del formulario al ras contra la parte superior y eso es incorrecto.

Aquí está el CSS para ese elemento:

#menu li.find form div { 
    padding: 0; 
    margin: 0; 
    height: 50px; 
    line-height: 50px; 
    vertical-align: middle; 
}

Cualquier mentes brillantes para ofrecer una idea por favor? ¡Muchas gracias!

Fuente

2011-06-06 user706600

no sé por qué, o lo que está pasando, pero antes de la colocación de un  <input type="q" .. /> arregla.

Debe esperar una respuesta mejor, pero si no llega, al menos esto funciona.

Fuente

2011-06-06 08:56:52 thirtydot

Parece que lo hace el estricto doctype, pero también un pequeño '& nbsp' ... Y bueno, cambiar el DOCTYPE ha surgido con muchos otros efectos secundarios en otras áreas del sitio, así que, supongo que el pequeño, pero no insignificante, pequeño espacio en blanco gana por una milla. Otro caso de David (espacio en blanco) derrotando a Goliath (doctype) !!!! No puedo agradecer lo suficiente. Muchas gracias chicos. ** ¡Rock! ** – user706600

No es el contenido que desea alinear, sino la imagen dentro del contenido.

#menu li.find form div img{ vertical-align: middle; }

y mirando a su sitio que necesitará:

#menu ul.nav li.find { padding-top: 10px; }

Fuente

2011-06-06 08:56:32

No hay elementos '' dentro img' li.find', por lo que no hará nada. Agregar el 'padding-top' arreglará Opera, pero romperá todos los demás navegadores. Deberías usar Dragonfly para probar ideas de antemano ('CTRL + SHIFT + I'). – thirtydot

Utilicé Dragonfly para las correcciones que publiqué pero veo que romperá otros navegadores, eche un vistazo a la publicación de DOCTYPE por @clairesuzy –

El problema es el Doctype, cambiándolo a uno estricto o uno HTML lo arregla, p.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>

el doctype de transición XHTML significa Opera hace en el modo "casi estándar", aunque bastante razón por la que afectaría esto no sé, - Opera Doctype Switches

Fuente

2011-06-06 09:37:53 clairesuzy

Si tienes razón (no hice la prueba, supongo que lo hiciste): ¡buen trabajo! – thirtydot

El Doctype funciona de hecho, pero también destruye otras secciones del sitio web actualmente en funcionamiento, que por supuesto tiene un problema en el ** tt para solucionarlo. Por lo tanto, he decidido ir con la solución simplista y mágica propuesta por @thirtydot, una maravillosa y hermosa '& nbsp' ... taaadaaaa !!! Gracias de todos modos. Nunca hubiera pensado que el Doctype tuviera algo que ver con eso de todos modos. – user706600

Elemento de formulario que no respeta la alineación vertical de CSS en Opera

Respuesta

Cuestiones relacionadas