Foros del Web » Creando para Internet » CSS »

Problema con FF

Estas en el tema de Problema con FF en el foro de CSS en Foros del Web. Buenas, en realidad no creo que sea problema d firefox ya que el "top, left, right y bottom" que le di a cada div de ...
  #1 (permalink)  
Antiguo 31/05/2010, 10:47
Avatar de ferwall  
Fecha de Ingreso: abril-2010
Mensajes: 57
Antigüedad: 7 años, 8 meses
Puntos: 3
Problema con FF

Buenas, en realidad no creo que sea problema d firefox ya que el "top, left, right y bottom" que le di a cada div de la pagina es ridículo, por ej tengo el titulo con top 200px y si le pongo algo abajo que con 250px ya estaría bien le tengo que poner 700px, por dar un ejemplo.

El tema es que en dreamwever acomodo todos los divs y se ven bien, lo visualizo en IE y se ve bien, pero cuando lo visualizo en FF se va cada uno a donde quiere y algunos ni aparecen.

La css esta media larga pero no se que sacarle y que no, ya puse mas cosas en el body como por ej la font family y el color d la letra para no repetirlos en todos lados.

El problema me pasa por la posición relativa, con todos los divs en absoluta no me pasa, pero me dijeron que no lo haga con pos absoluta, la pagina esta centrada para que no se corra con diferentes resoluciones.

Otro problema es que algunos divs cuando cambio la resolución se quedan en la posición que deben quedarse y otros se mueven y quedan afuera del div contenedor.

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="delivery, 2, segundos, comidas para llevar, lomos, pizza, empanadas, pollos, tacos" />
<meta name="Description" content="guia de deliveries" />
<meta name="Author" content="fernando lo bello" />
<meta name="Subject" content="2 segundos delivery" />
<meta name="Language" content="es" />
<meta name="Robots" content="index, follow" />
<link rel="stylesheet" type="text/css" href="estilos.css" />
<link rel="shortcut icon" href="imagenes/logochikito.JPG" type="image/ico" media="screen"/>
<title>2 Segundos Delivery</title>
</head>
<body>
<div id="contenedor">
<div id="cabecera">
  <p><img src="imagenes/letra-b-cristal.gif" alt="letra b" width="44" height="44" />
<img src="imagenes/letra-i-cristal.gif" alt="letra i" width="44" height="44" />
<img src="imagenes/letra-e-cristal.gif" alt="letra e" width="44" height="44" />
<img src="imagenes/letra-n-cristal.gif" alt="letra n" width="44" height="44" />
<img src="imagenes/letra-v-cristal.gif" alt="letra v" width="44" height="44" />
<img src="imagenes/letra-e-cristal.gif" alt="letra e" width="44" height="44" />
<img src="imagenes/letra-n-cristal.gif" alt="letra n" width="44" height="44" />
<img src="imagenes/letra-i-cristal.gif" alt="letra i" width="44" height="44" />
<img src="imagenes/letra-d-cristal.gif" alt="letra d" width="44" height="44" />
<img src="imagenes/letra-o-cristal.gif" alt="letra o" width="44" height="44" />
<img src="imagenes/letra-s-cristal.gif" alt="letra s" width="44" height="44" /></p>
</div>
<div id="contenido">
a www.2segundosdelivery.com.ar en este sitio podrán encontrar los mejores deliveries de la zona centro y consultar los menúes que incluyen las variedades de comidas y sus respectivos precios actuales!</div>
<div id="menu">
<p>Ciudad<br />Godoy Cruz<br />Guaymallen<br />Las Heras<br />Lujan<br />Maipu</p>
</div>
<div id="buscador">
<form action="http://search.freefind.com/find.html" method="get">
<p>
                    <input type="hidden" name="si" value="48454822" />
                    <input type="hidden" name="pid" value="r" />
                    <input type="hidden" name="n" value="0" />
                    <input type="hidden" name="_charset_" value="" />
                    <input type="hidden" name="bcd" value="&divide;" />
                    <input type="text" name="query" size="40" />
                    <input name="submit" type="submit" value="Buscar" /></p>
  </form>
<a href="http://www.freefind.com">Site search by freefind</a></div>
<div id="pie">
<ul>
    <li class="piepag"><a href="">Quienes Somos?</a></li>
    <li class="piepag"><a href="">Publicar en el sitio</a></li>
    <li class="piepag"><a href="">Aviso Legal</a></li>
    <li class="piepag"><a href="">Ayuda</a></li>
  </ul>
</div>
</div>
<div id="diseño">
<p>© 2010 Designed by - 2 Segundos Delivery</p></div>
</body>
</html> 
Código HTML:
body {height: 100%; 
width: 100%; 
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#d3511f;
color:#FFFFFF;
text-align:center;
min-width:975px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
margin-top:0px
}
#contenedor {
background-image:url(imagenes/fondogrande.JPG);
height:920px;
width:975px ;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
text-align:center;
}
#cabecera {
	width: 548px;
	height: 50px;
	position:relative;
	left:165px
}
#contenido {
	height: 125px;
	width: 612px;
	position:relative;
	left: 165px;
	top: 30px;
	font-size: 20px;
	text-align:justify;
}
#menu {
	text-align:justify;
	font-size:40px;
	width: 261px;
	position:relative;
	top:270px;
	right:340px
}
#pie {
	width: 934px;
	position:relative;
	top:280px
}
.piepag {
list-style:none;
float:left;
margin-left:50px;
margin-right:50px;
font-size: 15px;
}
#diseño {
	font-size: 8px;
	position:absolute;
	left: 415px;
	top: 904px;
}
a:link {text-decoration:none;font-weight: normal;color:#FFF}
a:visited {text-decoration:none;font-weight: normail;color:#FFF} 
a:hover {text-decoration:underline;font-weight: normal;color:#000;}

#buscador {
	height: 53px;
	width:200px;
	position:relative;
	bottom:150px;
	right:350px
}
Gracias de antemano.
  #2 (permalink)  
Antiguo 31/05/2010, 12:45
Avatar de ferwall  
Fecha de Ingreso: abril-2010
Mensajes: 57
Antigüedad: 7 años, 8 meses
Puntos: 3
Respuesta: Problema con FF

waaaaaa

jaja ningun master online????
  #3 (permalink)  
Antiguo 31/05/2010, 12:57
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Problema con FF

No acomodes tu página en el visor de dreamweaver porque no se va a ver bien en la web. Por el contrario, diseña, cambia el codigo y visualiza tu web en Firefox ( si se ve bien en FF de seguro que se ve bien en casi todos los browser, exceptuando el IE que no vale ni la pena mencionarlo).

Por otro lado, con lo de los div en relativo, como diria mi compañero y amigo Mikmoro, hay que seguir el "flujo" de la página, y dejar que todo se valla acomodando solo. Para mantener la web centrada solo es necesario un div, en posicion relativa, y que contenga a todo el contenido de tu web. ]Ya dentro de esta, no es necesario poner el relativo a los demás (una que otra excepción). Intenta esos pequeños cambios primero y veremos que pasa.

Saludos.
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #4 (permalink)  
Antiguo 31/05/2010, 13:18
Avatar de ferwall  
Fecha de Ingreso: abril-2010
Mensajes: 57
Antigüedad: 7 años, 8 meses
Puntos: 3
Respuesta: Problema con FF

Ok a hacer una cosa, voy a borrar todas las propiedades que use para acomodar los divs osea top, left bottom y right, y borrar tambien la pos relativa de todos y ponersela al contenedor.

El tema es que si me preocupo por firefox en el IE se me ve mal y la mayoria de la gente usa IE, anda a decirle a mi viejo que use FF se vuelve loco ni se complica, incluso tengo amigos que no entienden mucho de pc y si no les bajo FF yo ni lo usan
  #5 (permalink)  
Antiguo 31/05/2010, 13:31
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Problema con FF

Cita:
anda a decirle a mi viejo que use FF se vuelve loco
eso si me hizo gracia.

Ok, no malinterpretes lo de IE. No es que no hay que arreglar la página para IE, si no que no hay que diseñar para que se vea excelente en IE y olvidarse que hay otro monton de browsers en el mercado.

Vamos a lo primero. Si tu contenedor se llama "contenedor" , pues con un codigo asi:
Código:
#contenedor {margin: 0 auto;
width: 970px; /*es muy importante que tenga definida una anchura, (ya lo aprendí, Mik ;)*/
/*resto de las propiedades que quieras definir*/}
no hay browser que se resista, la página va a quedar centrada(conste que el ancho lo puse por ponerlo)

y en el html sólo tienes que incluir:
Código HTML:
<body>
div id="contenedor>
<!-- todo el contenido de la página -->
</body> 
y listo. Ahora, no se si trabajas con hojas de estilo (que es lo recomendado) o no, pero vas a tener que usar un código css diferente para IE y un estandar para todos los demás, ya que no es lo mismo un margen de 10px para Bill Gates que para el resto del mundo, Billy lo ve como 2px mas ancho.

Espero haberte ayudado.

Suerte
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #6 (permalink)  
Antiguo 31/05/2010, 15:21
Avatar de ferwall  
Fecha de Ingreso: abril-2010
Mensajes: 57
Antigüedad: 7 años, 8 meses
Puntos: 3
Respuesta: Problema con FF

Antes que nada muchas gracias por tu respuesta.

Ahora hacer 2 css es la mas fácil, el tema es como anidar las 2 css a la pagina? y que cuando se usa FF se abra la css de FF y cuando se usa IE se use la css de IE

tengo entendido que en alguna parte del código se pone moz-, pero si alguien usa opera o algún otro navegador que no sea IE ni FF? si pongo moz- teóricamente abre para FF nomás.

O poner una pagina de inicio eligiendo navegador? si seleccionan FF le pongo en el codigo el href a la css d FF y al que ponga en IE le pongo el href a la css d IE?

Me parece que esta ultima opción es la mas viable pero no se si funciona jaja es la que se me ocurre.
  #7 (permalink)  
Antiguo 31/05/2010, 15:25
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
De acuerdo Respuesta: Problema con FF

Para usar una hoja de estilo según el browser:
Código HTML:
<head>
	<title>Título</title>
<link href="all_browsers.css" rel="stylesheet" type="text/css">
<!--[if IE]> <link href="ie_any_version.css" rel="stylesheet" type="text/css"> <![endif]-->

<!--[if IE]>
 <link rel="stylesheet" href="css/styles-ie.css" type="text/css"> <![endif]--> 
Si queremos detectar IE6

Código HTML:
<!--[if IE 6]>
 <link href="css/div-ie6.css" rel="stylesheet" type="text/css"> <![endif]--> 
detectamos si el navegador es menor a IE7

Código HTML:
<!--[if lt IE 7]>
<![endif]--> 
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #8 (permalink)  
Antiguo 31/05/2010, 15:35
Avatar de ferwall  
Fecha de Ingreso: abril-2010
Mensajes: 57
Antigüedad: 7 años, 8 meses
Puntos: 3
Respuesta: Problema con FF

Aja genial disculpa mi ignoraciona pero que diferencia hay entre:

Código HTML:
<!--[if IE]> <link href="ie_any_version.css" rel="stylesheet" type="text/css"> <![endif]--> 
Código HTML:
<!--[if IE]>
 <link rel="stylesheet" href="css/styles-ie.css" type="text/css"> <![endif]--> 
hago una css que se llame "ie_any_version.css" o hago un css que se llame "styles.ie.css?

Son 2 ejemplos, pero solo tengo que poner 1 no? o tengo que poner el codigo tal cual lo pusiste ahi?

Salu2 y gracias!!!
  #9 (permalink)  
Antiguo 31/05/2010, 15:49
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
De acuerdo Respuesta: Problema con FF

la diferencia es el nombre

Ya hablando en serio, esos nombres se los pones tu, yo solo puse un ejm.

Mira, si usas una sola hoa de estilo para los div, estilos de texto y todo eso, generalmente creas algo asi como styles.css, bueno ahora si vas a crear una que es solo para IE, pues le pones algo como styles-IE.css solo para saber que esa es la de IE, asi que en fin deberias tener solamente algo asi:
Código HTML:
<link type="text/css" rel="stylesheet" href="css/txt-styles.css" />
<!--[if lt IE 6]>
<link type="text/css" rel="stylesheet" href="css/div-styles-IE.css" />
<![endif]--> 
en la primera linea va a estar la css normal para todo el pueblo. La sentencia de <!--[if lt IE 6]> es un tag que solo van a leer los IE, asi que ese 6 podria ser un 7 si quieres, y lo único que ocurrirá es que va a reconocer cuando el browser sea IE, ante lo cual utilizará el css que le indiques. Ahora, conforme vas diseñando y acomodando tus div , vas a tener que ir probando en ambos. No es necesario duplicar todo el contenido css, porque por ejm una fuente en "Bold" se va a ver igual tanto en uno como en el otro, asi que puedes corregir solo los segmentos de código que se vean afectados. Si pones en el styles.css un div llamado header y no lo pones en el styles-IE.css, el IE se va a ir al primer css a buscar ese header, pero, si lo pones tanto en uno como en el otro, el IE le va a dar prioridad al css para el IE(espero explicarme bien).

Ahi me cuentas....
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #10 (permalink)  
Antiguo 31/05/2010, 19:50
Avatar de ferwall  
Fecha de Ingreso: abril-2010
Mensajes: 57
Antigüedad: 7 años, 8 meses
Puntos: 3
Respuesta: Problema con FF

Bueno me tome el tiempo de ordenar la css y quedo todo perfecto!!!

En FF y en IE se ve la pagina casi igual varia muy poco la posición de los divs.

Ahoraaaaaa el único problema que tengo es que en FF se me ve el margen de arriba y no se como sacarlo, y el otro problema que tengo es que la ultima parte de la pagina donde pongo Designed by ..., lo puse en posición absoluta porque sino se me hacia el margen abajo, y al cambiar la pagina de resolución no queda centrado.

El codigo HTML es el mismo de arriba no cambie nada y la css me quedo asi, pero no se en que parte sacar el margen de arriba y hacer que la parte de abajo se centre cuando cambio la resolucion.

CSS

Código:
body {height: 100%; 
width: 100%; 
background-color:#d3511f;
min-width:975px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
margin-top:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF
}
#cabecera, #contenido, #menu, #pie, #buscador{
height:auto;
position:relative;
}
#cabecera, #contenido {
float:right
}
#contenedor {
background-image:url(imagenes/fondogrande.JPG);
height:920px;
width:975px ;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
position:relative
}
#cabecera {
	width: 548px;
	top:20px;
	margin-right:45px
}
#contenido {
	width: 612px;
	font-size: 20px;
	text-align:justify;
	top:50px;
	margin-right:20px
}
#menu {
	font-size:35px;
	width: 300px;
	top:450px;
	left:20px
}
#buscador {
	width:200px;
	font-size:10px;
	left:20px;
	top:30px
}
#pie {
	width: 934px;
	top:475px;
	left:25px
}
.piepag {
list-style:none;
float:left;
margin-left:50px;
margin-right:50px;
font-size: 15px;
}
#diseño {
	font-size: 8px;
	position:absolute;
	left: 407px;
	top: 908px;
	margin:auto
}
a:link {text-decoration:none;font-weight: normal;color:#FFF}
a:visited {text-decoration:none;font-weight: normail;color:#FFF} 
a:hover {text-decoration:none;font-weight: normal;color:#000;}

Etiquetas: Ninguno
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 16:46.