Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE7 hover image CSS problem

    All:

    Having difficulty with a mouseover image display using an anchor in MSIE 7. Works fine in FF and Safari in both Windows XP and Mac OS X.

    I am trying to show a close button (css id = "close") that changes image on hover and is clickable to close the window. The close window part functions and the image is a standard hover image with both states side by side (11px x 22px) in one image (11x11px) (img attached). I have used a Strict HTML4 declaration to enforce strict mode in IE 7 so that the :hover pseudocode works properly and there are no obvious relevant errors when validating the code.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    The HTML is as follows:


    Code:
    <div class="map-info-box>
    <div class="info-main">
    <!-- below line is close image hover code -->
    	<a href="#" id="close" onclick="return closeOverlay();">close</a>
    <!-- above line is close image hover code -->
    </div>
    </div>

    and the CSS is as follows:

    Code:
    div.map-info-box {
    	padding: 0;
    	margin: 0;
    }
    
    div.info-main {
    	background: transparent url(../img/nh_box_small1.png) no-repeat;
    	* filter:progid:DXimageTransform.Microsoft.alphaimageloader(src='../img/nh_box_small1.png', sizingMethod='fixed'); 
    	position: absolute;
    	top: 13px;
    	left: 2px;
    	padding: 0;
    	width: 375px;
    	color: #FFF;
    	height: 100%;
    	font: 9px "Lucida Grande", arial;
    }
    
    div.map-info-box a#close {
    	background-image: url(../img/close.gif);
    	background-repeat: no-repeat;
    	background-position: -11px 0;
    	float: none;
    	margin-right: 9px !important;
    	margin-right: 5px;
    	margin-top: 4px;
    	width: 11px;
    	height: 11px;
    	display: block;
    	overflow: hidden;
    	text-indent: -9999px;
    }
    
    div.map-info-box a#close:hover {
    	background-position: 0 0;
    }
    It works perfectly in all browsers but IE 7, where the initial pre-hover image displays but it does not display hover image nor is clickable.

    Any ideas?

    Thanks,
    JC
    Attached Images Attached Images  

  • #2
    New Coder
    Join Date
    Jun 2008
    Posts
    81
    Thanks
    2
    Thanked 16 Times in 16 Posts
    With IE7, there's a problem with the MS Filter line - if it's commented out, the link will suddenly work. So check the syntax there. I think the following is correct:

    Code:
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/nh_box_small1.png', sizingMethod='fixed');

    Also, to enable the swap, the background-related properties need to be moved into the 'div.map-info-box a#close:hover' block:

    Code:
    div.map-info-box a#close:hover {
        background-image: url(../img/close.gif);
        background-repeat: no-repeat;
        background-position: -11px 0px;
        background-position: 0 0; 
    }

  • #3
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks but problem runs deeper

    Thanks Auslin.

    However that didn't do the trick.

    I went even further and changed the CSS to just use CSS & Text to mimic the image by creating an <a href="text.html>X</a> and style the a and a:hover in the CSS as a box around the link. MSIE7 wont even show that has having a hover or being a link. I am totally confused now.

    So I reverted to something simpler and now know the problem but not how to resolve it.

    I have a <div> with a simple table nested inside it. The <div> displays the background image onto which the table is superimposed. The anchor tag doesn't respond in MSIE7. If I remove the div, the anchor responds to mouse control as per normal but when the div and its background image are in place, the anchor ceases to function. The image in the <div> displays properly.

    HTML Code
    Code:
    <div class="map-info-box">
    <table>
    <tr>
    <td class="info-main">
    <a href="#" onclick="return closeOverlay();">X</a>
    </td>
    </tr>
    </table>
    </div>
    CSS CODE
    Code:
    div.map-info-box {
    	background: transparent url(../img/nh_info_box_small1.png) no-repeat;
    	filter:progid:DXimageTransform.Microsoft.alphaimageloader(src='../img/nh_info_box_small1.png', sizingMethod='fixed'); 
    	position: absolute;
    	top: 13px;
    	left: 2px;
    	padding: 0;
    	margin:  0;
    	width: 359px;
    	color: #FFF;
    	height: 100%;
    	font: 9px "Lucida Grande", arial;
    }
    
    TD.info-main a {
    	margin-left: 340px;
    	margin-top: 25px;
    	margin-right: 25px;
    	width: 11px;
    	height: 11px;
    	font: bold 10px arial;
    	color: #999999;
    	border: 1px solid #999999;
    	text-decoration:none;
    }
    
    TD.info-main a:hover {
    	color: #b0b0b0;
    	border: 1px solid #b0b0b0;
    
    }

  • #4
    New Coder
    Join Date
    Jun 2008
    Posts
    81
    Thanks
    2
    Thanked 16 Times in 16 Posts
    Seems like AlphaImageLoader doesn't like background-images much, and vice versa. The background-position property becomes unreliable (as with your first example). Also overlying links can become unclickable:

    http://www.hrunting.org/csstests/iealpha.html

    And not just IE6 - seems to be in IE7 also. I wonder if the best thing is to use a non-background image.


  •  

    Posting Permissions

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