Hola, tengo que hacer la cabecera de una aplicaci�n, esta contiene 2 partes fundamentales, el logo, y el men� principal. Me he puesto a hacerla a traves de una lista desordenada ya que tiene elementos anidados, digamos que el men� principal, debe estar en posici�n horizontal, mientras que en posici�n vertical deberan estar los elementos que cuelguen de estos elementos principales, aparentemente, todo funciona bien salvo un peque�o detalle, los elementos principales tienen una imagen relacionada, esta la he puesto como background, que sucede, pues que estos (son simples enlaces) no me hacen caso en cuanto a altura del elemento y altura de linea, por lo tanto la imagen se ve cortada, para solucionar este problema les indico que su display sea block.
Una vez hecho esto firefox lo visualiza todo correctamente, pero Explorer pone un elemento encima de otro, as� pues no me sirve la soluci�n, He provado muchas cosas y al final no ha habido manera de solucionarlo, si alguien tiene alguna propuesta estare tremendamente agradecido. Gracias y un saludo Pd. Adjunto el codigo de la p�gina con los estilos. Las im�genes empleadas para los enlaces son de 41x31� px <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Documento sin título</title> <style type="text/css"> body { font-family:arial,helvetica,sans-serif; background-image:url(images/page_back.gif); background-repeat:repeat; font-size:small; margin-top:20px; margin-bottom:20px; text-align:left; color:#000000; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; } div#divHeader { background-image:url(images/backgroundHeader.gif); background-repeat:no-repeat; background-position:left top; height:74px; width:774px; margin:0px; padding:0px; } div#divHeader div#divHeaderLogo { float:left; width:129px; height:70px; } div#divHeader div#divMenu { float:left; margin:0px; padding:0px; } div#divHeader div#divMenu ul { padding:0px; margin:0px; list-style: none; } div#divHeader div#divMenu ul li{ display:inline; display:block; float:left; } div#divHeader div#divMenu ul li div { /*display:block; */ } li>ul { top: auto; left: auto; } div#divHeader div#divMenu ul li a{ font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; font-weight:bold; font-size:12px; text-decoration:none; background-repeat:no-repeat; background-position:left top; display:block; /* DISPLAY DE LA DISCORD�A COMENTAR Y DESCOMENTAR PARA VER EL PROBLEMA */ overflow:visible; height:31px; line-height:31px; padding-left:41px; vertical-align:top; } div#divMenu ul li a#item1{background-image:url(images/top_item1Off.gif); } div#divMenu ul li a#item2{background-image:url(images/top_item2Off.gif); } div#divMenu ul li a#item3{background-image:url(images/top_item3OFF.gif); } div#divMenu ul li a#item4{background-image:url(images/top_item4Off.gif); } div#divMenu ul li a#item5{background-image:url(images/top_item5Off.gif); } div#divMenu ul li#copyright{ font-size:8px; font-weight:normal; color:#CCCC99; padding-left:5px; padding-right:5px; } div#divHeader div#divMenu ul li ul{ position:relative; list-style-type:none; padding-left:15px; list-style-type:circle; } div#divHeader div#divMenu ul li ul li{ display:block; float:none; list-style-type:disc; } div#divHeader div#divMenu ul li ul li a{ color:#666666; font-weight:normal; font-size:10px; padding-left:10px; height:auto; line-height:normal; } </style> </head> <body> <div id="divHeader"> <div id="divHeaderLogo"> <img src="images/main_logo.gif" alt="logo" /> </div> <div id="divMenu"> <ul> <li> <a href="#" id="item1">item 1</a> </li> <li> <div> <a href="#" id="item2">item 2</a> </div> <ul> <li><a href="#">item 2 1</a></li> <li><a href="#">item 2 2</a></li> <li><a href="#">item 2 3</a></li> </ul> </li> <li> <div> <a href="#" id="item3">item 3</a> </div> <ul> <li><a href="#">item 3 1</a></li> <li><a href="#">item 3 2</a></li> </ul> </li> <li> <div> <a href="#" id="item4">item 4</a> </div> <ul> <li><a href="#">item 4 1</a></li> <li><a href="#">item 4 2</a></li> <li><a href="#">item 4 3</a></li> </ul> </li> <li> <div> <a href="#" id="item5">item 5</a> </div> <ul> <li><a href="#">item 5 1</a></li> <li><a href="#">item 5 2</a></li> <li><a href="#">item 5 3</a></li> </ul> </li> <li id="item6"> Copyright © 2005 </li> </ul> </div> </div> </body> </html>
_______________________________________________ Lista de distribuci�n Ovillo Para escribir a la lista, envia un correo a [email protected] Puedes modificar tus datos o desuscribirte en la siguiente direcci�n: http://ovillo.org/mailman/listinfo/ovillo
