SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trouble vertically centering in ie7/6 and also with a css hover popover

    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:
    Code:
    /**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
    Code:
    <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

  2. #2
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    have opted for a javascript onmouseover - seems to work good


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •