fieldset en IE

rudy69 · #1 (**permalink**) 12/06/2010, 16:40

Tengo un problema con IE, es que le he puesto un backgound a un fieldset y en IE se ve horrible xD, he buscado en la web y el tema no es muy tocado.

El problema para se ve claramente en esta pagina:
http://www.456bereastreet.com/lab/st...ited/fieldset/

La legenda del fieldset de firefox, se ve diferente a la de IE, quiero que se vea tal y cual como la del Firefox, he tratado de ajustarlo pero ya me rendi, no lo hago cuadrar. Esto es lo que tengo:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fielset bonito</title>
<style type="text/css">
fieldset {
    background-color: #F0F2F4;
    border: 1px solid #3A4856;
    padding:0px 3px;
    margin:0px 3px;
}
 
fieldset legend {
    background-color: #3A4856;
    color: #FFFFFF;
    font-weight: bold;
    padding:1px 5px;
    margin:-8px 5px;
}
</style>
</head>
<body bgcolor="#808080">
<fieldset>
<legend>Mi tema</legend>
Haca va el asunto
</fieldset>
 
</body>
</html>

masterojitos · #2 (**permalink**) 12/06/2010, 17:03

Para esos casos, lo mejor muchas veces es tener una clase o css por navegador o version....

Suerte

rudy69 · #3 (**permalink**) 12/06/2010, 17:11

@masterojitos
Muchas gracias por tu respuesta, pero tengo una pequenia duda: Como se hace eso?

dots3r · #4 (**permalink**) 13/06/2010, 22:28

Para IE puedes usar los comentarios condicionales:

Código:

<![if !IE]>...<![endif]>

Dentro de ellos puedes poner directamente el codigo CSS o enlazar normalmente a una hoja de estilos.

Suerte

alexk · #5 (**permalink**) 13/06/2010, 22:39

dots3r creo que seria.

Código HTML:

Ver original<!--[if IE]>...<![endif]-->

rudy69
aun que... yo lo haria con un div (position:relative;) y un span (position:absolute;) u otro div para el "titulo" y asi simular el fieldset...

dots3r · #6 (**permalink**) 14/06/2010, 14:14

jajaja muy cierto, no supe ni lo que escribí xD

Suerte

rudy69 · #7 (**permalink**) 15/06/2010, 11:03

@alexk es la solucion mas facil que veo, pero a su vez, no me gusta porque es muy trabajado habiendo unas etiquetas especiales para eso, pos tocara a los usuarios de IE verlo feo, no es mi problema jajaja XD

alexk · #8 (**permalink**) 15/06/2010, 12:36

rudy69

Cita:

no me gusta porque es muy trabajado habiendo unas etiquetas especiales para eso

es que semanticamente los fieldset son para formularios pero bueno...

deirdre · #9 (**permalink**) 15/06/2010, 17:35

alexk

dice:

"es que semánticamente los fieldset son para formularios pero bueno..."

Por fin un post sensato en este hilo: el conjunto fieldset-legend es para usar en formularios, para agrupar fácilmente conceptos homogéneos, por ejemplo, grupo 1: nombre, dirección, email... -grupo 2: profesión, estudios, intereses, etc.

Otra cosa es que a rudy69 le guste la estética de estos elementos y quiera darles otros usos. Existen formas fáciles de lograrlo y que, además, se ven de igual forma en todos los navegadores.

El problema de fieldset es que si se le aplica un fondo, siempre se deparrama por la parte de arriba en internet explorer (6, 7 y 8: se ve que no han querido arreglarlo!!...) y produce un efecto tremendamente feo (cosa que llegará a la mayoría de los usuarios si sumamos las tres versiones del navegador más utilizado).

La mejor propuesta de solución es no usar estos elementos (si llevan fondo) y aplicar otras soluciones que sirvan para todos los usuarios.

Saludos

Edito: rudy69, si estás interesado y muestras cómo lo estás haciendo (ya que se trata de aprender en este foro), te puedo proporcionar una solución de aspecto universal.

rudy69 · #10 (**permalink**) 15/06/2010, 17:44

@alexk, no estoy hablando de gramatica por lo de semantica, y en lo uso para un formulario -.-.

Cosa que hace que mis formularios se vean feos, en ninguna parte he mencionado algo refiriendome en que los uso y mucho menos que no sea en un formulario, come on!.

rudy69 · #11 (**permalink**) 15/06/2010, 17:48

@deirdre, a ver, que solucion tienes en mente, me suena intrigante ... xD

deirdre · #12 (**permalink**) 15/06/2010, 18:27

Hola rudy69

Como digo en mi último post si estás interesado en una solución "no fieldset legend" que sirve tanto para formularios como para cualquier otro uso, empieza tu la composición y yo te la termino si es necesario...

Saludos

alexk · #13 (**permalink**) 15/06/2010, 19:43

Cita:

Iniciado por rudy69

@alexk, no estoy hablando de gramatica por lo de semantica, y en lo uso para un formulario -.-.

Cosa que hace que mis formularios se vean feos, en ninguna parte he mencionado algo refiriendome en que los uso y mucho menos que no sea en un formulario, come on!.

bueno, eso me figure, igual no das mucha info de tu problema (codigo XTHML/CSS ni url) como te indican, pon el codigo que llevas y vemos que se puede hacer para ayudarte

... otra opcion es como te indicaba con posicion absoluta.