Immagini sovrapposte

[bounce2011]

Ciao a tutti sto impazzendo con un problemino:
Ho 4 Div dove all'interno ci sono delle immagini all'interno di un UL che s'ingrandiscono al passaggio del mouse
In Firefox funziona benissimo ma in explorer quando l'immagine s'ingrandisce va in secondo piano rispetto alle altre immagini negli altri div.
Penso che debba usare il tag z-index ma non riesco a capire come, provo a postare sia il codice html che css nella speranza che qualcuno mi possa aiutare
grazie a tutti
ciao

p.s. chiedo scusa a tutti ma prima ho postato lo stesso messaggio con un oggetto senza senso

HTML

<div id="verticale">
<ul class="hoverbox">[*]
[img]images/prima.jpg[/img][img]images/prima.jpg[/img]

[img]images/seconda.jpg[/img][img]images/seconda.jpg[/img]

[img]images/terza.jpg[/img][img]images/terza.jpg[/img]

[img]images/quarta.jpg[/img][img]images/quarta.jpg[/img]
[/list]
</div>

<div id="orizzontale">
<ul class="hoverbox">[*]
[img]images/prima.jpg[/img][img]images/prima.jpg[/img]


[img]images/seconda.jpg[/img][img]images/seconda.jpg[/img]

[img]images/terza.jpg[/img][img]images/terza.jpg[/img]

[/list]
</div>
 


<div id="orizzontale">
<ul class="hoverbox">[*]
[img]images/prima.jpg[/img][img]images/prima.jpg[/img]

[img]images/seconda.jpg[/img][img]images/seconda.jpg[/img]

[img]images/terza.jpg[/img][img]images/terza.jpg[/img]

[img]images/quarta.jpg[/img][img]images/quarta.jpg[/img]

[/list]
</div>

CSS

#verticale{float:right;width: 105px; height: 320px;padding-top: 0px;}
#orizzontale{float:left;width: 370x; height: 77px;padding-top: 0px;}

.hoverbox
{
	cursor: default;
	list-style: none;
}

.hoverbox a
{
	cursor: default;
}

.hoverbox a .preview
{
	display: none;
}

.hoverbox a:hover .preview
{
	display: block;
	position: absolute;
	top: -33px;
	left: -45px;
	z-index: 10;
}

.hoverbox img
{
	background: #fff;
	border-color: #aaa #ccc #ddd #bbb;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	padding: 2px;
	vertical-align: top;
	width: 100px;
	height: 75px;
}

.hoverbox li
{
	background: #eee;
	border-color: #ddd #bbb #aaa #ccc;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	display: inline;
	float: left;
	margin: 3px;
	padding: 5px;
	position: relative;
}

.hoverbox .preview
{
	border-color: #000;
	width: 400px;
	height: 300px;
}



ul
{
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

[LuigiMem]

Originariamente inviato da bounce2011
Ciao a tutti sto impazzendo con un problemino:
Ho 4 Div dove all'interno ci sono delle immagini all'interno di un UL che s'ingrandiscono al passaggio del mouse
In Firefox funziona benissimo ma in explorer quando l'immagine s'ingrandisce va in secondo piano rispetto alle altre immagini negli altri div.
Penso che debba usare il tag z-index ma non riesco a capire come, provo a postare sia il codice html che css nella speranza che qualcuno mi possa aiutare
grazie a tutti
ciao

p.s. chiedo scusa a tutti ma prima ho postato lo stesso messaggio con un oggetto senza senso

HTML

<div id="verticale">
<ul class="hoverbox">[*]
[img]images/prima.jpg[/img][img]images/prima.jpg[/img]

[img]images/seconda.jpg[/img][img]images/seconda.jpg[/img]

[img]images/terza.jpg[/img][img]images/terza.jpg[/img]

[img]images/quarta.jpg[/img][img]images/quarta.jpg[/img]
[/list]
</div>

<div id="orizzontale">
<ul class="hoverbox">[*]
[img]images/prima.jpg[/img][img]images/prima.jpg[/img]


[img]images/seconda.jpg[/img][img]images/seconda.jpg[/img]

[img]images/terza.jpg[/img][img]images/terza.jpg[/img]

[/list]
</div>
 


<div id="orizzontale">
<ul class="hoverbox">[*]
[img]images/prima.jpg[/img][img]images/prima.jpg[/img]

[img]images/seconda.jpg[/img][img]images/seconda.jpg[/img]

[img]images/terza.jpg[/img][img]images/terza.jpg[/img]

[img]images/quarta.jpg[/img][img]images/quarta.jpg[/img]

[/list]
</div>

CSS

#verticale{float:right;width: 105px; height: 320px;padding-top: 0px;}
#orizzontale{float:left;width: 370x; height: 77px;padding-top: 0px;}

.hoverbox
{
	cursor: default;
	list-style: none;
}

.hoverbox a
{
	cursor: default;
}

.hoverbox a .preview
{
	display: none;
}

.hoverbox a:hover .preview
{
	display: block;
	position: absolute;
	top: -33px;
	left: -45px;
	z-index: 10;
}

.hoverbox img
{
	background: #fff;
	border-color: #aaa #ccc #ddd #bbb;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	padding: 2px;
	vertical-align: top;
	width: 100px;
	height: 75px;
}

.hoverbox li
{
	background: #eee;
	border-color: #ddd #bbb #aaa #ccc;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	display: inline;
	float: left;
	margin: 3px;
	padding: 5px;
	position: relative;
}

.hoverbox .preview
{
	border-color: #000;
	width: 400px;
	height: 300px;
}



ul
{
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

Che versione usi di explorer? aggiornalo alla 9! io non vedo il problema...

[bounce2011]

versione 8
grazie mille
ciao