Problema Visualizzazione Menù

[LuigiDonato]

Salve,
ho un problema con un menù realizzato in CSS.. Praticamente va bene solo su Chrome, aprendolo da Firefox mi da uno spazio tra la 'zona che si illumina' ed il bordo.. Perchè?
Per non parlare di Internet Explorer che non me li mette in linea.. Guardate voi stessi..:incazz:
www.AutoricambiDonato.it

 

[MikiProgrammer]

Perchè ogni browser ha il suo modo di visualizzare il menu...
Puoi postare il tuo codice?

 

[MikiProgrammer]

Comunque se ti posso dare un consiglio: nella pagina contatti, nella sezione in cui si scrive il messaggio, prova a non scrivere niente in nessun campo e guarda (ti consiglio di verificare se l'utente ha immesso i dati)

 

[Max 1]

.....da Firefox mi da uno spazio tra la 'zona che si illumina' ed il bordo.. .

Quale parte intendi che si illumina? Io ho provato il tuo link con IE FF e Chrome, tutti e 3 me lo fanno vedere uguale.

Se posti uno screenshot indicando la parte che non vuoi vedere forse riusciamo a risolvere il problema.




.

 

[LuigiDonato]

Allora, adesso anche su Chrome si vede male e non capisco il perchè.. Cmnq vi posto gli screenshots.. In pratica il bianco intorno al modello non dovrebbe esserci..!
Per intenderci, sarebbe quello che nello screenshot si vede attorno alla parte blu di 'Escort'.. In IE invece potrete capire da soli qual'è il problema dall'altro screenshot..
Chrome:

IE:


Comunque sia il codice PHP è questo:

//LEGGO I VEICOLI PRESENTI IN ARCHIVIO PER INSERIRLI NEL MENU'
$selmarche = "SELECT DISTINCT Marca FROM automobili ORDER BY Marca";
$rismarche = mysql_query($selmarche);

    echo "<ul> <!-- lista principale: definisce il menu nella sua interezza -->";
    
while ($marca = mysql_fetch_assoc($rismarche))
{echo "<li>
        <a href='#'>" . $marca['Marca'] . "</a> <!-- primo list-item, prima voce del menu -->
        <ul> <!-- Lista annidata: voci del sotto-menu -->";
$selmodelli = "SELECT DISTINCT Modello FROM automobili WHERE Marca = '" . $marca['Marca'] . "' ORDER BY Modello";
                                                  $rismodelli = mysql_query($selmodelli);
                    while($modello = mysql_fetch_assoc($rismodelli)){
                                echo "<li><a href='ricambi.php?marca=" . $marca['Marca'] ."&modello=" . $modello['Modello'] ."'>" . $modello['Modello'] . "</a></li>";}

     echo "</ul> <!-- Fine del sotto-menu -->
         </li><br> <!-- Chiudo il list-item -->";
                    }
                    mysql_close();

Mentre il CSS interessato è questo:

#sinistra {
	position: absolute;
	top: 50px;
	float: left; 
	margin: 0; 
	padding: 0;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	background: #0389ff;
	font: italic bold 20px Georgia, serif;}

#sinistra ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#sinistra li
{
    width:150px;
    float:left;
    margin: 0;
    padding: 0;
    border-right: 1px solid black;
    color:black;
}

#sinistra a
{
    display: block;
    padding: 5px;
    color: #000;
    text-decoration: none;
}
 
#sinistra a:hover
{
    background-color: #4646ff;
    color: #FFFFFF;
    text-decoration: none;
}

#sinistra li ul
{
    display: none
}

#sinistra li:hover ul
{
    display: block;
    position: absolute;
    z-index:1;
    padding: 10;
    margin: -33px 0 0 150px;
    border:1px solid black;
    background: white;
}

#sinistra li li   { border:none; width:150px; }

#sinistra li li a { padding:2px 2px 2px 10px; }

 

[Max 1]

Prova così:

#sinistra li:hover ul
{
    display: block;
    position: absolute;
    z-index:1;
    padding: 0;
    margin: -33px 0 0 150px;
    border:1px solid black;
    background: white;

Oppure così:

#sinistra li:hover ul
{
    display: block;
    position: absolute;
    z-index:1;
    padding: 10px;
    margin: -33px 0 0 150px;
    border:1px solid black;
    background: blue;

Intanto vediamo di sitemare FF e Chrome poi vedremo IE
Però io quel menu lo rifarei da capo

 

[LuigiDonato]

Prova così:

#sinistra li:hover ul
{
    display: block;
    position: absolute;
    z-index:1;
    padding: 0;
    margin: -33px 0 0 150px;
    border:1px solid black;
    background: white;

Oppure così:

#sinistra li:hover ul
{
    display: block;
    position: absolute;
    z-index:1;
    padding: 10px;
    margin: -33px 0 0 150px;
    border:1px solid black;
    background: blue;

Intanto vediamo di sitemare FF e Chrome poi vedremo IE
Però io quel menu lo rifarei da capo

Grandeee:love:
Ho risolto con il primo code..
Ora manca solo IE

 

[Max 1]

Per IE usa i commenti confizionali

 

[LuigiDonato]

Per IE usa i commenti confizionali

Capito, ma per adattare lo stile del menù ad internet explorer potete dirmi cosa cambiare o devo studiarmi per bene il css?

 

[Max 1]

Capito, ma per adattare lo stile del menù ad internet explorer potete dirmi cosa cambiare o devo studiarmi per bene il css?

Ma te lo già detto e ti ho messo anche il link dove studiare i commenti condizionali. Devi usare quelli per adattare il sito e il menu a IE

 

[LuigiDonato]

Ma te lo già detto e ti ho messo anche il link dove studiare i commenti condizionali. Devi usare quelli per adattare il sito e il menu a IE

Si ho letto, ma boh.. Ora faccio qualche prova ma a guardare così sembrerebbe che il padding non è compatibile con IE..

 

[Max 1]

il padding è compatibile con IE e tutti i CSS sono interpretati da IE! Solo che a volte ci vuole valori diversi dagli altri browser.
Io non posso fare il tuo lavoro perchè solo tu hai accesso ai file del sito e puoi fare le prove io no!




.

 

[LuigiDonato]

Hai ragione..
Comunque sia ho provato modificare ma non cambia nulla.. Sarà per il fatto che ho ie11 e questo metodo funziona fino alla v9?

Inviato dal mio Blade S6 utilizzando Tapatalk

 

[Max 1]

Funziona per tutte le versioni. Forse sbagli qualche cosa! Stando qui io non posso sapere il motivo!

 

[LuigiDonato]

Funziona per tutte le versioni. Forse sbagli qualche cosa! Stando qui io non posso sapere il motivo!

E invece sbagli.. Con IE 11 prende il CSS normale, mentre ora ho provato con un vecchio PC dove ho IE 8 e mi va a prendere l'altro CSS (quello apposta per IE)

 

[Max 1]

Ovvio se li usi nel modo consueto, per IE10 e IE11 va integrato con JS, qui un tutorial per IE10 in genere funziona bene anche su 11
http://blog.mrwebmaster.it/2012/11/29/supplire-alla-mancanza-di-commenti-condizionali-in-ie10.html
<ltrimenti prova ad inserire questo per emulare una versione precedente
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">

Ricorda però che non puoi intestardirti sulla 11 molti non usano IE e altri molti non hanno la 10/11

 

[LuigiDonato]

Ovvio se li usi nel modo consueto, per IE10 e IE11 va integrato con JS, qui un tutorial per IE10 in genere funziona bene anche su 11
http://blog.mrwebmaster.it/2012/11/29/supplire-alla-mancanza-di-commenti-condizionali-in-ie10.html
<ltrimenti prova ad inserire questo per emulare una versione precedente
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">

Ricorda però che non puoi intestardirti sulla 11 molti non usano IE e altri molti non hanno la 10/11

Si, ma non vedo perchè dovrei tagliarli fuori..

 

[LuigiDonato]

Ragazzi scusate ma proprio non riesco ad aggiustare questo menù.. Su IE mi appaiono tutti in fila adesso, da sinistra verso destra..
Se qualcuno vuole darmi qualche consiglio, anche se inesperti, va bene, lo accetto volentieri.. Questo è il codice interessato:

@media only screen {

html {
        font-size:30px;
	}
}

#sinistra {
	position: relative;
	top: 0px;
	float: left; 
	margin: 0; 
	padding: 0;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	background: #0389ff;
	font: italic bold 20px Georgia, serif;
}

#sinistra ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#sinistra li
{
    width:150px;
    float:left;
    margin: 0;
    padding: 0;
    border-right: 1px solid black;
    color:black;
}

#sinistra a
{
    display: block;
    padding: 5px;
    color: #000;
    text-decoration: none;
}
 
#sinistra a:hover
{
    background-color: #4646ff;
    color: #FFFFFF;
    text-decoration: none;
}

#sinistra li ul
{
    display: none
}

#sinistra li:hover ul
{
    display: block;
    position: absolute;
    z-index:1;
    padding: 0;
    margin: -33px 0 0 150px;
    border:1px solid black;
    background: white;
}

#sinistra li li   { border:none; width:150px; }

#sinistra li li a { padding:2px 2px 2px 10px; }