Foros del Web » Creando para Internet » CSS »

Problemas con Firefox pero no con IE6!!

Estas en el tema de Problemas con Firefox pero no con IE6!! en el foro de CSS en Foros del Web. Hola Buenos días! Aprovecho para presentarme, soy Strate y estoy emprendiendo algunos proyectos web, así que tengo muuuucho que aprender, pero bueno, a ello voy. ...
  #1 (permalink)  
Antiguo 16/09/2010, 03:53
 
Fecha de Ingreso: septiembre-2010
Mensajes: 14
Antigüedad: 7 años, 3 meses
Puntos: 2
Problemas con Firefox pero no con IE6!!

Hola Buenos días!

Aprovecho para presentarme, soy Strate y estoy emprendiendo algunos proyectos web, así que tengo muuuucho que aprender, pero bueno, a ello voy.

Queria preguntaros por el problema que tengo con un tema, y es que tengo una página la cual estoy maquetando que se ve bien en IE6 pero no en Firefox, os pongo una imágen que vale más que mil palabras.

Firefox:


IE6:


Como decía el problema es que debe quedar como lo muestra IE pero no consigo hacerlo.

A continuación os pongo el código CSS para ver si me podeis ayudar a encontrar la solución a mi problema.

CSS:
Código:
/* ESTILOS GENERALES */
body {
	background-color: #fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
/*
	margin: 0px;
	padding: 0px;
*/
	text-align: center;
}

/* MAQUETACIÓN */
#contenedor {
	width: 1000px;
	margin: 0 auto 0 auto;
	background-color: #dff4d0;
	height: auto ! important;
	position: relative;
	border: 1px solid #6a6a6a;
}

#header {
	width: 1000px;
	height: 40px;
	background-color: #e4a5c1;
	margin: 0 auto 0 auto;
	position: relative;
	}

#sub_header {
	width: 1000px;	
	height: 200px;
	background-color: #8080ff;
	margin: 0 auto 0 auto;
	position: relative;
	display: block;
	clear: both;
}

#menu_sup {
	width: 1000px;	
	height: auto !important;
	padding: 0px;
	background-color: #2175bc;
	margin: 0 auto 0 auto;
	clear: both;
}

#menu_sup li {  
	display: inline;  
}

#menu_sup li a {  
	font-family: Arial;  
	font-size:11px;  
	text-decoration: none;  
	float:left;  
	padding: 10px;  
	background-color: #2175bc;  
	color: #fff;  
}  

#menu_sup li a:hover {  
	background-color: #2586d7;  
	margin-top: -2px;  
	padding-bottom: 12px;  
}

#menu_izq {
	width: 200px;
	height: auto;
	background-color: #beac9a;
	float: left;
	position: relative;
}

#contenido {
	width: 600px;
	height: auto;
	background-color: #fbf28e;
	float: left;
	position: relative;
}

#menu_der {
	width: 200px;
	height: auto;
	background-color: #408080;
	float: left;
	position: relative;
}

#pie {
	width: 1000px;
	height: auto;
	clear: both;
	background-color: #f7aef9;
	margin: 0 auto 0 auto;
	position: relative;
	
}

/* ESTILOS CUERPO */
Perdonad que lo pegue todo, pero esque si veis algún otro problema, mala estructuración, etc... comentadmelo porfavor, estoy empezando y seguro que tengo miles de fallos.

La dinámica de mi web va a ser sobre turismo, la idea es hacerla de 0 sobre todo porque es como un proyecto personal y así aprender tanto diseño como programación web.

Bueno, a ver si alguien me puede echar una manita

Muchas gracias y Saludos a todos!!
  #2 (permalink)  
Antiguo 16/09/2010, 15:11
Avatar de jotaincubus  
Fecha de Ingreso: mayo-2005
Ubicación: Medellin - Colombia
Mensajes: 1.797
Antigüedad: 12 años, 6 meses
Puntos: 394
Respuesta: Problemas con Firefox pero no con IE6!!

Ese mismo problema lo tengo yo... exactamente lo mismo no he encontrado solucion... yo no manejo pixeles sino porcentajes y tampoco funciona... si tu lo manejas con pixeles intenta quitarle pixeles a los contenedores #menu_izq #contenido y#menu_der NO SE PORQUE en firefox no se acepta la totalidad del ancho del DIV contenedor... si alguien sabe que nos responda por favor...
__________________
Por que existe gente que no agradece después de que se le ha brindado tiempo y ayuda ???
  #3 (permalink)  
Antiguo 16/09/2010, 19:05
Avatar de matius  
Fecha de Ingreso: julio-2005
Ubicación: Mexico, D.F.
Mensajes: 554
Antigüedad: 12 años, 4 meses
Puntos: 2
Respuesta: Problemas con Firefox pero no con IE6!!

¿Y donde esta el código html?

Podrías en vez de pegar el CSS, pegar desde html a /html, digo, no es que sea fácil adivinar los problemas de maquetación sin la maqueta y solo con algunas instrucciones CSS, aunque desde luego, tienes varios errores, como no usar clear:right y clear:lef o "0 auto 0 auto".

No se porque diseñas desde IE6, hay muchas cosas que simplemente ya no van, ni siquiera con IE 7 a IE 9, más cuando IE solo representa el 16% de los usuarios de internet.
  #4 (permalink)  
Antiguo 16/09/2010, 19:30
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 11 meses
Puntos: 181
Respuesta: Problemas con Firefox pero no con IE6!!

Cita:
Iniciado por matius Ver Mensaje
¿Y donde esta el código html?

IE solo representa el 16% de los usuarios de internet.




@matius

De donde sacaste esas estadísticas. Apenas hace unos días, en alguna pagina vi que mas de 50% de usuarios usan IE.


p.d solo tengo curiosidad



Saludos
  #5 (permalink)  
Antiguo 16/09/2010, 20:14
Avatar de bex
bex
Colaborador
 
Fecha de Ingreso: julio-2003
Ubicación: Buenos Aires
Mensajes: 2.484
Antigüedad: 14 años, 5 meses
Puntos: 34
Respuesta: Problemas con Firefox pero no con IE6!!

Cita:
Iniciado por matius Ver Mensaje
...tienes varios errores, como no usar clear:right y clear:lef o "0 auto 0 auto".

No se porque diseñas desde IE6, hay muchas cosas que simplemente ya no van, ni siquiera con IE 7 a IE 9, más cuando IE solo representa el 16% de los usuarios de internet.
Estoy de acuerdo con no dar soporte al IE 6. Pero es el IE 6 sólo el que representa el 16%. Todas la versiones del IE representan el 60% aprox. http://marketshare.hitslink.com/brow...e.aspx?qprid=2

No usar clears no necesariamente tiene que ser un error. Cada diseño es un mundo y sin el HTML es imposible saberlo.

@Strate es fundamental tener el HTML, y si lo tenés subido a algún lado la URL sería lo ideal.
  #6 (permalink)  
Antiguo 16/09/2010, 20:25
Avatar de matius  
Fecha de Ingreso: julio-2005
Ubicación: Mexico, D.F.
Mensajes: 554
Antigüedad: 12 años, 4 meses
Puntos: 2
Respuesta: Problemas con Firefox pero no con IE6!!

Cita:
@matius
De donde sacaste esas estadísticas. Apenas hace unos días, en alguna pagina vi que mas de 50% de usuarios usan IE.

p.d solo tengo curiosidad

Quise decir IE6, ja, ja.

Última edición por matius; 16/09/2010 a las 20:32
  #7 (permalink)  
Antiguo 16/09/2010, 20:35
Avatar de matius  
Fecha de Ingreso: julio-2005
Ubicación: Mexico, D.F.
Mensajes: 554
Antigüedad: 12 años, 4 meses
Puntos: 2
Respuesta: Problemas con Firefox pero no con IE6!!

Cita:
Iniciado por bex Ver Mensaje
No usar clears no necesariamente tiene que ser un error. Cada diseño es un mundo y sin el HTML es imposible saberlo.

@Strate es fundamental tener el HTML, y si lo tenés subido a algún lado la URL sería lo ideal.
En el caso del que pregunta, parece que sí, aunque que se yo .

Si me pegara el código lo resolvería en un chis-chaz, tampoco es algo del otro mundo.
  #8 (permalink)  
Antiguo 17/09/2010, 02:48
 
Fecha de Ingreso: septiembre-2010
Mensajes: 14
Antigüedad: 7 años, 3 meses
Puntos: 2
Respuesta: Problemas con Firefox pero no con IE6!!

Cita:
Iniciado por matius Ver Mensaje
¿Y donde esta el código html?

Podrías en vez de pegar el CSS, pegar desde html a /html, digo, no es que sea fácil adivinar los problemas de maquetación sin la maqueta y solo con algunas instrucciones CSS, aunque desde luego, tienes varios errores, como no usar clear:right y clear:lef o "0 auto 0 auto".

No se porque diseñas desde IE6, hay muchas cosas que simplemente ya no van, ni siquiera con IE 7 a IE 9, más cuando IE solo representa el 16% de los usuarios de internet.
Buenos días :D,

Me ha sorprendido un poco el echo de que deis por sentado que diseño para ie6 porqué ni mucho menos es así, solo que se dio la casualidad de que estaba arto de que no se viera y probe en un pc el ie6 por curiosidad y funcionó correctamente, pero eso no quiere decir que diseñe para ie6, de echo es el navegador que me da igual si se ve o no, aunque como quiero que sea accesible al mayor número de personas intentare que se vea bien también.

Bueno el problema al final conseguí solucionarlo poniendo en el menu_sup un float: left;.

Lo unico que si os fijais en firefox me deja arriba y abajo un espacio innecesario que yo (creo) no e creado, a ver si alguien sabe como puede solucionarse.

Para ello os pego el html también:

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="css\styles.css" type="text/css">
        <title>Titulo</title>
    </head>
    <body>
        
        <div id="contenedor">
            <div id="header">
                <h1>Hola!</h1>    
            </div>
            
            <div id="sub_header">
            </div>
            
            <div id="menu_sup">
                <ul id=”button”>  
                    <li><a href=”#”>Opciones</a></li>  
                    <li><a href=”#”>Opciones</a></li>  
                    <li><a href=”#”>Opciones</a></li>  
                    <li><a href=”#”>Opciones</a></li>  
                    <li><a href=”#”>Opciones</a></li>  
                    <li><a href=”#”>Opciones</a></li>  
                    <li><a href=”#”>Opciones</a></li>  
                    <li><a href=”#”>Opciones</a></li>  
                   </ul> 
            </div>
                    
            <div id="menu_izq">
                <h3>aqui contenido</h3>
                <h3>aqui contenido</h3>
                <h3>aqui contenido</h3>
                <h3>aqui contenido</h3>
                <h3>aqui contenido</h3>
            </div>
            <div id="contenido">
                <h1>aqui ponemos contenido</h1>
                <h1>aqui ponemos contenido</h1>
                <h1>aqui ponemos contenido</h1>
                <h1>aqui ponemos contenido</h1>
                <h1>aqui ponemos contenido</h1>
                <h1>aqui ponemos contenido</h1>
                <h1>aqui ponemos contenido</h1>
                <h1>aqui ponemos contenido</h1>
            </div>
            <div id="menu_der">
                <h3>aqui contenido</h3>
                <h3>aqui contenido</h3>
                <h3>aqui contenido</h3>
                <h3>aqui contenido</h3>
                <h3>aqui contenido</h3>
            </div>
            <div id="pie"><h1>aqui esta el pie de pagina</h1></div>

        </div>
            
    </body>
</html>
Si veis errores porfavor decidmelo y si podeis darme una guía de como hacerlo mejor os lo agradeceria, soy nuevo y necesito conocimientos solidos de buenas maneras de programar, sino esto sera un caos :D

Saludos a todos!
  #9 (permalink)  
Antiguo 17/09/2010, 06:45
Avatar de matius  
Fecha de Ingreso: julio-2005
Ubicación: Mexico, D.F.
Mensajes: 554
Antigüedad: 12 años, 4 meses
Puntos: 2
Respuesta: Problemas con Firefox pero no con IE6!!

Pues creo que el uso de auto es lo que te generaría el espacio, aunque no lo sabre hasta probarlo.

Por otro lado, para evitar estos conflictos:
Recuerda que puedes dirigir una propiedad CSS a IE6 anteponiendo un asterisco. por ejemplo

*margin:0 auto 0 auto;

Por otro lado, display block, no es una propiedad que yo le pondría a un elemento de por si de bloque.

A los div que agreges float, recuerda que es necesario además poner un div para evitar que se contraiga fuera del flujo de su contenido, por ejemplo:

<div style="float:left;">
-contenido-
<div style="clear:both;"></div>
</div>

Me apunto a intentar hacer tu pagina compatible con todos los navegadores solo que ahora me voy a dormir.
  #10 (permalink)  
Antiguo 18/09/2010, 02:12
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Problemas con Firefox pero no con IE6!!

Hola:

Cambia tu menu_sup por este otro:

Código CSS:
Ver original
  1. #menu_sup {
  2.     width: 100%;   
  3.     height: auto !important;
  4.     padding: 0px;
  5.     background-color: #2175bc;
  6.     overflow:auto;
  7. }

Y suprime todos los clear:both excepto el del pie.

Saludos.


Etiquetas: firefox
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 07:32.