Cómo conseguir qe mi web se vea en todos los navegadores?

Crear páginas para Gecko, diferencias con IE, articulos de interés y recursos en español
EduUU19

Cómo conseguir qe mi web se vea en todos los navegadores?

Mensajepor EduUU19 » Sab Oct 24, 2009 9:50 am

Hola a todos. Hace poco cree una página web, pero tengo un problema. La web solo ve correctamente en Internet Explorer, en el resto de los navegadores se ve descuadrada. Esto según creo ocurre porque cada navegador lee de forma distinta el código HTML de la web y por tanto para solucionarlo hay que usar una hoja de estilo. El problema es que yo utilizo una hoja de estilos y aun así la web se ve distinto según el navegador que utilice... He revisado varias veces la hoja de estilos pero no se que puede estar mal... Os pongo aqui la hoja de estilos y el código HTML del index para ver si alguno detectais el problema ok?? estaría muy agradecido si alguien me ayudase.

Gracias

HOJA DE ESTILO

* {margin:0px ; padding:0px ; border: 0px}
p {text-align:left ; background-color: white }
h1 {font-size: 1.2em; color:black ; font-weight: bold ; text-decoration: none ; text-align: center}
h3 {front-size: 1em; color: white ; font-weight: bold ; text-decoration: none ; text-align:left ; margin-top: 10px}
body {text-align: center }
#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: red ; border-left: black 1px solid ; border-right: black 1px solid ; height:65px }
#logotipo {background-color: red ; width: 570px ; float:left ; margin-top: 10px ; margin-left: 10px }
#afiliate {background-color: red ; width:100px ; float:right ; margin-top: 10px ; margin-right: 10px }
#navegacion {background-color: white ; border: black 1px solid ; height:20px }
#navegacion li {float:left ; list-style:none ; margin: 0px 10px 0px 10px }
#navegacion ul { margin-left: 50px }
#contenido {background-color: red ; border-left: black 1px solid ; border-right: black 1px solid ; height: 800px ; text-align:center ; padding: 20px 20px 20px 20px ; text-indent: 15px }
#contenido p {padding: 5px 10px 5px 10px}
#menu {background-color: #EEEED1; width: 200px ; float:left ; text-align:left ; margin-right: 10px ; margin:3px 10px 3px 3px ; border: black 1px solid 1px solid 1px solid 1px solid }
#menu li { list-style:none ; margin: 4px 0px 4px 6px }
#menu h1 {text-decoration:none ; font-size:25px }
#pie { background-color: red ;
border-left: black 1px solid ;
border-right: black 1px solid;
border-top: black 1px solid ; height: 65px ; text-align:left }
#pie li {list-style: none ; font-size: 17px ; margin: 20px 20px 20px 20px }
#pieuno {background-color: red ; float:left ; width:398px }
#piedos {background-color: red ; float:left ; width:398px }
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width:800px ;
height: 12px
overflow: hidden }
img {border-style: none ;margin-top: 5px }
a {color:black ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:black ; text-decoration:inderline ; background-color: silver}
a:active {}




CODIGO HTML


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Juventudes Socialistas de Retiro</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
<a href="index.html">
<img src="objetos/jsr.jpg" width="560" height="170"
alt="Juventudes Socialistas de Retiro (JSR)">
</a>
</div>
<div id="afiliate">
<a href="afiliate.html">
<img src="objetos/buzon.jpg" width="200" height="160" alt="Afíliate">
</a>
</div>
</div>
<div id="navegacion">
<ul>
<li><a href="conocenos.html">Conócenos</a></li><li><a href="noticias.html">Noticias</a></li><li><a href="documentosydescargas.html">Documentos/Descargas</a></li><li><a href="http://www.jsretiro.creatuforo.com/index.php">Foro</a></li><li><a href="sugerencias.html">Sugerencias vecinales</a></li>
</ul>
</div>
<div id="contenido">
<p>Bienvenido a la Web oficial de las Juventudes Socialistas de Retiro (JSR). En este portal Web encontrarás toda la información relevante de nuestra organización política, nuestras ideas y valores, nuestra historia, nuestras noticias, documentos y descargas relacionados con nosotros y nuestro foro de debate. También podrás aportar tu grano de arena para mejorar nuestro barrio en la sección de Sugerencias vecinales, así como podrás solicitar tu petición de ingresar en nuestra organización mandándonos un E-mail (pincha en el logotipo de Afíliate). Esperamos que disfruteis de nuestro portal y te agradecemos que nos visites. Recibe un cordial saludo socialista.</p>
<img alt="Tomás Meabe" src="objetos/tomasmeabe.jpg" height="545" width="354" />
<p>"Los jóvenes son los continuadores de todos los grandes trabajos realizados, de todos los esfuerzos en pro de los ideales socialistas" (Tomás Meabe)</p>
</div>
<div id="pie">
<div id="pieuno">
<ul><li><a href="http://jsretiro.blogspot.com">Visita nuestro blog</a></li><li><a href="http://www.jsmadrid.org">Juventudes Socialistas de Madrid (JSM)</a></li></ul>
</div>
<div id="piedos">
<ul><li><a href="http://www.jse.org">Juventudes Socialistas de España (JSE)</a></li><li><a href="http://www.psoe.es">Partido Socialista Obrero Español (PSOE)</a></li>
</div>
</div>
<div id="curva-inferior"></div>

</div>





</body>
</html>

Avatar de Usuario
Altair
Administrador
Administrador
Mensajes: 6968
Registrado: Vie Ene 30, 2004 1:01 am
Ubicación: Chile

Re: Cómo conseguir qe mi web se vea en todos los navegadores?

Mensajepor Altair » Sab Oct 24, 2009 12:54 pm

Hola :-)

Has olvidado cerrar algunas etiquetas como el </ul> en el DIV con ID "pie dos"
Te recomiendo que revises los códigos con algún validador:

Validador HTML http://validator.w3.org/
Validador CSS http://jigsaw.w3.org/css-validator/
SeaMonkey 2

Síguenos en Twitter @MozillaES y en Facebook ;-)

EduUU19

Re: Cómo conseguir qe mi web se vea en todos los navegadores?

Mensajepor EduUU19 » Sab Oct 24, 2009 10:17 pm

GRACIAS!!


Volver a “Desarrollo web (HTML/CSS/JS, accesibilidad...)”

¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 2 invitados