Bordes indeseables en menú desplegable

[carloschop]

Buenas noches.

Hice un menú desplegable sencillo. El problema es que tengo un borde de 1px blanco que hace que cada bloque se vea separado, lo veo en Mozilla y Chrome.

Aún más, los bloques ocultos tienen 2px de separación (la suma del borde del bloque superior + el borde del bloque inferior)

No más vean el [URL="http://www.sembradordepaz.com/"]ejemplo[/URL]:

http://www.sembradordepaz.com/


Ah claro, y en IE se ve MUCHO PEOR

Aquí está el código del estilo:

Código PHP:

  * {text-indent:0px ; margin:0px ; padding:0px ; border:0px; list-style:none;}
h1 {font-size: 40px; color:blue ; font-weight: bold ; text-decoration: underline ;
text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; 
text-align: center}
h3 {text-align: center; font-size: 0.9em; text-decoration: underline;}




body {text-align: center; background-color:#808080; }

#global {width:900px ; margin:4px auto; border: 2px solid #808080; background-color: white; padding:0;}

#cabecera {height:200px; position:relative; z-index:2;}

#menu-horizontal {height: 49px; width: 900px; position:relative; 
 background: url("objetos/barra-menu-horizontal.png"); }
#menu-horizontal p {font-size: 6px;}
#menu-horizontal a {text-decoration:none; color: white;}
#menu-horizontal a:hover {text-decoration:underline; color:red;}
#menu-horizontal li {float:left ; list-style:none;    height: 49px; width: 150px;                        
 border: 0px; padding: 0px; display:block; position:relative;
 font-family: calibri;  font-size: 25px;}                      
#menu-horizontal > li:hover ul { display:block; left:0; top:49px; 
 position:absolute;  background: url("objetos/barra-discipulado.png");}

#menu-horizontal li ul {display:none;}
#menu-horizontal li ul li { list-style-type:none; }
#menu-horizontal li ul li a { display:block; margin: 2px; }  
   

Y acá un fragmento del código HTML del menú:

Código PHP:

  <div id="global" <!-- Capa total para margen y centrado -->
                    <!-- INICIO CODIGO CABECERA -->
                    <div id="cabecera">
                             <div id="logotipo"><a href="index.html"><img src="objetos/logotipo.png" 
                              alt="Haz clic aquí para volver a la página de inicio"></a>
                             </div> <!-- Fin div logotipo -->
                       <!-- INICIO CODIGO MENU HORIZONTAL -->
                             <ul id="menu-horizontal">
                    <li><p><br /></p><a href="index.html">Inicio</a></li>
                                        <li><p><br /></p><a href="construccion.html">Discipulado</a>
                                                <ul>
                                                        <li><p><br /></p><a href="construccion.html">¿Para qué?</a></li>
                                                        <li><p><br /></p><a href="construccion.html">Evalúate!</a></li>
                                                </ul>
                    </li>
                                        <li><p><br /></p><a href="articulos/El-firmo-con-su-sangre.html">Artículos</a></li>
                                        <li><p><br /></p><a href="construccion.html">Foro</a>
                                                <ul>
                                                        <li><p><br /></p><a href="construccion.html">Inicia sesión</a></li>
                                                        <li><p><br /></p><a href="construccion.html">Regístrate</a></li>
                                                </ul>
                                        </li>
                                        <li><p><br /></p><a href="construccion.html">Descargas</a></li>
                                    
                                      <li><p><br /></p><font color="white">Acerca de</font>
                            <ul>
                                <li><p><br /></p><a href="articulos/acerca-de-Dios.html">Dios</a></li>
                                <li><p><br /></p><a href="articulos/acerca-de-la-web.html">La web</a></li>
                                <li><p><br /></p><a href="construccion.html">El autor</a></li>
                            </ul>
                                      </li>
               </ul> <!-- Fin div menu-horizontal -->
                    </div> <!-- Fin div cabecera -->
                    
<!-- FIN CODIGO CABECERA -->  
   

Agradecimientos porque lean el código, lo traté de hacer lo más ordenado posible

[flashmax]

en internet explorer 8 tus botones no me funcionan, y lo que note que la imagen barra-discipulado.png tiene un borde trasparente.
quitale el borde trasparente o dale color y corrige el top:49px; en #menu-horizontal > li:hover ul

eso es lo único que veo no se si sera tu problema...saludos!

[carloschop]

y lo que note que la imagen barra-discipulado.png tiene un borde trasparente.
quitale el borde trasparente o dale color y corrige el top:49px; en #menu-horizontal > li:hover ul

Wao!!! Varón tenía como dos semanas sin hallar la causa. Felicitaciones por tu conocimiento, ya lo resolví


Lo de IE debe ser porque tengo que agregarle en block:inline, ya me pongo a hacer un css especialmente para IE y seguro se resuelve.

¿Dónde te pongo puntoss? Jejeje

[flashmax]

donde dice +0 en verde o me gusto...saludos!

[carloschop]

Listo IE!


Todo bien! No hay bordes indeseables, el menú desplegable funciona en todos los navegadores...

Aaaaleluuyaaaaaaaa!


Uff cómo costó!!