Explorer e FireFox differenze menu CSS

[-AA-]

Ho 1 menu fatto da CSS

<--! codice menu -->
<div id="navigation"> [*]voce 1
<li id="selected">voce 2 [*]voce 3
</div>


div#navigation{padding-left: 3px}
div#navigation li{display: inline}
div#navigation li a{text-decoration: none;border: 1px solid #000066;padding: 0px 0.3em; background: #ccc;color: #000000; font: 10px "verdana"}
div#navigation li a:hover{background-color: #000066;border: 1px solid #000066;color: #ffffff; font: 10px "verdana"}
div#navigation li#activelink a{border-bottom: 1px solid #000066;padding: 0px 0.3em; background: #000066;color: #ffffff; font: 10px "verdana"}
div#navigation li#selected{text-decoration: none;border: 1px solid #000066;padding: 0px 0.3em; background: #000066;color: #ffffff; font: 10px "verdana"}

----------CON FIREFOX tutto OK<<<<<<<<<<
----------CON EXPLORER VEDO LA VOCE ACCESA UNITA ALLA VOCE CHE LA SEGUE<<<<<<<<<<

Come posso far si che explorer non mi crei questo disagio grafico che sta malissimo?

[Mich_]

Anzitutto io non trasformerei i[*] in inline. Forse ti basta dichiararli float:left;

Secondo: il padding e broder sono differenti in IE e altri browser: in IE stanno dentro il width, negli altri stanno fuori. Se puoi usare i margin, anziche` i padding, hai due risultati piu` simili.

[-AA-]

Mich_ grazie per la risposta...non conosco molto i fogli di stile.


Che vuol dire[*] in inline ?

io portei anche da programmazione riconoscere se explorer o firefox e caricare 2 differenti fogli di stile con le "giuste" caratteristiche ... il probema a monte è che non saprei proprio come avere 2 risultati simili.
:master:

[Mich_]

I[*] sono di default degli elementi di tipo blocco.
Con il display: inline; li trasformi in elementi inline, e quindi non puoi piu` definirne le dimensioni.

Per metterli sulla stessa linea, usa invece il
float: left;

In tal modo riesci anche a fare delle cose molto simili tra IE e altri browser.

Se ancora hai differenze, non usare JS per individuare il browser, ma usa i commenti condizionali, fornendo con essi le correzioni necessarie ad IE (vedi tra i "link utili" per spiegazioni ed esempi).

[-AA-]

Ok ho fatto 2 fogli di stile 1 per explorer e 1 per firefox

ho poi messo nel foglio di explorer
div#navigation li{float: left;}

ora la voce "accesa" non rimane in linea con le atre ma si alza un pochino ...non è + in linea con le altre.

poi le voci sono tutte unite accese e non
se riuscissi a distanziare le voci (come fa firefox) e a non far alzare la voce accesa....

[-AA-]

per individuare il browser uso ASP:

Set objBrowser = Server.CreateObject("MSWC.BrowserType")
If objBrowser.browser = "IE" Then
foglio_stile = "stile_explorer.css"
Else
foglio_stile = "stile_firefox.css"
End If

--------

fatto questo float left me le fa alzare...guarda ti passo il link dove anche tu puoi vedere le differenze tra FireFox e Exporer:

www.karate-mantova.it

[Scorpion69]

IE:

Codice HTML:

<div id="navigation">[*]voce 1
<li id="selected">voce 2</a>[*]voce 3
</div>

Codice CSS:

div#navigation {
    padding-left: 3px;
}
div#navigation li {
    float: left;
}
div#navigation li a {
    text-decoration: none;
    border: 1px solid #000066;
    padding: 0px 0.3em; 
    background: #ccc;
    color: #000000; 
    font: 10px "verdana";
}
div#navigation li a:hover {
    background-color: #000066;
    border: 1px solid #000066;
    color: #ffffff; 
    font: 10px "verdana";
}
div#navigation li#activelink a {
    border-bottom: 1px solid #000066;
    padding: 0px 0.3em; 
    background: #000066;
    color: #ffffff; 
    font: 10px "verdana";
}
div#navigation li#selected {
    font: 10px verdana; 
    color: #FFFFFF; 
    background-color: #000066; 
    border: 1px solid #000066; 
    margin: 4px; 
    padding-left: 2px; 
    padding-right: 2px;
}

[-AA-]

Grazie

c'è un minimo di spostamento, ma è accettabile, ora mi guardo cosa mi avete passato, visto che ho fatto solo copia e incolla senza leggere

grazie

[Scorpion69]

L'ho spostato in modo ke si allineasse con gli altri due...

[-AA-]

:rollo: perfetto grazie MILLE Scorpion69