Foros del Web » Creando para Internet » CSS »

Error con IE7.... Ah...

Estas en el tema de Error con IE7.... Ah... en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/01/2008, 12:19
 
Fecha de Ingreso: noviembre-2007
Mensajes: 60
Antigüedad: 10 años
Puntos: 2
Error con IE7.... Ah...

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...
  #2 (permalink)  
Antiguo 02/01/2008, 23:44
Avatar de floren  
Fecha de Ingreso: febrero-2005
Ubicación: Málaga
Mensajes: 134
Antigüedad: 12 años, 10 meses
Puntos: 0
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...
  #3 (permalink)  
Antiguo 05/01/2008, 07:33
 
Fecha de Ingreso: noviembre-2007
Mensajes: 60
Antigüedad: 10 años
Puntos: 2
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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:37.