Foros del web, para los que viven de bits

MauroC · 02-ene-2008, 11:19

Hola, FdW

Estoy armando un menu CSS pero IE 7 no me anda bien, anda en todos menos en IE 7, el problema es que interpone los menues uno sobre otro, y despues deforma todo...

Miren, les dejo el codigo:

Código:

<style type="text/css">
#menu {
width: 180px; /* set width of menu */
} 

#menu ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}

/* style, color and size links and headings to suit */
#menu a {
    font: bold 13px Verdana, helvetica, sans-serif;
    display: block;
    float: left;
    text-align: left;
    width: 130px;
    height: 28px;
    margin: 10px 0 0 25px;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    outline: none;
}
#menu li {
/* make the list elements a containing block for the nested lists */
position: relative;
} 

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */
}

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

div#menu ul ul ul ul { display: block; }
div#menu ul ul li:hover ul { display: block; }

div#menu ul ul li {
    width: 180px;
    height: 39px;
    margin: 0;
    padding: 0;
}
div#menu ul ul li:hover {
    width: 180px;
    height: 39px;
}
div#menu ul ul li.selected {
    width: 180px;
    height: 39px;
}
div#menu ul ul li a.zerowaste_link {
text-indent: -10000px; display: block; margin: 0;
width: 180px;
height: 50px;
}
div#menu ul ul li a:hover.zerowaste_link {
text-indent: -10000px; display: block; margin: 0;
width: 180px;
height: 50px;
}

div#menu ul ul ul li {
    margin: 0;
    padding: 0;
    background: #a7c3ee;
    width: 180px;
    height: 38px;
    border-bottom: 1px solid #bdd2f2;
}
div#menu ul ul ul li:hover {
    background: #88a7e1;
    width: 180px;
    height: 38px;
}
div#menu ul ul ul li.selected {
    background: #88a7e1;
    width: 180px;
    height: 38px;
}
div#menu ul ul ul li a {
    margin: 0;
    clear: both;
    font-size: 11px;
    width: 152px;
    padding: 5px 0 0 10px;
    line-height: 14px;
    font-weight: normal;
}
div#menu ul ul ul ul li {
    background: #FFCC00;
    width: 180px;
    height: 39px;
    margin: 0;
    padding: 0;
   border-bottom: 1px solid #ffd759;
}
div#menu ul ul ul ul li:hover {
    background: #F1C100;
    width: 180px;
    height: 39px;
}

div#menu ul ul ul li {
    margin: 0;
    padding: 0;
    background: #a7c3ee;
    width: 180px;
    height: 38px;
    border-bottom: 1px solid #bdd2f2;
}
div#menu ul ul ul li:hover {
    background: #88a7e1;
    width: 180px;
    height: 38px;
}
div#menu ul ul ul li.selected {
    background: #88a7e1;
    width: 180px;
    height: 38px;
}
div#menu ul ul ul li a {
    margin: 0;
    clear: both;
    font-size: 11px;
    width: 152px;
    padding: 5px 0 0 10px;
    line-height: 14px;
    font-weight: normal;
}

-->
</style>
<!--[if IE]>
<style type="text/css" media="screen">

#menu ul li {
float: left; /* cure IE5.x "whitespace in lists" problem */
width: 100%;
}
#menu ul li a {
height: 1%; /* make links honour display: block; properly */
font-size: 13px;
margin-left: 13px;
font-weight: bold;
} 

div#menu ul ul ul li a {
    font-size: 11px;
    font-weight: normal;
}
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif; 
/* if required use em's for IE as it won't resize pixels */
} 

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
.zerowaste_link {background-image: url('images/zerowaste_off.jpg'); width: 180px; height: 50px; text-indent: -10000px; display: block; margin: 0;
}
ul li a.zerowaste_link:hover ul { display:block; }
</style>
<![endif]-->
<div id="menu">
                    <ul>
                      <li>
                        <ul>
                          <li style="margin: 0; height: 50px;"><a href="javascript:;" id="zerowaste_linkk" title="Zero Waste" class="zerowaste_link">Zero Waste</a>
                                                        <ul id="menu_ul">
                              <li><a href="whatszerowaste.php" title="">What's Zero Waste?</a></li>
                              <li><a href="javascript:;" title="">Residents</a>
                                <ul>
                                  <li><a href="howtobeasmartconsumer.php" title="">How to be a Smart Consumer</a></li>
                                  <li><a href="howtocompost.php" title="">How to Compost</a></li>
                                  <li><a href="howtodisposezerowasteway.php" title="">How to Dispose of Items the Zero Waste Way</a></li>

                                </ul>
                            </li>
                              <li><a href="javascript:;" title="">Businesses</a>
                                <ul>
                                  <li><a href="bussiness_contractorsbuilders.php" title="">Contractors &amp; Builders</a></li>
                                  <li><a href="bussiness_manufacturers.php" title="">Manufacturers</a></li>

                                  <li><a href="bussiness_offices.php" title="">Offices</a></li>
                                  <li><a href="bussines_restaurantsfood.php" title="">Restaurants &amp; Food Services</a></li>
                                </ul></li>
                            </ul>
                          </li>
                          <!-- END ZERO WASTE -->
                        </ul>
                        <ul>
                          <li><a href="javascript:none" title="">Homeowners</a>
                            <ul>
                              <li><a href="homeowner_household.php" title="">Household Hazardous Materials - Use and Disposal</a></li>
                              <li><a href="homeowner_rrr.php" title="">Reduce, Reuse, Recycle</a></li>
                              <li><a href="homeowner_energy.php" title="">Energy Saving Home Upgrades</a></li>
                              <li><a href="green_build.html" title="">Irvine's Green Building Program</a></li>
                              <li><a href="homeowner_energy_saving_tips.php" title="">Easy and Free Energy Saving Tips</a></li>
                              <li><a href="homeowner_tips_for_clean.php" title="">Tips for a Clean & Litter Free Community</a></li>
                              <li><a href="homeowner_contact.php" title="">Contact Information for Local Utility Companies</a></li>
                            </ul>
                          </li>
                        </ul>
                        <ul>
                          <li><a href="javascript:none" title="">Multi-Units</a>
                            <ul>
                              <li><a href="multiunit_household.php" title="">Household Hazardous Materials - Use and Disposal</a></li>
                              <li><a href="multiunit_rrr.php" title="">Reduce, Reuse, Recycle</a></li>
                              <li><a href="green_build.html" title="">Irvine's Green Building Program</a></li>
                              <li><a href="multiunit_energy_saving_tips.php" title="">Easy and Free Energy Saving Tips</a></li>
                              <li><a href="multiunit_tips_for_clean.php" title="">Tips for a Clean & Litter Free Community</a></li>
                              <li><a href="multiunit_contact.php" title="">Contact Information for Local Utility Companies</a></li>
                            </ul>
                          </li>
                        </ul>
                        <ul>
                          <li><a href="javascript:none" title="">Developers</a>
                            <ul>
                              <li><a href="green_build.html" title="">Irvine's Green Building Program</a></li>
                              <li><a href="developers_construction_demolition.php" title="">Construction & Demolition Materials</a></li>
                            </ul>
                          </li>
                        </ul>
                        <ul>
                          <li><a href="javascript:none" title="">Schools</a>
                            <ul>
                              <li><a href="school_enviromental.php" title="">Environmental Lesson Plans</a></li>
                              <li><a href="school_organize.php" title="">Organize a School Clean-Up</a></li>
                              <li><a href="school_start.php" title="">Start a Recycling Program</a></li>
                            </ul>
                          </li>
                        </ul>
                        <ul>
                          <li><a href="javascript:none" title="">Businesses</a>
                            <ul>
                              <li><a href="businesses_rrr.php" title="">Reduce, Reuse, Recycle</a></li>
                              <li><a href="businesses_start.php" title="">Start a Recycling Program</a></li>
                              <li><a href="businesses_energy_saving.php" title="">Energy Saving Tips</a></li>
                              <li><a href="http://www.calgold.ca.gov/" title="" target="_blank">Required Business Permits</a></li>
                              <li><a href="green_build.html" title="">Irvine's Green Building Program</a></li>
                            </ul>
                          </li>
                        </ul>                      </li>
                    </ul>
                    </div>

La verdad, que lo encuentro solucion...

floren · 02-ene-2008, 22:44

Uf... menudo código... ¿de dónde lo has sacado? Es que vaya tela, necesita depuración por un tubo.

Yo he quitado todo lo que hay entre



y he puesto

Código:

div#menu ul ul ul li {
    background: #a7c3ee;
    width: 180px;
    height: 43px;
    border: 1px solid;
    border-bottom: 1px solid #bdd2f2;
    margin-bottom: 3px;
}

A parte, si ya defines al inicio margin:0; padding:0, no es necesario ir reptiéndolo cada 2x3...

MauroC · 05-ene-2008, 06:33

Si ya se que necesita depuracion, si solo te mostrara en codigo HTML te darian ganas de cortarte las venas, pero es un trabajo que estoy haciendo sobre el codigo que otro coder ya hizo, y la verdad que es un desastre.

02-ene-2008, 22:44	#2 (permalink)
floren Fecha de Ingreso: febrero-2005 Ubicación: Málaga Mensajes: 134	Re: Error con IE7.... Ah... Uf... menudo código... ¿de dónde lo has sacado? Es que vaya tela, necesita depuración por un tubo. Yo he quitado todo lo que hay entre <!--[if IE]> <![endif]--> y he puesto Código: div#menu ul ul ul li { background: #a7c3ee; width: 180px; height: 43px; border: 1px solid; border-bottom: 1px solid #bdd2f2; margin-bottom: 3px; } A parte, si ya defines al inicio margin:0; padding:0, no es necesario ir reptiéndolo cada 2x3...

05-ene-2008, 06:33	#3 (permalink)
MauroC Fecha de Ingreso: noviembre-2007 Mensajes: 60	Re: Error con IE7.... Ah... Si ya se que necesita depuracion, si solo te mostrara en codigo HTML te darian ganas de cortarte las venas, pero es un trabajo que estoy haciendo sobre el codigo que otro coder ya hizo, y la verdad que es un desastre.

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado