Foros del Web » Creando para Internet » CSS »

Maldito EXPLORER!

Estas en el tema de Maldito EXPLORER! en el foro de CSS en Foros del Web. ¡Muy buenas a todos! Soy relativamente nuevo en las css y tengo un par de problemas con el IE7 que no termino de resolver. Creo ...
  #1 (permalink)  
Antiguo 11/04/2008, 05:24
 
Fecha de Ingreso: marzo-2008
Mensajes: 80
Antigüedad: 9 años, 8 meses
Puntos: 0
Maldito EXPLORER!

¡Muy buenas a todos!

Soy relativamente nuevo en las css y tengo un par de problemas con el IE7 que no termino de resolver. Creo que los dos problemas estan relacionados con lo mismo, ya que en ámbos caso no se dibuja bien algo. Podeís examinar vosotros mismos la web en:

www.trabajillos.es/HTML/misclases.html

El primer problema: Los radio buttons

tengo un pequeño formulario. Así se ve en firefox o safari:


Así se ve en explorer:


el "label" de los radiobuttons aparece vacio o a menudo mal dibujado. Si bajo la barra de desplazamiento abajo y vuelvo a subir, se "repintan" los radibuttons y aparecen bien. Este problema lo tengo solo con el IE 7, NO con el 5.5.

El código HTML es el siguiente:

<div class="recuadre_amb_padding">
<h4> Buscar anuncio </h4>

<form method="get" id="form_busca">
<p>
<input type="radio" name="soy-busco" value="Soy profe"/>
Soy profe
<input type="radio" name="soy-busco" value="Busco profe"/>
Busco profe

</p>
<p>
<label for="provincia"> Província:</label>
....

</p>
<div class="footer-no-border">
<input type="submit" value="Buscar ofertas" /> </div>

</form>


<div class="footer-no-border">
<p><a href="#"> búsqueda avanzada</a></p>
</div>

</div>

aqui el código css del "recuadre-amb-padding"

.recuadre_amb_padding{
background-color:#FFFFFF;
border:medium solid #669933;
clear:both;
text-align:left;
padding:10px;
margin-bottom:10px;
}


-------------------------------------------------------------------------------------------------
Segundo problema

http://www.trabajillos.es/HTML/misOfertas.html

Así se ve en firefox i safari:



Así en IE 7 y en IE5.5



Aquí el código HTML


<div class="recuadre_amb_padding">
<h4> Mis ofertas </h4>

<div class="propostes">

<div class="foto-anunci"> <img src="../Imatges/logos/caraProfe.png" height="80" width="80" alt="foto" /> </div>

<div class="contenidor_fL">
<h2>Soy profe</h2>
<h1>De Mates</h1>
<p>Vic (Barcelona)</p>
</div>

<div class="recuadre_tu_propuesta">
<h5>Tu propuesta</h5>
<span class="preu">20 €</span> / hora en mi casa
</div>

<div class="recuadre_su_propuesta">

<div class="contenidor_fL">
<h5>Su propuesta</h5>
<span class="preu">25 €</span> / hora en mi casa
</div>

<div class="contenidor_fRaR">

<FORM METHOD="LINK" ACTION="#">
<button type="submit" name="aceptarPropuesta"> Aceptar propuesta </button>
</FORM>
<p />
<FORM METHOD="LINK" ACTION="#">
<button type="submit" name="hacerOtraPropuesta"> Hacer otra propusta </button>
</FORM>

</div>

</div>



</div>


</div>

y el css:

.propostes{
border: 2px #FF9999 dotted;
padding:10px;
margin:10px;
}

.recuadre_tu_propuesta, .recuadre_su_propuesta{
background-color:#FFcc99;
clear:both;
text-align:left;
padding:10px;
}

.recuadre_tu_propuesta{
margin-top:10px;
margin-right:0 auto;
margin-left:0 auto;
border-bottom:2px #FFFFFF dotted;
height:60px;
line-height:0.2;
}


.recuadre_su_propuesta{
margin-bottom:10px;
margin-left:0 auto;
margin-right:0 auto;
height:60px;
line-height:0.2;
}

.contenidor_fRaR{
margin-top:5px;
float:right;
text-algin:right;
}

.contenidor_fL{
float:left;
text-algin:left;
}


¿Alguna idea? no se que hace mal el explorer....

Muchas grácias a todos de antemano!

PD: ODIO EL EXPLORER
  #2 (permalink)  
Antiguo 11/04/2008, 06:46
Avatar de dai-media  
Fecha de Ingreso: abril-2008
Ubicación: Hoy aqui, mañana alla!
Mensajes: 61
Antigüedad: 9 años, 8 meses
Puntos: 0
Re: Maldito EXPLORER!

Realmente te puedo decir una cosa pormi experiencia.
Nunca e consequido que un sitio web mie funcione bien en todos los browsers, por tanto estoy intentando a hacer que funciones en los browsers mas populares como explorer, mozilla y si va tambien en opera, estupendo.

Hay que tener en cuenta las raices de donde han evolucionado los browseres y piensado en que a mas browseres de internet, mas problemas para las webs... :(
  #3 (permalink)  
Antiguo 11/04/2008, 08:10
 
Fecha de Ingreso: marzo-2008
Mensajes: 80
Antigüedad: 9 años, 8 meses
Puntos: 0
Re: Maldito EXPLORER!

ya, pero es imprescindible que funcione como mínimo con explorer 7, firefox y safari. Mi pàgina no funciona por explorer, que es el navegador más usado....
  #4 (permalink)  
Antiguo 11/04/2008, 17:34
Avatar de pateketrueke
Modernizr
 
Fecha de Ingreso: abril-2008
Ubicación: Mexihco-Tenochtitlan
Mensajes: 26.399
Antigüedad: 9 años, 8 meses
Puntos: 2526
Re: Maldito EXPLORER!

recomiendo ke desactives los CSS... haber si no solo es el fu*k del IE

pero vamos, el no siempre tiene la culpa....
  #5 (permalink)  
Antiguo 11/04/2008, 23:34
 
Fecha de Ingreso: marzo-2008
Mensajes: 166
Antigüedad: 9 años, 8 meses
Puntos: 5
Re: Maldito EXPLORER!

igual ami me tiene pasado... lo que tube que hacer es borrarlo todo y volverlo a construir el fomulario pero en modo diseño en dreamweaver y solito se reparo, la verdad no se poque, alo mejor unas mayuscula o minusculas que IE no supo interpretar...
porque ni siquiera se puede poner acentos en los comentarios en el IE... en fin...

Saludos.
  #6 (permalink)  
Antiguo 12/04/2008, 04:38
Avatar de Nietzsche  
Fecha de Ingreso: enero-2005
Ubicación: MALAGA-ESPAÑA
Mensajes: 228
Antigüedad: 12 años, 11 meses
Puntos: 0
Re: Maldito EXPLORER!

Hola,
tiene pinta de ser algún atributo margin o padding.

Te aconsejo que desactives todas las capas y las vayas activando una a una a ver cual es el error.

Para crear los css definitivos lo mejor (al menos para mi) es tener un CSS para todos los navegadores excepto IE y crear un css que sólo lea el IE y así corrijes los "fallos" de interpretación del IE.

Esto lo consigues poniendo

Código HTML:
<!--[if IE]>
<link rel="stylesheet" href="IE.css" type="text/css"/>
<![endif]--> 
Una herramienta muy útil que te puede ayudar a detectar estos errores es el Plugin Web developer de Firefox. Es una barra que se añade al firefox y te permite ver las capas y los atributos sobre la web ya cargada en el navegador.

Espero te sea de ayuda.
Un saludo.
__________________
Salud y libertad
  #7 (permalink)  
Antiguo 12/04/2008, 09:48
 
Fecha de Ingreso: marzo-2008
Mensajes: 80
Antigüedad: 9 años, 8 meses
Puntos: 0
Re: Maldito EXPLORER!

Nietzsche, aún no he solucionado el problema, pero el debugger este está de muerte! gracias!
  #8 (permalink)  
Antiguo 12/04/2008, 14:22
Avatar de Nietzsche  
Fecha de Ingreso: enero-2005
Ubicación: MALAGA-ESPAÑA
Mensajes: 228
Antigüedad: 12 años, 11 meses
Puntos: 0
Re: Maldito EXPLORER!

Me alegro que te haya servido. Es muy útil para ver la disposición espacial de las capas.

Hay también otro plugin que sirve para depurar javascript.

Un saludo.
__________________
Salud y libertad
  #9 (permalink)  
Antiguo 12/04/2008, 17:49
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Maldito EXPLORER!

Buenas.

El primer problema, el del formulario, poniendo únicamente el código que copias en el mensaje dentro de un html con el doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

yo lo veo exactamente igual en FF que en IE7.

Sobre el segundo problema, el de las dos cajas separadas y el texto semioculto, se debe a que tienes un parámetro en sus selectores que te sobra:

line-height:0.2;

No sé qué querías hacer con esto, pero eso te causa el problema del texto semioculto.

También veo otro error en esos dos selectores:

margin-left:0 auto;
margin-right:0 auto;

esto declara dos parámetros, que para un selector único como el margen izquierdo por ejemlo, es erróneo. Debería ser:

margin-left:0;
margin-right:0;

o bien

margin-left: auto;
margin-right: auto;

El parámetro múltiple se utiliza cuando vas a declarar por ejemplo los cuatro márgenes en uno sólo, tipo:

margin: 0 auto; ó margin: 0 0 10px 0; por ejemplo.

Mikel.
  #10 (permalink)  
Antiguo 16/04/2008, 10:53
 
Fecha de Ingreso: marzo-2008
Mensajes: 80
Antigüedad: 9 años, 8 meses
Puntos: 0
Re: Maldito EXPLORER!

Muchas gracias Mikel! lo del doctype no ha funcionado, pero lo del line-heigh si!
  #11 (permalink)  
Antiguo 16/04/2008, 11:23
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Maldito EXPLORER!

Me alegro por lo segundo.

En lo primero te decía que yo "poniendo únicamente el código que copias en el mensaje dentro de un html con el doctype...", es decir, que posiblemente sea alguna otra cosa que no has puesto la que afecte a tu código, porque así como te aparecen en blanco las etiquetas de los radio button, poniendo sólo el trozo de código que pusiste se ven perfectamente en FF, IE6 e IE7.

A ver si das con ello. Suerte.

Mikel.
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 04:10.