[ayuda]problemas con compatibilidad en los navegadores

adamsst · #1 (**permalink**) 18/07/2013, 23:50

hola a todos estoy haciendo unas pruebas para no que no se me vaya olvidando lo que se de html y resulta que se me han presentado ciertos problemitas

aca esta imagen es en local abierta con chrome, explorer, firefox

Cita:

ahora usando 000webhost subi los mismos archivos y miren como se ve en chrome no se me ven las imagenes de las esquinas de arriba

ahora si ponemos firefox miren como se ven aclaro estoy usando 000webhost las que se vieron bien al principio fue de forma local que se vieron

bueno y en explorer menos se me ven las imagenes de la esquina ojo de manera local se ve como la primera imagen usando 000webhost se ve asi todos los navegadores se ven mal

aca les dejo el codigo html

Código:

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin título</title> 
<link href="estilo.css" rel="stylesheet" type="text/css" /> 

</head> 

<body> 



<div id="header">


<div id="fotoderecha"><img src="images/Sin título-1.jpg" width="87px" height="108px" /></div> 

<div id="central" align="center"><p>Tratamientos Cosmeticos Faciales y Corporales</p></div> 

<div id="fotoizquierda" align="right"><img src="images/Sin título-2.jpg" width="135px" height="108px"  /></div>     
     
</div>



<div id="contenedordebotones"><table align="center" width="58%"> 
  <tr> 
     
    <td class="boton1"><a>Inicio</a></td> 
    <td class="boton2"><a>Tratamientos Corporales</a></td> 
    <td class="boton3"><a>Tratamientos Faciales</a></td> 
    <td class="boton4"><a>Contacto</a></td> 
     
  </tr> 
</table> 


</div> 


<div id="cuerpo"> 

     
<img src="images/imagen_inicio.fw.png" width="100%" height="100%" /> 




</div> 



</body> 
</html>

aca les dejo el codigo css

Código:

#header{
	
	
width: 100%;
margin: 0 auto;
display:inline;}
	
	



#fotoderecha{ 
     
 float:left;
  width:auto; 
    } 

#central{
	 font-family: "Monotype Corsiva"; 
    font-size: 30px; 
    background-color: #996600; 
    height: 109px; 
    text-align: center;     
    border-width: 1px; border-style: solid; border-color: black; 
    float: left; 
     width:80%;
	 margin-left:2%;
	 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box; 
	 
	 
    } 

#fotoizquierda{ 

	width:auto;
     
    } 




#contenedordebotones{margin-top: 8px; 
    font-family: "Monotype Corsiva"; 
    width: 100%; 
    line-height: 120%; 
    text-align: center; 
    font-size: 20px; 
    font-style: normal; 
    color: #000; 
    background-color: #C03;     
    border-width: 1px; border-style: solid; border-color: black;} 


.boton1 a { text-decoration: none; border-radius: 10px; padding: 0px 5px 0px 5px; } 
a:hover { background: #FFF; } 

      


.boton2  a { text-decoration: none; border-radius: 10px; padding: 0px 5px 0px 5px; } 
a:hover { background: #FFF; } 



.boton3  a { text-decoration: none; border-radius: 10px; padding: 0px 5px 0px 5px; } 
a:hover { background: #FFF; } 




.boton4  a { text-decoration: none; border-radius: 10px; padding: 0px 5px 0px 5px; } 
a:hover { background: #FFF; } 








#cuerpo { 
    margin-top: 3px; 
    border-width: 1px; border-style: solid; border-color: black; 
     
}

gracias a quien me ayude sinseramente no deseo que me resuelvan el problema que me den el codigo completo deseo que me orienten para hacerlo yo mismo

kikeking1 · #2 (**permalink**) 19/07/2013, 00:37

Tu problema es sencillo, si te fijas esas dos imagenes de la esquinas se llaman "Sin título-1.jpg" y "Sin título-2.jpg". Como se puede apreciar hay un espacio entre Sin y título, además título, esta acentuado.

El nombre de archivo, no puede contener espacios, ni acentuaciones, ni ñ, ni simbolos raros. Y algunos server más delicados tambien hacen distinción entre mayusculas (pepe.JPG y pepe.jpg pueden ser fotos distintas).

Los servidores en local como wamp xampp y tal suelen ser más permisivos con estas cosas, pero como buena practica acotumbrate siempre a formar los nombre de archivos así y te evitarás problemas de este tipo (y además es lo correcto).