Hola,
En Caotico Neutral
(http://simplelogica.net/caoticoneutral/index.php?p=26)
hay un tutorial bastante bueno donde explica como
hacer  enlaces con imagen, está cambia según su
estado. No se si puede resolver tu problema ya que no
habla del problema en ie, pero igual nos puede dar una
idea.

saludos,
Lucía.



 --- Cesar Perez <[EMAIL PROTECTED]> escribió:

> 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&iacute;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>
> 
=== message truncated ===>
_______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a
> Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la
> siguiente dirección:
> http://ovillo.org/mailman/listinfo/ovillo
> 



                
______________________________________________ 
Renovamos el Correo Yahoo! 
Nuevos servicios, más seguridad 
http://correo.yahoo.es
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://ovillo.org/mailman/listinfo/ovillo

Responder a