Advertisement

03.31.2008 at 05:30PM PDT, ID: 23284407
[x]
Attachment Details

Problems with hover links using the Display CSS property

Asked by JohnSaint in Extensible HTML (XHTML), Cascading Style Sheets (CSS), Hypertext Markup Language (HTML)

Tags: , ,

I have a set of links and when I hover either of them, two elements appear;
A background image with some text on it
An image

They appear in different positions on the page and as such, are in different classes to facilitate this.

I am struggling with IE6 and can only direct you to the live example and the code snippet.

The images and text should change on hover but you'll see that the process 'freezes' (for want of a better word) in IE6. All other browsers are fine.

I bastardised my code from this site...
http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

Can anyone help? Many thanks in advanceStart Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:

CSS
---
#right-container {
        width:177px;
        background-color:yellow;
        margin-left:800px;
        position:relative;
}
 
.thumbnail span.boxtext, .thumbnail span.hovpic{ /*CSS for enlarged image*/
        position: absolute;
        top: 20px;
        left:-180px;       
/*        visibility: hidden; */
		display:none;   
        
}
 
a:hover.thumbnail, .thumbnail:hover span.hovpic{ /*CSS for enlarged image*/
       	top: 20px;
        left: 0px;
/*        visibility: visible; */
		display:inline;
 
}
 
a:hover.thumbnail, .thumbnail:hover span.boxtext{ /*CSS for enlarged image*/
/*	visibility: visible; */
	display:inline;
	width:210px;
	height:159px;
	background-image:url(../images/gray_box.gif);
	background-repeat:no-repeat;
	top: 209px;
	left: 0px; /*position where text should offset horizontally */
	z-index: 50;
}
 
HTML
----
 
<body>
 
<div id="right-container">
    <a class="thumbnail" href="index.php">Hov1
        <span class="hovpic">
            <img src="images/home_main.jpg" />            
        </span> 
        <span class="boxtext">
            <p>text1 text1 text1 text1 text1 </p>
        </span>
               
    </a>        
&nbsp;
    <a class="thumbnail" href="index.php">Hov2
        <span class="hovpic">
            <img src="images/bus_com_choice.jpg" />            
        </span>                
        <span class="boxtext">
            <p>text2 text2 text2 text2 text2 </p>
        </span>
    </a>        
 
</div>
 
 
</body>
[+][-]03.31.2008 at 07:09PM PDT, ID: 21250734

View this solution now by starting your 7-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

 

About this solution

Zones: Extensible HTML (XHTML), Cascading Style Sheets (CSS), Hypertext Markup Language (HTML)
Tags: XHTML CSS, IE6, http://www.gmurph.com/cleari/test/
Sign Up Now!
Solution Provided By: iframe
Participating Experts: 1
Solution Grade: A
 
 
 
Loading Advertisement...
20080716-EE-VQP-32 / EE_QW_2_20070628