Hola... mi Página tampoco se ve bien con Mozilla... adicionalmente al ver al página en otros computadores, como incluí una fuente que descargué exclusivamente para el logo y la imagen corporativa, entonces no se vé con dicha fuente...
Lo primero que veo que se vé mal inclusive en Internet Explorer, es el fondo del menú lateral...,
Lo segundo... que desearía incluir la fuente en la página para que toda persona la vea correctamente en cualquier computador...
Lo tercero, es que en Mozilla se ve algunos detalles mal, como por ejemplo se baja la barra de navegación, se pierde parte de Publicidad y el mensaje de copyright aparece en un tamaño de fuente que no corresponde al que le coloqué....
Incluyo mi código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>.:Hidrogem Bogotá:. - Antecedentes -</title>
<link rel="stylesheet" href="../estilo-general.css" type="text/css" media="all">
<style type="text/css">
body {overflow-x:auto ; scrollbar-face-color: Black ; scrollbar-highlight-color: white ; scrollbar-3dlight-color: white ; scrollbar-darkshadow-color: white ; scrollbar-shadow-color: white ; scrollbar-arrow-color: white ; scrollbar-track-color: WHITE}
</style>
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
<div id="publicidad">Por la Economía y el Medio Ambiente...
[contenido no disponible]</p>
Generadores de Hidrogeno para Automotores</p></div>
</div>
<div id="navegacion"><ul>Portada Antecedentes Funcionamiento Estadisticas Eventos Contactenos</div>
<div id="contenido">
<div id="menu">
<h1>Antecedentes</h1><ul> Artículo USA Que es el Hidrogeno? Otros Artículos Actualidad 1 Actualidad 2 Actualidad 3
</div>
<h1>Antecedentes - Hidrogem</h1>
<h2>¿Cuánto falta para utilizar el hidrógeno como combustible?</h2>
Hidrogem, ha nacido para suplir muchas necesidades de los conductores tanto particulares como de servicio público y de transporte pesado, pues tiene múltiples beneficios, pero muchas personas nos preguntan si este producto es nuevo o es una invención reciente. </p>
<div id="imageleft">[contenido no disponible]</div>
La respuesta es no. Este es un producto que ya existe en varios países, como Alemania, México, inclusive en Nueva York los vehículos y camionetas de la Policía son Híbridos (funcionan con Gasolina e Hidrogeno). Pero esto no es todo, muchas empresas del sector automotriz han estado buscando nuevas tecnologías para que los carros salgan de fabricación Híbridos o que funcionen solo con Hidrogeno (estos últimos son carros eléctricos que funcionan con Hidrogeno Líquido y no con Hidrogeno Gaseoso que es nuestro caso). </p>
En este apartado encontrarán que es el Hidrogeno, un articulo que nos llamó mucho la atención pues habla de lo Macro del tema del Hidrogeno como Combustible, pero no miran lo micro que es ya viable con Hidrogem.</p>
<div id="imageright">[contenido no disponible]</div>
También incluimos varios artículos sobre el tema de autos Híbridos y a Hidrogeno que justifican que este no es un tema nuevo, por el contrario ha sido y es una búsqueda constante, pues sin llegar a ser dramáticos, este es el Futuro del Sector Automotriz</p>
<div class="buscador">
<!-- <form method="get" action="http://www.google.es/custom" target="google_window">
<table border="0" bgcolor="#ffffff">
<tr><td nowrap valign="top" align="left" height="32">
<a href="http://www.google.com/">
[contenido no disponible]</a>
</td><td nowrap>
<input type="hidden" name="domains" value="HidrogemBogota">
<input type="text" name="q" size="31" maxlength="255" value="">
<input type="submit" name="sa" value="Búsqueda">
</td></tr>
<tr>
<td></td><td nowrap>
<table>
<tr>
<td>
<input type="radio" name="sitesearch" value="" checked>
<font size="-1" color="#000000">Web</font>
</td><td>
<input type="radio" name="sitesearch" value="HidrogemBogota">
<font size="-1" color="#000000">.:Hidrogem Bogotá:.</font>
</td></tr>
</table><input type="hidden" name="client" value="pub-9883707076618006">
<input type="hidden" name="forid" value="1">
<input type="hidden" name="ie" value="ISO-8859-1">
<input type="hidden" name="oe" value="ISO-8859-1">
<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#FEF1C3;VLC:663399;AH:center;BGC:FEF1C3;LBGC:FEF1C3;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;LH:30;LW:50;L:http://hidrogem.onlinewebshop.net/">
<input type="hidden" name="hl" value="es"> xxx-->
</td></tr></table></form>
</div>
<div id="flechas">
<div id="flechaanterior">[contenido no disponible]</div>
<div id="flechaarriba">[contenido no disponible]</div>
<div id="flechasiguiente">[contenido no disponible]</div>
</div>
<h3>Copyright © 2009 ABA Distribuciones</h3>
</div>
<div id="pie">
<div id="pieuno"><ul> Foro Hidrogem Bogotá Contáctenos Otras Páginas de Interes</div>
<div id="piedos">[contenido no disponible]</div>
<div id="pietres"><ul> Directorio TopSite Mapa de la Web</div>
</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
----
* {text-indent: 0px ; margin:0px ; padding:0px ; border: 0px}
p {text-align: justify}
h1 {font-size: 2.5em; color:Black ; font-weight: bold ; text-decoration: underline; text-align: center ; font-family:"Alexis" ; padding:20px}
h2 {font.size: 1.5em; color:Black ; font-weight: bold ; text-decoration: none ; text-align: center ; font-family:"Copperplate Gothic Bold"}
h3 {font.size: 0.6em; color:Black ; font-weight: bold ; text-decoration: none ; text-align: center ; font-family:"Century Gothic"}
h4 {padding:5px 10px 5px 10px ; text-indent: 10px ; font.size: 0.9em; color:Black ; font-weight: bold ; text-decoration: none ; text-align: left ; font-family:"Century Gothic"}
a {color: white; text-decoration: none ; display: block}
a:link {}
a:visited {}
a:hover {color: Black; text-decoration: underline ; background-color:#FF8C00}
a:active {}
body {text-align: center ; background-image: url(objetos/fondo-principal.png)}
#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:95px}
#logotipo {width:413px ; float:left }
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}
#publicidad {width:385px ; float:right ; margin-top:20px ; margin-bottom:10px ; font-size:22px ; font-family:"Copperplate Gothic Bold"}
#publicidad p {font-size:14px ; font-family:"Copperplate Gothic Bold" ; text-align: center}
#navegacion {background-color: black ; border: black 1px solid ; height:28px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px ; font-size: 18px ; color:white}
#navegacion ul {margin-left: 30px }
#contenido {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid }
#contenido p {padding:5px 10px 5px 10px ; text-indent: 10px ; font-size: 16px ; font-family:"Century Gothic" ; color: #8B0000}
#contenido a {color: Black; text-decoration:none ; display: block}
#contenido a:link{}
#contenido a:visited {}
#contenido a:hover {color:#8B0000 ; text-decoration:underline ; background-color: white }
#contenido a:active {color:Black}
#imageleft {margin:5px 10px 5px 10px ; float:left }
#imageright {margin:5px 10px 5px 10px ; float:Right }
#flechas {margin:20px 10px 5px 10px}
#flechaanterior {float:left ; width:140px}
#flechaarriba {float:left ; width:498px}
#flechasiguiente {float:left ; width:140px}
#menu {width: 150px ; float:left ; text-align:left ; margin:3px 10px 3px 3px ; background-image: url(objetos/menu-parte-inferior.gif) ; background-position: bottom }#menu h1 {text-decoration:none ; font-size:16px ; background-image: url(objetos/menu-parte-superior.gif); padding-top:12px}
#menu li {list-style:none ; margin: 5px 8px 5px 7px}
#menu a {font-size:14px ; color:Black ; font-family:"Copperplate Gothic Bold"}
#menu a:link {}
#menu a:visited {}
#menu a:hover {color: White; text-decoration: underline ; background-color:Black}
#menu a:active {color: Red ; background-color:Black}
#pie {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid ; height: 65px}
#pie a {color: Black; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:#8B0000 ; text-decoration:underline ; background-color: white}
#pie a:active {color:Black}
#pie li {list-style:none ; font-size: 12px}
#pieuno {float:left ; width:150px}
#piedos {float:left ; width:498px}
#pietres {float:left ; width:150px}
#curva-inferior {background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow : hidden }
Agradezco mucho me puedan colaborar...
Lo primero que veo que se vé mal inclusive en Internet Explorer, es el fondo del menú lateral...,
Lo segundo... que desearía incluir la fuente en la página para que toda persona la vea correctamente en cualquier computador...
Lo tercero, es que en Mozilla se ve algunos detalles mal, como por ejemplo se baja la barra de navegación, se pierde parte de Publicidad y el mensaje de copyright aparece en un tamaño de fuente que no corresponde al que le coloqué....
Incluyo mi código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>.:Hidrogem Bogotá:. - Antecedentes -</title>
<link rel="stylesheet" href="../estilo-general.css" type="text/css" media="all">
<style type="text/css">
body {overflow-x:auto ; scrollbar-face-color: Black ; scrollbar-highlight-color: white ; scrollbar-3dlight-color: white ; scrollbar-darkshadow-color: white ; scrollbar-shadow-color: white ; scrollbar-arrow-color: white ; scrollbar-track-color: WHITE}
</style>
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
<div id="publicidad">Por la Economía y el Medio Ambiente...
[contenido no disponible]</p>
Generadores de Hidrogeno para Automotores</p></div>
</div>
<div id="navegacion"><ul>
<div id="contenido">
<div id="menu">
<h1>Antecedentes</h1><ul>
</div>
<h1>Antecedentes - Hidrogem</h1>
<h2>¿Cuánto falta para utilizar el hidrógeno como combustible?</h2>
Hidrogem, ha nacido para suplir muchas necesidades de los conductores tanto particulares como de servicio público y de transporte pesado, pues tiene múltiples beneficios, pero muchas personas nos preguntan si este producto es nuevo o es una invención reciente. </p>
<div id="imageleft">[contenido no disponible]</div>
La respuesta es no. Este es un producto que ya existe en varios países, como Alemania, México, inclusive en Nueva York los vehículos y camionetas de la Policía son Híbridos (funcionan con Gasolina e Hidrogeno). Pero esto no es todo, muchas empresas del sector automotriz han estado buscando nuevas tecnologías para que los carros salgan de fabricación Híbridos o que funcionen solo con Hidrogeno (estos últimos son carros eléctricos que funcionan con Hidrogeno Líquido y no con Hidrogeno Gaseoso que es nuestro caso). </p>
En este apartado encontrarán que es el Hidrogeno, un articulo que nos llamó mucho la atención pues habla de lo Macro del tema del Hidrogeno como Combustible, pero no miran lo micro que es ya viable con Hidrogem.</p>
<div id="imageright">[contenido no disponible]</div>
También incluimos varios artículos sobre el tema de autos Híbridos y a Hidrogeno que justifican que este no es un tema nuevo, por el contrario ha sido y es una búsqueda constante, pues sin llegar a ser dramáticos, este es el Futuro del Sector Automotriz</p>
<div class="buscador">
<!-- <form method="get" action="http://www.google.es/custom" target="google_window">
<table border="0" bgcolor="#ffffff">
<tr><td nowrap valign="top" align="left" height="32">
<a href="http://www.google.com/">
[contenido no disponible]</a>
</td><td nowrap>
<input type="hidden" name="domains" value="HidrogemBogota">
<input type="text" name="q" size="31" maxlength="255" value="">
<input type="submit" name="sa" value="Búsqueda">
</td></tr>
<tr>
<td></td><td nowrap>
<table>
<tr>
<td>
<input type="radio" name="sitesearch" value="" checked>
<font size="-1" color="#000000">Web</font>
</td><td>
<input type="radio" name="sitesearch" value="HidrogemBogota">
<font size="-1" color="#000000">.:Hidrogem Bogotá:.</font>
</td></tr>
</table><input type="hidden" name="client" value="pub-9883707076618006">
<input type="hidden" name="forid" value="1">
<input type="hidden" name="ie" value="ISO-8859-1">
<input type="hidden" name="oe" value="ISO-8859-1">
<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#FEF1C3;VLC:663399;AH:center;BGC:FEF1C3;LBGC:FEF1C3;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;LH:30;LW:50;L:http://hidrogem.onlinewebshop.net/">
<input type="hidden" name="hl" value="es"> xxx-->
</td></tr></table></form>
</div>
<div id="flechas">
<div id="flechaanterior">[contenido no disponible]</div>
<div id="flechaarriba">[contenido no disponible]</div>
<div id="flechasiguiente">[contenido no disponible]</div>
</div>
<h3>Copyright © 2009 ABA Distribuciones</h3>
</div>
<div id="pie">
<div id="pieuno"><ul>
<div id="piedos">[contenido no disponible]</div>
<div id="pietres"><ul>
</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
----
* {text-indent: 0px ; margin:0px ; padding:0px ; border: 0px}
p {text-align: justify}
h1 {font-size: 2.5em; color:Black ; font-weight: bold ; text-decoration: underline; text-align: center ; font-family:"Alexis" ; padding:20px}
h2 {font.size: 1.5em; color:Black ; font-weight: bold ; text-decoration: none ; text-align: center ; font-family:"Copperplate Gothic Bold"}
h3 {font.size: 0.6em; color:Black ; font-weight: bold ; text-decoration: none ; text-align: center ; font-family:"Century Gothic"}
h4 {padding:5px 10px 5px 10px ; text-indent: 10px ; font.size: 0.9em; color:Black ; font-weight: bold ; text-decoration: none ; text-align: left ; font-family:"Century Gothic"}
a {color: white; text-decoration: none ; display: block}
a:link {}
a:visited {}
a:hover {color: Black; text-decoration: underline ; background-color:#FF8C00}
a:active {}
body {text-align: center ; background-image: url(objetos/fondo-principal.png)}
#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:95px}
#logotipo {width:413px ; float:left }
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}
#publicidad {width:385px ; float:right ; margin-top:20px ; margin-bottom:10px ; font-size:22px ; font-family:"Copperplate Gothic Bold"}
#publicidad p {font-size:14px ; font-family:"Copperplate Gothic Bold" ; text-align: center}
#navegacion {background-color: black ; border: black 1px solid ; height:28px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px ; font-size: 18px ; color:white}
#navegacion ul {margin-left: 30px }
#contenido {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid }
#contenido p {padding:5px 10px 5px 10px ; text-indent: 10px ; font-size: 16px ; font-family:"Century Gothic" ; color: #8B0000}
#contenido a {color: Black; text-decoration:none ; display: block}
#contenido a:link{}
#contenido a:visited {}
#contenido a:hover {color:#8B0000 ; text-decoration:underline ; background-color: white }
#contenido a:active {color:Black}
#imageleft {margin:5px 10px 5px 10px ; float:left }
#imageright {margin:5px 10px 5px 10px ; float:Right }
#flechas {margin:20px 10px 5px 10px}
#flechaanterior {float:left ; width:140px}
#flechaarriba {float:left ; width:498px}
#flechasiguiente {float:left ; width:140px}
#menu {width: 150px ; float:left ; text-align:left ; margin:3px 10px 3px 3px ; background-image: url(objetos/menu-parte-inferior.gif) ; background-position: bottom }#menu h1 {text-decoration:none ; font-size:16px ; background-image: url(objetos/menu-parte-superior.gif); padding-top:12px}
#menu li {list-style:none ; margin: 5px 8px 5px 7px}
#menu a {font-size:14px ; color:Black ; font-family:"Copperplate Gothic Bold"}
#menu a:link {}
#menu a:visited {}
#menu a:hover {color: White; text-decoration: underline ; background-color:Black}
#menu a:active {color: Red ; background-color:Black}
#pie {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid ; height: 65px}
#pie a {color: Black; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:#8B0000 ; text-decoration:underline ; background-color: white}
#pie a:active {color:Black}
#pie li {list-style:none ; font-size: 12px}
#pieuno {float:left ; width:150px}
#piedos {float:left ; width:498px}
#pietres {float:left ; width:150px}
#curva-inferior {background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow : hidden }
Agradezco mucho me puedan colaborar...