vertical centering and on hover pop up box in ie6 and 7

[c_shelswell]

Hi i'm having a problem with ie6 and 7 (funnily enough  ) I'm making a site which you can see at www.sueandmike.net the front page you come to shows a number of boxes which if viewed in firefox work great however they're kind of all over the shop in ie. Also i'm really struggling to get the text in the boxes vertically centred in ie. If any one has any ideas i'd be really grateful.

 

The code in question is:

CSS:

/**index page buttons **/
#indexNavCont{
margin-left: 10px;
}

*html #indexNavCont{
margin-left: 10px;
margin-top: -60px;
}

.mainBox{
height: 110px;
width: 110px;
display: table;
#position: relative; 
#top: 3em;
float: left;
}

.indexNav{
display: table-cell;
width: 100px;
height: 100px;
border: 1px solid #fff;
margin: 10px;
text-align: center;
#position: absolute;
#top: 50%;
vertical-align: middle;
}

a.indexNav{
color: #fff;
text-decoration: none;
}

/** changes box border on hover **/
a.indexNav:hover {
border:1px solid #2d2d2b;
color: #000;
#color: #fff;
-moz-opacity:.25;
filter: alpha(opacity=50);
-khtml-opacity: 0.4;
opacity: .5;
}

.indexTxtTwo {
#position: relative;  #top: -50%;
}

.indexLink{
color: #fff;
}

/* Popup boxes */
a span {
display: none;
text-decoration: none;
}

a:hover {
/** fix for IE6 popup bug.  nice one Microsoft! */
overflow: hidden;
text-decoration: none;
}

a:hover span {
display: inline;
border: 1px solid black;
position: absolute;
background-color: white;
padding: 5px;
margin-left: -97px;
margin-top: 55px;
overflow: hidden;
}

a:hover span {
display: inline;
border: 1px solid black;
position: absolute;
background-color: white;
padding: 5px;
margin-left: -12px;
margin-top: 67px;
overflow: hidden;
}

 

and the html

<div class="mainBox">
<div class='indexTxt'>
                <div class='indexTxtTwo'>
	       <a href='./gallery.php' class='indexNav'>
                       <span>description</span>name
                        <br />added: 08-07-2006</a>
                 </div>
         </div>
</div>

 

thanks for any help

 

[c_shelswell]

have decided just to go with a javascript onmouseover event instead.

 

Cheers

[jerry_sidower]

Sorry man,

 

I was trying to work through it but had no such luck. I was mighty confused when I refreshed the page and a bunch of new boxes popped up and your descriptions had moved. 

 

I do like the way the new javascript looks on your site though.

 

 

Cheers,

Jerry Sidower