2 problemi: effetto hover su immagine e posizionamento box

[blekm]

primo problema:

ho un box con queste caratteristiche:

codice css

#mail
{
	width: 750px;
	height:300px;
        background: url("/images/back_cont.gif") no-repeat top left;
        text-align: center;
}

su IE mi si vede come vorrei io (centrato nel box), mentre su FF e Opera no.. e non riesco proprio a farlo vedere correttamente anche su FF.


vedi allegato:

[blekm]

altro problema: galleria di immagini con l'effetto BORDO BIANCO di 2px intorno ad ogni immagine. Quando ci passo sopra con il mouse il bordo bianco diventa arancione, dello stesso colore dello sfondo.

Stavolta su IE NON FUNZIONA, mentre su FF si. Funziona correttamente anche su Opera.


codice css:

div.center
{
	float:center;
	padding-top: 5px;
	padding-left: 40px;
	margin: 1px;
	border: 0px solid #fff;
}

div.center img
{
	border: 2px solid white;	
}

div.center img:hover
{
        border: 2px solid #FFB340;
}

qualche dritta?

[salasir]

Primo problema : se per IE devi definire text-align: center nel div contenitore, per gli altri browser devi indicare margin: 0 auto; sull'elemento interessato .

Secondo problema : Vuoi provare ad indovinare?

IE non gestisce l'hover se non sul tag <a>.

[blekm]

Originariamente inviato da salasir
Primo problema : se per IE devi definire text-align: center nel div contenitore, per gli altri browser devi indicare margin: 0 auto; sull'elemento interessato .

text-align: center; è definito qua:

html,body
{
	margin:0;
	padding:0;
	text-align: center;

}

La struttura è cosi formata:

BOX
- navigazione
- contenuto

nella classe box:

margin: 0px auto;
width:750px;

nella classe contenuto

width: 750px;
height:300px;
background: url("/images/back_cont.gif") no-repeat top left;
margin: 0 auto; (come hai detto tu, ma non funziona) :bhò:

altri suggerimenti?

Originariamente inviato da salasir
IE non gestisce l'hover se non sul tag <a>.

quindi non ho maniera di ottenere l'effetto che voglio?

ma quelle immagini sono delle thumbnail di una gallery che ho realizzato utilizzando l'effetto lightbox, ciascuna foto è un link

esempio

[img]/images/ristrutturazioni01s.jpg[/img]

[salasir]

1). Dovrei vedere più nel dettaglio la struttura del codice, comunque in generale il margin: 0 auto; per FF, ecc... deve essere indicato sull'elemento che ti interessa centrare, nel caso particolare il <form>, non sul contenitore.

2). Se l'immagine è contenuta in un link allora dovrebbe bastare modificare l'hover su <a>:

div.center img:hover
{
        border: 2px solid #FFB340;
}

diventa

div.center a:hover (img)     - eventualmente per limitare l'effetto sulle immagini
{
        border: 2px solid #FFB340;
}

[blekm]

Galleria:

eccoti un link dove puoi vedere il risultato, non risolvo nemmeno col tuo secondo consiglio...

http://blekm.altervista.org/galleria.html

le immagini inizialmente hanno un bordo bianco di due pixel. Al passaggio del mouse sopra l'immagine, quel bordo bianco deve diventare blu (il colore l'ho messo apposta per farti vedere meglio).

facendo come dici tu, nemmeno su IE. Anzi, sull'evento hover le altre immagini si spostano (creando un effetto spiacevole) come vedrai dal link su IE, mentre su FF non va proprio, va ancora peggio.

Come avevo fatto io, su FF e Opera funzionava a dovere, non si sfalsavano le thumbnail tra loro, e funzionava tutto a dovere. Solo che su IE non dava segni di vita.

La mia galleria iniziale, con gli effetti come voglio io (funzionante su FF e non funzionante su IE) la trovi sul link qui sotto:

http://blekm.altervista.org/galleria_funzionante.html


Per quanto riguarda il margin: 0 auto; sul form, mi sembra di averlo impostato correttamente, guarda il codice css..

http://blekm.altervista.org/style.css

la pagina invece è questa
http://blekm.altervista.org/contatti.html

grazie ancora!

guarda i due link su entrambi i browser.

[salasir]

Mi arrendo!

Dopo averci litigato una mezz'ora sono riuscito ad ottenere questo codice

div.gallery a { text-decoration: none; border: solid 2px white; }
div.gallery a:link img,
div.gallery a:visited img{ text-decoration: none; border: solid 2px white; }
div.gallery a:hover img { text-decoration: none; border: solid 2px blue; }

che funziona a meraviglia su FF (ma probabilmente ricalca quello che avevi già) ma non ne vuole sapere dell'hover su IE. Bisogna togliere img ed allora funziona anche su IE.

div.gallery a:hover { text-decoration: none; border: solid 2px blue; }

Si potrebbe inserirlo in un foglio di stile apposito per IE da linkare dopo quello standard ...

&Egrave; possibile che a:hover img corrisponda in qualche modo a img:hover ? Chiedo lumi ai guru dei CSS.

Mi spiace di averti fatto perdere tempo, ma proprio sono alla frutta con le idee....

L'unica cosa che si può fare è attivare l'hover tramite js.

Per il problema del form, se non ho visto male tu hai definito un id=content_formmail, mentre io intendevo proprio il tag form

form { margin: 0 auto; }

[blekm]

intanto grazie per la pazienza, ma la galleria non funziona su entrambi in browser in nessun caso, come dovrebbe, anche togliendo img. Proverò altre combinazioni, se risolvo ti farò sapere..

Per quanto riguarda il form ho provato ad inserire il codice nel foglio di stile, ma non funziona..

Qualcun'altro potrebbe aiutarmi? Qualche dritta? suggerimento?

[blekm]

aggiornamento: sono riuscito a centrare il form, aggiungendo semplicemente

align="center" width="550"

ottenendo questo risultato...

<table border="0" align="center" width="550">

Adesso il form è centrato nella pagina.

Aspetto che qualcuno mi aiuti a risolvere quella mancanza di effetto hover su IE per quanto riguarda la galleria

[blekm]

AAA: cercasi ancora soluzione al problema dell'effetto hover della galleria!