Ciao a tutti,
innanzi tutto grazie per l'aiuto (a volte indiretto) che mi date con il mio lavoro. Ho sempre trovato le soluzioni con il pulsante cerca fino ad ora, ma questa volta non ci sono riuscito, quindi ho scelto di aprire questo post.
Ho un problema con i CSS di un portale, nel senso che su Firefox funziona alla stragrande, mentre su IE zoppica un po'. Il problema principale è questo:
Ho dei menu' nella parte alta del portale, che passando il mouse sopra dovrebbero apparire (il tutto gestito da CSS) e su FF funziona bene, mentre su IE non riesco a far apparire niente...
Vi inserisco un estratto della pagina HTML:
<ul id="mainNavigation">
<li>
<a href="#">Ordini</a>
<ul id="menuTendina">
<!-- Utente Uffico Acquisti -->
<li><a href="/TNTOCP/OpenInsertOrderPageCliente.do">Ordine cliente</a></li>
<li><a href="/TNTOCP/OpenInsertOrderPageFiliale.do">Ordine filiale</a></li>
<li><a href="/TNTOCP/ViewListOrder.do">Elenco ordini</a></li>
<li><a href="/TNTOCP/OpenDownloadReport.do">Download dati</a></li>
</ul>
</li>
<li><a href="/TNTOCP/logout.do">Logout</a><br></li>
</ul>
</div>
ed l'estratto CSS relativo all'azione:
#mainNavigation {
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
display: inline;
float: left;
height: 30px;
list-style: none outside none;
margin: 15px 0 0;
padding: 15px 0 0 10px;
width: 600px;
}
#mainNavigation ul {padding: 0; clear:both;}
#mainNavigation li {
float: left;
position: relative;
margin-right: 17px;
padding-bottom: 8px;
margin-bottom: -1px;
cursorointer;
width: 100px;
}
#mainNavigation li a {
color: #000000;
display: block;
font-family: tahoma,helvetica,sans-serif;
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
}
#mainNavigation li a:HOVER {
color: orange;
}
#mainNavigation ul li a {
background: url("../_img/menu_bullet.gif") no-repeat scroll 7px 50% transparent;
display: block;
font-family: arial;
font-size: 11px;
height: 1%;
padding: 2px 7px 2px 18px;
text-transform: none;
}
#mainNavigation ul li a:hover {
background: url(../_img/menu_bullet_hover.gif) #eee 7px no-repeat;
color:#f60;
}
#mainNavigation li.active {
padding-bottom: 5px;
border-bottom: solid 3px #f60;
}
#mainNavigation .active a {color: #f40;}
#mainNavigation .active li a { color: #000;}
#mainNavigation ul {
background:#FFF;
position: absolute;
top: 1.3em;
left: 0;
width: 18em;
display: none;
margin-top: 5px;
border-bottom: solid 1px #ccc;
margin: 5px 0 0 0;
border: solid 1px #ccc;
border-top:3px solid #FF6600;
list-style: none;
width: 150px;
}
#mainNavigation ul li {
width: 100%;
margin: 0;
padding: 0;
}
#mainNavigation li>ul {
left: auto;
top: auto;
width: 100%;
}
#mainNavigation li:hover ul {
display: block;
visibility: visible;
}
Avete idee di come modificare tale CSS in modo che venga eseguito anche da IE?
Vi ringrazio anticipatamente...
innanzi tutto grazie per l'aiuto (a volte indiretto) che mi date con il mio lavoro. Ho sempre trovato le soluzioni con il pulsante cerca fino ad ora, ma questa volta non ci sono riuscito, quindi ho scelto di aprire questo post.
Ho un problema con i CSS di un portale, nel senso che su Firefox funziona alla stragrande, mentre su IE zoppica un po'. Il problema principale è questo:
Ho dei menu' nella parte alta del portale, che passando il mouse sopra dovrebbero apparire (il tutto gestito da CSS) e su FF funziona bene, mentre su IE non riesco a far apparire niente...
Vi inserisco un estratto della pagina HTML:
<ul id="mainNavigation">
<li>
<a href="#">Ordini</a>
<ul id="menuTendina">
<!-- Utente Uffico Acquisti -->
<li><a href="/TNTOCP/OpenInsertOrderPageCliente.do">Ordine cliente</a></li>
<li><a href="/TNTOCP/OpenInsertOrderPageFiliale.do">Ordine filiale</a></li>
<li><a href="/TNTOCP/ViewListOrder.do">Elenco ordini</a></li>
<li><a href="/TNTOCP/OpenDownloadReport.do">Download dati</a></li>
</ul>
</li>
<li><a href="/TNTOCP/logout.do">Logout</a><br></li>
</ul>
</div>
ed l'estratto CSS relativo all'azione:
#mainNavigation {
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
display: inline;
float: left;
height: 30px;
list-style: none outside none;
margin: 15px 0 0;
padding: 15px 0 0 10px;
width: 600px;
}
#mainNavigation ul {padding: 0; clear:both;}
#mainNavigation li {
float: left;
position: relative;
margin-right: 17px;
padding-bottom: 8px;
margin-bottom: -1px;
cursorointer;
width: 100px;
}
#mainNavigation li a {
color: #000000;
display: block;
font-family: tahoma,helvetica,sans-serif;
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
}
#mainNavigation li a:HOVER {
color: orange;
}
#mainNavigation ul li a {
background: url("../_img/menu_bullet.gif") no-repeat scroll 7px 50% transparent;
display: block;
font-family: arial;
font-size: 11px;
height: 1%;
padding: 2px 7px 2px 18px;
text-transform: none;
}
#mainNavigation ul li a:hover {
background: url(../_img/menu_bullet_hover.gif) #eee 7px no-repeat;
color:#f60;
}
#mainNavigation li.active {
padding-bottom: 5px;
border-bottom: solid 3px #f60;
}
#mainNavigation .active a {color: #f40;}
#mainNavigation .active li a { color: #000;}
#mainNavigation ul {
background:#FFF;
position: absolute;
top: 1.3em;
left: 0;
width: 18em;
display: none;
margin-top: 5px;
border-bottom: solid 1px #ccc;
margin: 5px 0 0 0;
border: solid 1px #ccc;
border-top:3px solid #FF6600;
list-style: none;
width: 150px;
}
#mainNavigation ul li {
width: 100%;
margin: 0;
padding: 0;
}
#mainNavigation li>ul {
left: auto;
top: auto;
width: 100%;
}
#mainNavigation li:hover ul {
display: block;
visibility: visible;
}
Avete idee di come modificare tale CSS in modo che venga eseguito anche da IE?
Vi ringrazio anticipatamente...