Comunidad de diseño web y desarrollo en internet online

Problema con menu con listas CSS y explorer 7

Citar            
MensajeEscrito el 19 May 2008 11:59 am
Hola,

tengo un "serio" problema con la web que estoy haciendo para la empresa para la que trabajo, el menu de navegación principal de la web me funciona con todos los navegadores excepto con el "IE7", no saliéndome los submenus. Espero que me puedan ayudar por que me urge "MUCHIIIISIMO", llevo ya una semana con esto y no hay manera de sacarle punta. Se supone que estoy usando en archivo "csshover.htc" para solucionar el problema con este navegador, pero es imposible (al menos para mi).

la web en cuestion es www.qadram.com, pero si lo abriis con el explorer va a funcionar por que esta colgada la antigua y la nueva no puedo colgarla ahora, pero visualmente igual, solo que internamente estoy cambiando el código

Aqui os dejo el código del menu html y después el CSS.

HTML:

<!-- Home button -->

<div id="MainMenu">
<ul class="home">
<li><a href="index.php?actlSection=home" class="h" <?php ShowHomeEvents($id); ?>>
<?php ShowButtonHome($id); ?>
</a></li>
</ul>

<!-- Solutions menu -->
<ul>
<li><a href="index.php?actlSection=solutions" class="so" <?php ShowSolutionsEvents($id); ?>>
<!-- <img src="/img/menubar/inactive/mnuSolutions_normal.gif" border="0" name="solutions"/>-->
<?php ShowButtonSolutions($id); ?>
</a>
<ul class="solutions">
<li><a href="index.php?actlSection=solutions#a1" title="B2C & B2B solutions" class="asub">B2C & B2B solutions</a></li>
<li><a href="index.php?actlSection=solutions#a2" title="Document Management Systems (DMS)" class="asub">Document Management Systems (DMS)</a></li>
<li><a href="index.php?actlSection=solutions#a3" title="Content Management Systems (CMS)" class="asub">Content Management Systems (CMS)</a></li>
<li><a href="index.php?actlSection=solutions#a4" title="Customer Relantionship Management (CMR)" class="asub">Customer Relantionship Management (CMR)</a></li>
<li><a href="index.php?actlSection=solutions#a5" title="Payment Gateway Integration" class="asub">Payment Gateway Integration</a></li>
<li><a href="index.php?actlSection=solutions#a6" title="Product Tracking and Inventory Systems" class="asub">Product Tracking and Inventory Systems</a></li>
</ul>
</li>
</ul>

<!-- Products menu -->
<ul class="prod">
<li>
<a href="index.php?actlSection=products" class="p" <?php ShowProductsEvents($id); ?>>
<?php ShowButtonProducts($id); ?>
</a>
<ul class="products">
<li><a href="#" title="qstudio :: rad development for the web" class="asub">qstudio :: rad development for the web</a></li>
</ul>
</li>
</ul>

<!-- Services menu -->
<ul class="services">
<li>
<a href="index.php?actlSection=services" class="s" <?php ShowServicesEvents($id); ?>>
<?php ShowButtonServices($id); ?>
</a>
</ul>

<!-- Technology menu -->
<ul class="technology">
<li>
<a href="index.php?actlSection=technology" class="t" <?php ShowTechnologyEvents($id); ?>>
<?php ShowButtonTechnology($id); ?>
</a>
</ul>

<!-- Customers menu -->
<ul class="custom">
<li>
<a href="index.php?actlSection=all_customers" class="c" <?php ShowCustomersEvents($id); ?>>
<?php ShowButtonCustomers($id); ?>
</a>
<ul class="customers">
<li><a href="index.php?actlSection=custom_industry" title="by Industry" class="asub">by Industry</a></li>
<li><a href="index.php?actlSection=custom_geography" title="by Geography" class="asub">by Geography</a></li>
<li><a href="index.php?actlSection=all_customers" title="View all customers" class="asub">View all customers</a></li>
</ul>
</li>
</ul>

<!-- Support menu -->
<ul class="sup">
<li>
<a href="index.php?actlSection=support&actlShowMessage=none" class="su" <?php ShowSupportEvents($id); ?>>
<?php ShowButtonSupport($id); ?>
</a>
<ul class="support">
<li></li>
</ul>
</li>
</ul>

<!-- Projects menu -->
<ul class="proj">
<li>
<a href="#" class="pr" <?php ShowProjectsEvents($id); ?>>
<?php ShowButtonProjects($id); ?>
</a>
<ul class="projects">
<li><a href="http://www.xpde.com/" title="XPde :: Linux Desktop Environment" class="asub" target="_blank">XPde :: Linux Desktop Environment</a></li>
<li><a href="http://oscommerce.qadram.com/" title="osCommerce spanish support site" class="asub" target="_blank">osCommerce spanish support site</a></li>
</ul>
</li>
</ul>

<!-- Company menu -->
<ul class="comp">
<li>
<a href="#" class="co" <?php ShowCompanyEvents($id); ?>>
<?php ShowButtonCompany($id); ?>
</a>
<ul class="company">
<li><a href="index.php?actlSection=news" title="News" class="asub">News</a></li>
<li><a href="index.php?actlSection=about_us" title="About us" class="asub">About us</a></li>
<li><a href="index.php?actlSection=contact_us" title="Contact us" class="asub">Contact us</a></li>
</ul>
</li>
</ul>
</div>

CODIGO CSS.

#MainMenu {
width: 100%;
background: #485e88;
float: left;
}

#MainMenu ul {
margin: 0;
padding: 0;
width: 4em;
float: left;
height:50px;
}

#MainMenu ul li a{
height:50%;
}

#MainMenu ul.home{
margin-left:5px;
}

#MainMenu ul.solutions{
width:290px;
float:left;
left:-4px;
margin-top:62px;
}

#MainMenu ul.solutions a:hover {
color: #FFFFFF;
background: #7283A3;
}

#MainMenu ul.products{
width:240px;
margin-top:62px;
left:-4px;
}

#MainMenu ul.products a:hover {
color: #FFFFFF;
background: #7283A3;
}

#MainMenu ul.customers{
width:120px;
margin-top:62px;
left:-4px;
}

#MainMenu ul.customers a:hover {
color: #FFFFFF;
background: #7283A3;
}

#MainMenu ul.support{
width:200px;
}

#MainMenu ul.projects{
width:220px;
margin-top:62px;
left:-4px;
}

#MainMenu ul.projects a:hover {
color: #FFFFFF;
background: #7283A3;
}

#MainMenu ul.company{
width:85px;
margin-top:62px;
left:-4px;
}

#MainMenu ul.company a:hover {
color: #FFFFFF;
background: #7283A3;
}

#MainMenu a.asub{
display: block;
margin: 0;
margin-left:3px;
margin-top:-13px;
padding: 2px 6px 7px;
color: #FFFFFF;
background: #485e88;
text-decoration: none;
}

#MainMenu li {position: relative;}

#MainMenu ul ul {
position: absolute;
z-index: 500;
}

#MainMenu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#MainMenu ul ul {
display: none;
}

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

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

/*IEXPLORER MENUBAR COMPATIBILITY*/

#menu ul li {
float: left; width: 100%;}

body {
behavior: url(/jscript/csshover.htc);
font-size: 100%;
}

#menu ul li a {height: 100%;}

espero impaciente vuestra ayuda y gracias de antemano.

un saludo

Por quimer@

1 de clabLevel



Genero:Masculino  

opera
Citar            
MensajeEscrito el 19 May 2008 12:02 pm
Con todo ese chorro de código...
La próxima vez... usa el botón "code", para que el código se muestre legible.

Por lo demás, te diría que sigas el ejemplo de vectoralia: este.
Fácil, y crossbrowser.

Si no... yo necesitaría q condensaras tu ejemplo, a sólo lo necesario.
(si alguien con más time, puede echarte una mano, estupendo)

Saludos.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 19 May 2008 12:08 pm
ACTUALIZACIÓN:
Tu página actual: www.qadram.com, necesita de JavaScript para mostrar el menú. No se si eso es algo que vas a arreglar en la nueva versión. Pero si eso sigue siendo así en la nueva, es motivo más que de sobra para que trabajes según el ejemplo de vectoralia.

Que el JavaScript sea necesario para mostrar un menú, en todos los navegadores, es un error bastante ¿serio?.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.