Se perdió todo el estilo de mi Menú Lateral... se ve horribl

Hola... Mi Menú Lateral se ve horrible... ya he tratado de arreglarlo pero no funciona... auxilio...

http://hidrogem.onlinewebshop.net/antecedentes/articulo.html

Envío mi código de página y de estilo

<!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&iacute;culos
  • Actualidad
    </div>

    <h1>Antecedentes - Hidrogem</h1>
    <h2>¿Cu&aacute;nto falta para utilizar el hidr&oacute;geno como combustible?</h2>


    Hidrogem, ha nacido para suplir muchas necesidades de los conductores tanto particulares como de servicio p&uacute;blico y de transporte pesado, pues tiene m&uacute;ltiples beneficios, pero muchas personas nos preguntan si este producto es nuevo o es una invenci&oacute;n reciente. </p>
    <div id="imageleft">[contenido no disponible]</div>


    La respuesta es no. Este es un producto que ya existe en varios pa&iacute;ses, como Alemania, M&eacute;xico, inclusive en Nueva York los veh&iacute;culos y camionetas de la Polic&iacute;a son H&iacute;bridos (funcionan con Gasolina e Hidrogeno). Pero esto no es todo, muchas empresas del sector automotriz han estado buscando nuevas tecnolog&iacute;as para que los carros salgan de fabricaci&oacute;n H&iacute;bridos o que funcionen solo con Hidrogeno (estos &uacute;ltimos son carros el&eacute;ctricos que funcionan con Hidrogeno L&iacute;quido y no con Hidrogeno Gaseoso que es nuestro caso). </p>


    En este apartado encontrar&aacute;n que es el Hidrogeno, un articulo que nos llam&oacute; mucho la atenci&oacute;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&eacute;n incluimos varios art&iacute;culos sobre el tema de autos H&iacute;bridos y a Hidrogeno que justifican que este no es un tema nuevo, por el contrario ha sido y es una b&uacute;squeda constante, pues sin llegar a ser dram&aacute;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&aacute;
  • Cont&aacute;ctenos
  • Otras P&aacute;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-right: 10px ; margin:3px 10px 3px 3px ; background-image: url(objetos/menu-parte-inferior.gif) ; background-position: bottom ; padding-bottom:5px}
    #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 }
  • Hola, yo el menu lateral lo veo bien, lo que veo mal es la barra de navegación y es por que en los estilos a la capa cabecera que es la que contiene la capa logotipo y la capa publicidad le das una altura de 95px,mientras que a la capa publi no le das altura por lo cual toma la misma que la cabecera y a eso sumale el margin-top 20px más el margin-bottom 10px eso te da 125px, por lo cual se te desborda, corrige eso, prueba con por ejemplo margin-top:5px y con margin-bottom:5px ya verás como cambia
    intenta con este codigo
    #menu {width: 150px ; float:left ; text-align:left ;
    margin:3px 10px 3px 3px ; background-image: url(objetos/menu-parte-inferior.gif) ;
    background-position: bottom }
    Bueno, les cuento que en Internet Explorer, se vé bien todo excepto el menú lateral, pues aparece como repetida la imagen de menu-parte-superior.gif...

    Ahora que acabo de mirar la página en otro computador, me aparede que los títulos y los textos del menú lateral no aparede con la fuente que yo le coloqué... como hago para incluir la fuente que le coloqué para los computadores que no lo tienen???

    Otra cosa... en Mozilla todavía se ve mal la cabecera y el menú de Navegación... Auxilio Please...

    Mil gracias.