web que veo distinta en safari y en firefox

Citar

Escrito el 23 Sep 2012 10:00 pm

A ver si me podéis ayudar con esto.

Estoy probando con la colocación de imágenes y la propiedad bottom. Si pongo el enlace de la imagen se ve todo bien, pero si lo quito pasa lo que veis en las imágenes, las webs aparecen distintas en safari y firefox, ¿sabéis por qué puede ser?

Me pasa demasiado a menudo que en firefox lo veo distinto que en safari y chrome (siempre lo veo en Mac).

Safari
Disposición: OK.
Tamaño: OK.
Texto alt: solo aparece en imagen con position:static.

Firefox
Disposición: OK.
Tamaño: solo lo respeta en imagen con position:absolute.
Texto alt: OK.

safari escribió:

firefox escribió:

Código HTML :

<!DOCTYPE html>

<html lang="es">

<head>
 <title>bottom</title>
 <meta charset="utf-8">
 <style type="text/css">
 body{padding:0;border:0;margin:0;}
 img{border:1px dotted #296BA2;}
 
 .relative{
  bottom:25px;
  position:relative;
 }
 .absolute{
  bottom:25px;
  position:absolute;
 }
 </style>
</head>

<body>
 <img src="" width="100px" height="100px" alt="static 100x100" />
 <img class="relative" src="" width="100px" height="100px" alt="relative 100x100" />
 <img class="absolute" src="" width="100px" height="100px" alt="absolute 100x100" />

</body>

</html>

Por walden

Claber

120 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 24 Sep 2012 01:45 am

los atributos de dimensión (width y height) de la etiqueta html no admite unidades. Solo acepta 2 tipos, sin unidad (pixeles) y en porcentaje.

pon las medidas en el css

Código CSS :

img{width:100px; height:100px;}

y en el html deja solo el valor

Código HTML :

<img src="" width="100" height="100" alt="static 100x100" />

.....

si quieres la imagen en el límite inferior de la ventana es con position:absolute

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado

Web Developer

Citar

Escrito el 24 Sep 2012 09:14 am

Es verdad, eso me pasa por copiar y pegar... Pero aun así sigue siendo diferente.

Por si acaso estaba haciendo algo de lo que no me daba cuenta, he probado con este ejemplo de w3c y pasa lo mismo. Cambiando a position:relative y dejando en blanco src="" en Firefox no respeta el tamaño definido en el tag <img>.

Por walden

Claber

120 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 25 Sep 2012 01:01 am

Yo lo veo igual en chrome, firefox, safari y opera... no lo probe en IE

Código HTML :

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
bottom:0px;

width:100px;
height:100px;
border:1px solid #CCC;
}
</style>
</head>

<body>
<img src="" width="100" height="100" />
</body>
</html>

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado

Web Developer

Citar

Escrito el 25 Sep 2012 08:17 am

Muchas gracias Nacho...

Yo así también lo veo bien, pero por favor, prueba a cambiar a position:relative; a ver si en firefox ves un cuadrado de 100x100.

Yo estoy probando en Mac con firefox 15.0.1 y con position:absolute y position:fixed respeta el tamaño, pero con position:relative y position:static no.

Por walden

Claber

120 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 25 Sep 2012 05:03 pm

relative... img no es etiqueta de bloque

Código HTML :

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img
{
position:relative;
left:0px;
bottom:0px;
display:block;

width:100px;
height:100px;
border:1px solid #CCC;
}
</style>
</head>

<body>
<img bgcolor="#DDDDDD" width="100" height="100" />
</body>
</html>

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado

Web Developer

Citar

Escrito el 25 Sep 2012 08:13 pm

Gracias mil

:oops: