Mi web se ve diferente con los distintos navegadores

**estelinx** · 05/12/2008, 14:19

Hola, lo peor de todo es el menú lateral, que en en mozilla y ópera se ven arriba, en lugar de en el lateral, además, hice tablas para colocar las imágenes con el programa Nvu y se ven raras las imágenes que tienen enlaces (por ejemplo en Galería de imágenes).

http://www.escayolas-avh.com

Código html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<LINK REL="SHORTCUT ICON" HREF="objetos/capitel.ico">
<title>Decoración en escayola, escayolistas, presupuestos sin compromiso.</title>
<META content="En esta web encontrarás la mayor oferta de decoración en escayola, con los mejores profesionales escayolistas. Además podrás ver una breve muestra de los tipos de elementos decorativos en escayola que existen en el mercado, tales como molduras, cornisas, murales, arcos. Además, se realizan trabajos en obra nueva como falsos techos, vigas, fosas, etc." name="description">
<META content="escayola, escayolistas, decoración, molduras, cornisas, columnas, arcos, murales, techos, desmontables" name="keywords">
<link rel="stylesheet" href="estilo.css" type="text/css" media="all">
<link rel="stylesheet" href="estilo-menu-desplegable.css" type="text/css" media="all">
<script language="javascript" src="no-tocar.txt" type="text/javascript"></script>
<script language="javascript" src="numero-de-menus.txt" type="text/javascript"></script>
</head>
<body onload="init();">
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[img]objetos/LogoAVH.png[/img]</div>
<div id="publicidad">Más de 40 años decorando con escayola</div>
</div>
<div id="navegacion">
<ul>[*]Productos[*]<a href=galeria.html>Galería de imágenes</a>[*]<a href=contacto.html>Contacto<a/>[/list] </div>
<div id="contenido">
<div id="menu">
<h1>Productos</h1>
<ul>[*]Molduras[img]objetos/Cornisa%20(21).jpg[/img][*]Cornisas[img]objetos/Cornisa%20(29).jpg[/img][*]
Columnas[img]objetos/Columna%20(2).gif[/img][*]Arcos[img]objetos/Arco%20(3).gif[/img][*]Techos[img]objetos/Techo%20(1).bmp[/img][/list] </div>
<h1>Escayolistas con más de 40 años de experiencia</h1>

Realizamos todo tipo de trabajos en escayola tanto en obra nueva como en
reformas, con la máxima profesionalidad y los precios más
competitivos del mercado.
<h1>Todo un mundo de posibilidades</h1>

Realizamos todo tipo de trabajos como

colocación de falsos techos en escayola y techo desmontable,

montaje de techos acústicos, tabiquería,

colocación de elementos decorativos: cornisas, molduras, columnas, murales, arcos, plafones.

[img]objetos/collage.jpg[/img]
<h1>Todo tipo de decoración en escayola</h1>

Propónganos su diseño y nosotros lo realizaremos, con los mejores
materiales y en la mayor brevedad posible.

</div>
<div id="curva-inferior"></div>
</div>
<script language="javascript" src="definir-menus1.txt" type="text/javascript"></script>
</body>
</html>

Hoja de estilos
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px ; font-family: centaur}
p {text-align: justify ; padding-bottom:2px}
h1 {font-size: 1.2em; color:dimgray ; font-weight: bold ; text-decoration: none ;
text-align: center ; padding-top:15px ; padding-bottom:2px}
h2 {font.size: 1.1em; color:dimgray ; font-weight: bold ; text-decoration: none ;
text-align: center}
body {background-image: url(objetos/w-vista3-1.jpg) ; text-align: center ; background-position: center center ; background-repeat: no-repeat ; height:100%; }
#global {width:800px ; margin:4px auto }
#curva-superior { background-image: url(objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
#cabecera {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left }
#publicidad { padding-top:30px ;padding-bottom:30px; font-size: 1.5em; color:black ; width:518px ; float:left ; margin-top:0px; margin-bottom:5px ;margin-right:0px; font-style: italic ;FILTER:progid:DXImageTransform.Microsoft.Gradient (startColorstr='#FF0000',endColorstr='#999999', gradientType='1') }
#navegacion { background-color: darkgray ; border: black 1px solid ; height:20px }
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 200px ; font-size: 1.1em }
#contenido { background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid }
#contenido p { margin: 5px 10px 0px 10px ; text-indent: 15px ; text-align: center}
#menu {background-color: none ; width: 150px ; float:left ;
text-align:left ; margin: 20px 10px 3px 40px ;
background-image: url(objetos/menu-parte-inferior1.gif);
background-position: bottom }
#menu li {list-style:none ; margin: 6px 10px 10px 23px }
#menu h1 {text-decoration:none ; font-size:13px ; padding-top:12px ;
background-image: url(objetos/menu-parte-superior1.gif) }
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
a {color: black ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:#FF0000 ; text-decoration:none ; background-color: none ; font-style: bold }
a:active {}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}

**omar.piamba** · 07/12/2008, 03:47

Hola: Así por encima encuentro que el logo tiene 88px de alto y la cabecera sólo tiene 85px; por tal motivo el logo desplaza las palabras de la navegación hacia abajo y empieza el descuadre...
Más adelante le colaboro otro tanto pues aquí en mi país tenemos las 23:45 del 06 Dic y creo que es hora de dormir...pero ¡NO SE DESANIME!!!

Vaya con calma que los errores son los que nos dan la experiencia.
Como dijo un sabio:
"No tropieza el que no camina"

Un amigo desde Colombia,

**estelinx** · 16/12/2008, 18:44

Muchas gracias, ya lo he cambiado. Oye no sé si sabrás por qué me pasa esto: el menú tiene los bordes del curso, pero como he metido imágenes dentro desparecen los bordes en los navegadores, sin embargo en HTML-kit si que están, ¿cómo lo podría solucionar?

**omar.piamba** · 17/12/2008, 02:42

Pues según estuve buscando la imágenes de fondo del menú, NO se encuentran en la carpeta de objetos: sería volverlas a subir así el editor le diga que ya las tiene... (las demás sí se dejan ver en la carpeta de objetos)

Un amigo desde Colombia,

**johnpeterjp** · 17/12/2008, 04:15

Una de las tareas más difíciles, desgastantes y tediosas para un diseñador web, es el hacer compatible su sitio web para diferentes navegadores. Todo marcha bien cuando probamos nuestro sitio, o el diseño de nuestro nueva web en IExplorer pero cuando los probamos con Firefox u Opera, y algunas veces con Safari, nuestro sitio se deforma totalmente. El problema está en la eceptacion de los estandares en diseño y html, caso que cumplen navegadores como firefox, no así explorer... que está hecho para hacernos creer que todo está ok. Te aconsejo siempre compruebes tu diseño en explorer y firefox y q los pequeños detalles los omitas, o te vuelves loco intentando hacer un diseño compatible para cada navegador... pon atencion al post anterior, y hecha una mirada a esto para que vayas dilusidando este embroyo... http://wharton.universia.net/index.c...Article&id=938