Conflitto tra link con IE

**fcw5** · 16-07-2008, 22:29

Ciao a tutti,

ho questa pagina QUI
e questo CSS QUA

Se si va sul menu orizzontale (quello blu), in PRESENTAZIONE, ho inserito i primi 2 link di prova, con FF vedo tutto ok, con IE mi prende le regole di altre classi: .indirizzo o .laterale (indirizzo e è dove c'è scritto "Dipartimento di Ingegneria Strutturale" in alto, laterale è dove c'è scritto "in evidenza" e "link utili"), infatti se aggiungo una regola del tipo:

.vbULn7ccp a, a:link, a:visited, a

ver {
color: #000;
}

indirizzo e laterale si adattano e mi fanno vedere tutto nero, perchè? sono regole definite per classi specifiche, come fanno a confondersi?
se la regola .vbULn7ccp la metto in fondo al documento, comandano le regole di indirizzo e laterale, se la metto prima comanda lei.

Io non ne esco...
Qualcuno sa darmi una mano?

Grazie Fcw

**Mich_** · 17-07-2008, 09:57

Anzitutto un grave errore di sintassi (che avresti trovato facilmente usando i validatori): la pseudoclasse .over non esiste, forse intendevi :hover

Poi tu hai scritto una regola che si applica:
- a tutti i tag a appartenenti ad un blocco con classe vb...
- a tutti i tag a nello stato :link (compreso quelli esterni al blocco)
- a tutti i tag a nello stato :visited (compreso quelli esterni al blocco)

Quello che forse intendevi e`:

codice:

.vbULn7ccp a, .vbULn7ccp a:link, .vbULn7ccp a:visited, .vbULn7ccp a:hover { 
  color: #000;
}

**fcw5** · 17-07-2008, 10:30

Ho fatto proprio dei gravi errori!!!
Non me lo ricordavo più :rollo:
credo che con le nuove correzioni funzionerà tutto... grazie davvero...

Infatti funziona, i colori sono tornati al loro posto...
Già che ci siamo, sai mica capire come mai su FF vedo l'immagine cambiare sul menu orizzontale (sempre quello blu) al passaggio del mouse (ha un'immagine si sfondo in a

ver), mentre IE si rifiuta di farmela vedere?

Fcw

**Mich_** · 17-07-2008, 11:02

Ma sei passato dai validatori?
Non ha senso perdere tempo a cercare errori che i validatori trovano in secondi.

E poi andrebbe un po' rivisto il menu stesso.
Ad esempio non trovo nessun elemento con class="over", mentre nel CSS si fa riferimento a tale classe.
E un menu deve essere fatto con i tag <ul> e[*], non con una serie di <ul> slegati e posizionamenti assoluti (mi riferisco ai vari pezzi con class="vbULn7ccp").

In rete trovi menu a piu` livelli gia` pronti e funzionanti in tutti i browser, mentre il tuo non funziona nel mio browser (konqueror sotto linux - e` molto simile a FF).
E potresti anche fare a meno dei JS, che tra l'altro come li usi tu sono contrari alla legge 4/04 (e come universita` sei sicuramente soggetto a tale legge).

**fcw5** · 17-07-2008, 21:55

Ciao,

ho letto la legge Stanca che mi hai indicato, adesso dovrebbe andare bene sia come regole dettate dalla legge (tutto validato secondo standard w3c) e secondo i vari browser, l'ho testato su win - FF, IE6, IE7 e linux - FF, funziona

L'unica cosa che funziona male, sono le info riportate nel contenuto, leggendo index.html senza relativo CSS le info di sx sono sopra le info di dx e non affiancate, c'è quindi poca leggibilità... dovrei fare delle tabelle o è un problema relativo?

Grazie per la lavata di testa sul fatto di rispettare le leggi, avevo copiato il menu da un programmino trial per fare certi menu, tanto per sbrigarmi, ma ho solo peccato di professioanlità!

Fcw

**Mich_** · 18-07-2008, 09:40

Non so come volessi la pagina, ma io vedo ancora errori di impaginazione.
Ti posto un JPG di un pezzetto della pagina come la vedo io (scusa per la bassa risoluz e i blocchi bianchi, ma dovevo abbassare la dimensione del file).

Senza parlare del menu, che si apre in alto, in qualche caso in un'area lontana dalla barra, per cui non e` possibile cliccare sulle voci del secondo livello (per arrivarci si deve prima uscire dal menu e il menu stesso si chiude).

Purtroppo non riesco a visualizzare il menu aperto (nel mio SO per fare lo screenshot ho bisogno del mouse); la mia impressione e` che ci sia un so improprio dei posizionamenti assoluti (manca un contenitore posizinato, per cui si posizionano rispetto al body e non rispetto al menu).

**fcw5** · 18-07-2008, 14:51

Capisco gli errori che vedi, ma mi trovo in difficoltà a correggerli visto che io non li vedo

Il CSS del menu è impostato così

codice:

div.menu1 {
	width: 135px;
	height: 35px;
	color: #fff;
	float: left;
	line-height: 35px;
    display: block;
}
div.menu2 {
	width: 150px;
	height: 35px;
	background-image: url(immagini/menu-2.gif);
	float: right;
}
ul.menu-orizzontale {
	float: left;
	margin: 0;
	padding: 0;
	background: #e9f9ff;
	list-style: none;
	text-align: center;
	background-image: url(immagini/btp7ccp_0.gif);
}	
ul.menu-orizzontale li ul li{
	list-style: none;
	margin:0;
	padding:0;
}
ul.menu-orizzontale li{
	float:left;
	margin: 0;
	padding: 0;
	color: black;
	width: 135px;
}
ul.menu-orizzontale a:link, ul.menu-orizzontale a:visited {
	display: block;
	color: #fff;
	text-decoration: none;
	font-size: 10px;
	font-weight: bold;
}
ul.menu-orizzontale a:hover {
	background-color: #ffc;
	color: #fff;
	text-decoration: none;
	background-image: url(immagini/btp7ccp_1.gif);
}
ul.menu-orizzontale li ul{
	display: none;
}
ul.menu-orizzontale li:hover ul {
	display: block;
	position: absolute;
	z-index: 1;
	width: 220px;
	padding: 5px;
	margin: 0 0 0 12px;
	border: 1px solid #000;
	background: #e9f9ff;
}
ul.menu-orizzontale li li {
	width: 220px;
	line-height: 10px;
	margin: 0;
}
li.tendina a:link, li.tendina a:visited {
	color: #000;
	margin: 0;
	padding: 5px;
	text-align: left;
	background-image: none;
}
li.tendina a:hover {
	background-image: none;
	border: 1px solid #eaeaea;
	padding: 4px 5px 4px 4px;
}

L'HTML così

codice:


<div id="menu">

<div class="menu1">
<ul class="menu-orizzontale">
	[*]Presentazione
		<ul>
			<li class="tendina">Informazioni Generali
			<li class="tendina">Docenti
			<li class="tendina">Docenti Esterni
			<li class="tendina">Dottorandi, Assegnisti, Borsisti
			<li class="tendina">Personale tecnico amministrativo
			<li class="tendina">Giunta
			<li class="tendina">Regolamento
			<li class="tendina">Storia
			<li class="tendina">Mappa
		[/list]
	[/list]
</div>

<div class="menu1">
<ul class="menu-orizzontale">
	[*]Didattica
		<ul>
			<li class="tendina">Informazioni Generali
			<li class="tendina">Ricevimento
		[/list]
	[/list]
</div>

<div class="menu1">
<ul class="menu-orizzontale">
	[*]Ricerca
		<ul>
			<li class="tendina">Informazioni Generali
			<li class="tendina">Progetti
			<li class="tendina">Assegni di ricerca
		[/list]
	[/list]

</div>

<div class="menu1">
<ul class="menu-orizzontale">
	[*]Dottorato
		<ul>
			<li class="tendina">Informazioni Generali
			<li class="tendina">Presidente
			<li class="tendina">Consiglio
			<li class="tendina">Dottorandi
			<li class="tendina">Corsi
			<li class="tendina">Seminari
			<li class="tendina">Documentazione
		[/list]
	[/list]

</div>

<div class="menu1">
<ul class="menu-orizzontale">
	[*]Biblioteca
		<ul>
			<li class="tendina">Informazioni Generali
			<li class="tendina">Voci di catalogo
			<li class="tendina">Riviste in corso
			<li class="tendina">Riviste cessate
			<li class="tendina">Atti dell'Istituto
			<li class="tendina">Rapporti di Studi e Ricerche
		[/list]
	[/list]

</div>

<div class="menu1">
<ul class="menu-orizzontale">
	[*]Laboratorio
		<ul>
			<li class="tendina">Informazioni Generali
			<li class="tendina">Prove e misure
			<li class="tendina">Macchine ed attrezzature
			<li class="tendina">Fotografie di prove
			<li class="tendina">Tariffario
			<li class="tendina">Moduli richiesta prove
		[/list]
	[/list]

</div>

<div class="menu2">

</div>
</div>

C'è una posizione assoluta:
ul.menu-orizzontale li:hover ul {
display: block;
position: absolute;
z-index: 1;
width: 220px;
padding: 5px;
margin: 0 0 0 12px;
border: 1px solid #000;
background: #e9f9ff;
}

Ma non ho idea di come modificarla, dove vedi l'errore? su konqueror? se sì potrei vederlo a casa, ho anche KDE... giusto?

Grazie
Fcw

P.S.: vedi anche i testi MOOOLTO più grossi di come gli ho impostati io, come faccio a stabilire anche l'altezza sul tuo browser?

**paololosco** · 18-07-2008, 14:57

codice:

<ul class="menu-orizzontale">
	[*]Laboratorio
		<ul>
			<li class="tendina">Informazioni Generali
			<li class="tendina">Prove e misure
			<li class="tendina">Macchine ed attrezzature
			<li class="tendina">Fotografie di prove
			<li class="tendina">Tariffario
			<li class="tendina">Moduli richiesta prove
		[/list]
	[/list]

</div>

ad esempio (mi è saltato all'occhio, non ho letto tutto il codice...) ma... PERCHE un ul in un ul???

non sarebbe più giusto avere un UL con i link principali divisi in LI e un UL per ogni sottomenu???

**fcw5** · 18-07-2008, 19:09

Per Mich_

AIUTO !!!
Sono in ambiente Debian e sto visualizzando la pagina con Konqueror ... la vedo perfettamente, anzi meglio di FF (sempre per Linux) e quindi sono maggiormente in confusione ..
Perchè io lo vedo bene e tu no sullo stesso browser ? La risoluzione che uso è 1280x1024 con monitor in 16/10 .

Dove può essere il problema secondo te?

**Mich_** · 21-07-2008, 09:11

Credo che il problema sia nella dimensione dei caratteri. Io li devo ingrandire rispetto allo "standard" (che poi non so cosa intendo per standard in questo contesto), dato che ho i px molto piccoli.

Ma se un layout si scombina solo ingrandendo il carattere di base, vuol dire che non e` impostato bene.
In linea di massima sono i posizionamenti fissi a fare questi effetti: finche` non li sai dominare, evita di usare i position: il 95% dei layout si realizzano anche senza posizionamenti (e a quel punto non ci sono problemi con le dimensioni dei caratteri).

@paololosco
I menu si realizzano mediante liste.
I menu con sottomenu si realizzano mediante liste innestate. Il modo corretto di realizzare liste innestate e` inserire un <ul> dentro il[*] da cui dipende il sottomenu.

Comunque in rete ci sono ottimi esempi di menu anche a piu` livelli: un sito che considero fatto been e` quello di CSSplay (riferimento tra i "link utili")

Discussione: Conflitto tra link con IE

Strumenti discussione

Ricerca discussione

Visualizza

Conflitto tra link con IE

Permessi di invio