Caio a tutti, ho un problema di visualizzazione del menù orizzondale fatto in css (il problema mi si presenta come sempre, con explorer). In pratica ciò che mi succede è questo: ho un menù orizzondale con altrettanti sotto-menù anch'essi orizzondali; fin qui tutto bene, l'unico incoveniente p che con explorer quando mi posiziono su una voce di menù, mi esce il corrispondente sotto-menù orizzondale con in più delle righe verticali fastidiose. vi posto una parte di codice per farvi vedere meglio cosa succede
Index.html
<!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 senza titolo</title>
<link rel="stylesheet" href="stile.css" type="text/css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="stile_ie.css" />
<![endif]-->
</head>
<body>
<div id="globalNav">
[img]banner_azienda.jpg[/img]
<div class="menu">
<ul>
[*]
Home
<!--[if lte IE 6]>
<a href="index.html">Home
<table><tr><td>
<![endif]-->
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
[*]
Login
<!--[if lte IE 6]>
<a href="#">link
<table><tr><td>
<![endif]-->
<ul>
[*]interni |
[*]clienti |
[/list]
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
[*]
Logout
<!--[if lte IE 6]>
<a href="index.html">Contatti
<table><tr><td>
<![endif]-->
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
[/list]
</div>
</div>
</body>
</html>
***********
stile.css
body{
background-color:#000000;
}
/*************** list tag styles ***************/
ul{
list-style-type: square;
}
ul ul{
list-style-type: disc;
}
ul ul ul{
list-style-type: none;
}
/***********************************************/
/* Component Divs */
/***********************************************/
/************* globalNav styles ****************/
#globalNav{
position: relative;
top:0px;
height:160px;
width:780px;
color:#000000;
padding: 0px;
margin: 0px;
/*background-image:url(immagini-nuove/glbnav_background.gif);
background: overflow: hidden;*/
/* background-image:url(../immagini azienda/banner_azienda.jpg);
*/
}
/********************* menu **********************/
.menu{
font-family: arial, sans-serif;
/*width:749px;
height:22px;
position:absolute;*/
position:relative;
top: -32px;
height: 22px;
min-width: 640px;
width:100%;
padding: 0px;
/*margin: 0px;
left: 10px;*/
margin:0px;
font-size:11px;
/*margin:20px 0 60px 0;*/
position:relative;
}
.menu ul {padding:0; margin:0; list-style-type: none;}
.menu ul li {float:left; border-left:1px solid #adafb0; width:80px; height:31px}
.menu ul li a, .menu ul li a:visited {display:block; float:left; width:77px; text-decoration:none;
padding:0 0 0 5px; height:31px; line-height:31px; color:#000;
background:#ABB91C /* #e2e6e7 */ bottom right no-repeat;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a{color:#fff; background:#b3ab79;}
.menu ul li:hover ul{display:block; position:absolute;/* width:100%;B5BF80*/ top:31px; left:0; width:749px; }
.menu ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul li a.hide {background:#bd8d5e bottom right no-repeat; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#b3ab79; color:#fff;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a{display:block; background:#b3ab79; color:#fff;}
.menu ul li:hover ul li a:hover{background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul{display:block; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}
.menu ul li:hover ul.right li {float:right;}
.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a{background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover{background:#bd8d5e; color:#fff;}
********************
stile_ie.css
.menu{
font-family: arial, sans-serif;
position:relative;
top: -38px;
height: 31px;
min-width: 640px;
width:100%;
padding: 0px;
font-size:11px;
margin:0px 0 0px 0;
position:relative;
z-index:100;
}
table { height:0px; margin:1; padding:0;}
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a, .menu ul li a:visited {background:#ABB91C right no-repeat;}
.menu ul li a:hover {color:#fff; background:#b3ab79;}
.menu ul li a:hover ul {display:block; position:absolute; width:749px; top:36px; left:0; color:#fff;}
.menu ul li a:hover ul.right_side li {float:right; border-width:0 1px 0 0 0;}
.menu ul li a:hover ul.left_side li {float:left;}
.menu ul li a:hover ul li a.sub {background:#b3ab79 20px right no-repeat; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:0; top:30px;color:#000; background:#dfc184;}
.menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}
Perchè in explorer succede ciò e in firefox è tutto ok?
grazie mille
Rispondi quotando
Hai ragione, ma alle volte con IE bisogna ricorrere a soluzioni poco eleganti.
