Formularios [Alineación, Filebox]

[jam1138]

Saludos a todos :

LLevo poco días manejando CSS... y me esta agradando , pero ahora me topé con un problema que ya le "he movido" por todos lados y hayo manera de conseguir lo que quiero .... espero me puedan ayudar.

Se trata de hacer una sección para subir múltiples archivos... cómo esta opción quiero este "a la mano" pensé en ponerla como un recuadro dentro del contenido. El producto final sería algo así:
(Click aquí si no se visualiza la imágen)

(La imágen la árme copiando, cortando y pegando de las mismas pruebas que iba haciendo)

Pueden ver lo que tengo >> aquí <<. He dejado solo lo que --según yo-- esta bien, hago comentarios en el mismo código.

Pués bien...
- En FireFox el formulario "sale" del área que le asigné... en Iexplorer permanece dentro pero me ensancha esa área (o ya no veo bien?).
- No hayo la manera de alinear el Textbox+"Título: " y el Filebox para que abarquen el mismo espacio... no me pregunten que he intentado... ya no tengo ni idea... he hecho de todo...
- En FF el Filebox me lo agranda (la altura) más... ¿tendré que crear un estilo particular para este elemento y para cada navegador?? .
- No me respeta los border del botón "Examinar..." en FF... ¿caso perdido?...

Añadiría la pregunta: Así como se pueden crear estilos para las etiquetas en general (input { .... }), ¿se puede crear estilos directamente para lso diferentes tipos de etiquetas (input type=text {...})????; esto para evitar tener que hacer siempre el <input type="text" class="..."> si todos van a ser iguales....

Cuelquier ayuda, comentario, sugerencia, alternativa será bienvenida (de verdad llevo bastante con esto). Gracias de antemano.
PD: Los botónes de abajo aún no tienen estilo.. no van a quedar así . El botón "+" añadiría un nuevo grupo de Filebox y Textbox... digo! por si se lo preguntaban .

[AlvaroG]

para alinear el texto y la caja de texto, meté las dos cosas en un div con vertical-align : middle. Creo que debería funcionar.

Con respecto a la otra pregunta: no, no se puede. no podés dar estilo según un atributo.

Saludos.

[AlZuwaga]

Con respecto a la respuesta de la otra pregunta (?), ¿no se hace así?:

input[type="text"] {...}

Al menos es lo que entendí de éste enlace: http://www.tierradenomadas.com/tw007.phtml (+- promediando la página)

[AlvaroG]

tienes razón, me disculpo.
No sabía que eso era posible.
Sin embargo, es probable que los navegadores no tengan buen soporte para esto.

Saludos.

[jam1138]

Iniciado por alvlin

para alinear el texto y la caja de texto, meté las dos cosas en un div con vertical-align : middle. Creo que debería funcionar.

Eso sería para alinearlos verticalmente ¿no?... esa no es la cuestión; mi problema era (es...) hacer coincidir el texto MÁS el Texbox (juntos) CON el Filebox... que tengan el mismo ancho y abarquen todo el espacio posible (con un pequeño margen, claro)...

Bueno... logré hacerlo utilizando el atributo "size" del Filebox, quitándole el padding a <fielset> y centrando su contenido:

Código HTML:

<!-- En la hoja de estilos -->
fieldset {
	margin-bottom:7px;
	text-align:center; 
	padding:0px 0px 4px 0px; <!-- Solo le dejo espacio abajo -->
}

<!-- En el HTML (lo simplifico) -->
<fieldset> <legend>Archivo X</legend>
      <input type="file" name="archivo[]" size="12"> <!-- uso "size" -->
      <label>T&iacute;tulo: </label>
      <input type="text" name="titulo[]">
</fieldset> 

(el link esta actualizado por si quieren verlo)
Pués si bien logré alinearlos... no me gustó esta forma; ¿qué pasará cuándo quiera cambiar de estilo??, ¿tendré que atenerme a el tamaño del Filebox?? ... ojalá haya una manera con CSS puro...

Respecto a el input[type="text"], lo pobré pero no funcionó con IExplorer... leí por ahí así es dicho comportamiento... lo mismo pasa con los input:focus por ejemplo... habrá que asignarle el estilo directamente...

... igual queda el tema de que con FF el Filebox no me toma los bordes y es más alto de lo que debiera... ojalá haya manera...

Gracias por sus comentarios...
(¿por qué ya no carga la imágen que coloqué?)

[jam1138]

... he visto con Iexplorer hay un "movimiento" al ir posicionandose por los texboxes; el margen entre "Archivo 1" y "Archivo 2" se achica!!!! .. otra más: ¿alguién sabe por qué?; los estilos de cuando esta normal y cuando tiene el foco son los mismos salvo el color de fondo y del border (nada que ver con tamaños) y todos tienen el mismo JavaScript... pareciera sucede con el último textbox... igual me cambia el color del borde del botón submit... ... tan bien que iba