Newsgroup: it.comp.www.html
Titolo: [CSS] Un link bottone che si muove in IE

Ho un problema con dei bottoni fatti in css.
In IE si muovono quando ci passo sopra col mouse.
Potete vederlo qui: 
http://www.mrfantasy.it/web/pagina.php?name=io
Con firefox non accade questo.
ecco il CSS
#box-menu .botton { 
  display:block;
  width:100%;
  height:100%;
  margin: 2px;
  padding: 0 2px;
  text-align: left;
  text-decoration: none
}
#box-menu select { 
   font-size: 9px;
   width: 105px;
   margin:  2px 0;
}
#box-menu a:hover { color: #990000; background-color : #f7b930;}
#box-menu a:active { color: #990000; background-color : #f7b930;}
e questo č l'HTML
code:
<div id='box-menu'>
<form method="post" action="pagina.php">
  <a class='botton'>chi sono</a>
  <a class='botton'>cerca</a>
  <select name="home">
  <option value='$id'>$genere</option>
  </select><input type="image" src='modifica.gif' name='submit' />
  <a class='botton'>contattami</a>
  <a class='botton'>aiuto</a>
</form>
</div>
Non riesco a capire perchč...
Arjuna
-- 
Gnotis se auton.
 20/04/2004 23.31.03



C'č una classe che fra il punto ed il nome dell'elemento ha uno spazio.
Prova a toglierlo. Comunque cosě ad okkio e croce si direbbe che il tuo
hover va ad incrementare un margine o un padding...
Saluti.
Cekko

 ha scritto nel messaggio
news:c6491i$fk5$1...@news.ngi.it...
| Comunque così ad okkio e croce si direbbe che il tuo
| hover va ad incrementare un margine o un padding...
| Saluti.
Cekko ha ragione.
In "#box-menu .botton" metti "margin-top : 2px"
e in
"box-menu select" idem aggiungi "margin-top :2px"
Con Ie5.5 e Opera7.23 funziona.
Inoltre farei la larghezza del select di soli 100px, visto che con opera la
freccetta va a capo sotto al Select.
Bye Cico

 hover va ad incrementare un margine o un padding...
Credo che piů che un incremento sia un decremento. ma di fatti l'hover č
cosě:
#box-menu a:hover { color: #990000; background-color : #f7b930;}
#box-menu a:active { color: #990000; background-color : #f7b930;}
quindi nulla di strano.
E poi c'č da notare che questa cosa la fa solo quando si va sul primo link
sotto il select e non con gli altri, per tornare normale solo quando si va
sul primo link sopra il select...
Misteri di IE, rendiamo grazie a Microsoft
Arjuna
-- 
Gnotis se auton.
 21/04/2004 10.06.48

 freccetta va a capo sotto al Select.
ho seguito il tuo consiglio anche se è una barbarie perchè in questo modo
perdo l'allineamento! sig!
Arjuna
-- 
Gnotis se auton.
 21/04/2004 10.24.56

 </div>
Prova a scrivere il codice 'correttamente' secondo le specifiche dell'HTML.
Dentro il tag 'form' non puoi inserire 'tag inline' come il tag 'a',
ma  'tag block' come 'p' o 'div'.
Quindi inserisci i tuoi 'a' e 'select' dentro 'p':
 <div id='box-menu'>
 <form method="post" action="pagina.php">
  <p>
   <a class='botton'>chi sono</a>
   <a class='botton'>cerca</a>
  </p>
  <p>
   <select name="home">
    <option value='$id'>$genere</option>
   </select>
   <input type="image" src='modifica.gif' name='submit' />
  </p>
  <p>
   <a class='botton'>contattami</a>
   <a class='botton'>aiuto</a>
  </p>
 </form>
 </div>
e nel foglio di stile scrivi:
p {
 margin:0px; border:0px; padding:0px;
}
...il difetto dovrebbe sparire.
_SV_

 
Non è lo spirito giusto...
MS può fare anche fare prodotti pessimi, ma purtroppo è leader in quanto 
a diffusione dei suoi prodotti.
IMHO un buon sviluppatore per il web deve fare i conti con questa 
situazione risolvere i problemi che gli si presentano. A volte bisogna 
scendere a compromessi, ma spesso le problematiche si risolvono 
elegantemente, magari sempilicemente chiedendo qui o cercando sul web. 
Spesso poi sono le NS incapacità che ci fanno gridare "al lupo".
A ben vedere non c'è nulla di veramente misterioso, 'solo' tanti bug con 
i quali fare i conti.
Ciao
-- 
Spoken: How much is that gorilla in the window?
Take our advice, At any price, A gorilla like Magilla is mighty nice.
Gorilla, Magilla Gorilla for sale

Resta il fatto che un codice che sembra corretto ha un comportamento
anomalo su quel browser.
Ovviamente dobbiamo farci i conti, per questo ringraziavo mamma microsoft.
Se non ci fosse lei avrei finito i miei lavoro molto tempo fa e forse non
mi sarei ammalato.
Ho postato da più parti questo problema e cerco costantemente soluzioni,
fino ad ora non le ho trovate,,,
Arjuna
-- 
Gnotis se auton.
 21/04/2004 11.28.02

 }
esatto. era proprio qusto. dove posso trovare un elenco con i tipi di tag
accettati?(scusa l'italiano ma sto molto raffreddato e non mi va molto di
pensare).
Arjuna
-- 
Homo sum, humani nihil a me alienum puto.
 21/04/2004 11.49.59

La soluzione l'ha trovata radar e ingegni nel post sotto a questo.
form non può contenere tag in line:
quindi si aggiunge <p></p> ai link e tramite css si azzerano margini
padding e bordi del tag <p>.
Ottimo
-- 
Gnotis se auton.
 21/04/2004 11.51.21

 </div>
Prova a scrivere il codice 'correttamente' secondo le specifiche dell'HTML.
Dentro il tag 'form' non puoi inserire 'tag inline' come il tag 'a',
ma  'tag block' come 'p' o 'div'.
Quindi inserisci i tuoi 'a' e 'select' dentro 'p':
 <div id='box-menu'>
 <form method="post" action="pagina.php">
  <p>
   <a class='botton'>chi sono</a>
   <a class='botton'>cerca</a>
  </p>
  <p>
   <select name="home">
    <option value='$id'>$genere</option>
   </select>
   <input type="image" src='modifica.gif' name='submit' />
  </p>
  <p>
   <a class='botton'>contattami</a>
   <a class='botton'>aiuto</a>
  </p>
 </form>
 </div>
e nel foglio di stile scrivi:
p {
 margin:0px; border:0px; padding:0px;
}
....il difetto dovrebbe sparire.
_SV_

 pensare).
http://www.w3.org/TR/html4/sgml/dtd.html
è relativo all'HTML 4.01,
ma ti consiglio di studiare l'XHTML 1.0,
il sito di riferimento dove trovi tutto il materiale è:
http://www.w3.org/
_SV_



 ha scritto nel messaggio
news:3h8zbivhjq3f.1lgclfxfdv33p$.dlg@40tude.net...
A me funziona, poi non so che dirti.
Bye