Hi all

 

Ok so the site I am working on at the moment requires the user to roll over some text and an image and text to appear at a different point on the page. I have managed to do this by effectively hiding the image and span that contains the text and then displaying it, and setting an absolute position on a rollover state. This works fine in everything but IE6. I have put my code below that control it and a link to the page that is live.

 

/* Interactive Product Image*/
.emmerson #productDetail {
width: 497px;
height: 336px;
margin: 0 0 10px 0;
padding: 0;
}
.emmerson #productDetail p {
line-height: 12px;
padding: 0;
margin: 0;
}
.emmerson #productDetail img.mainImage {
float: left;
padding: 0;
margin: 0 5px 0 0;
}
.emmerson #productDetail a {
font-family: Arial, Helvetica, sans-serif;
color: #666;
font-weight: bold;
font-size:14px;
text-decoration: none;
}
.emmerson #productDetail a img {
height: 0;
width: 0;
border-width: 0;
}
.emmerson #productDetail a:hover img {
position: absolute;
   top: 0;
right: 0;
height: 90px;
width: 90px;
}
.emmerson #productDetail a span {
display: none;
}
.emmerson #productDetail a:hover span {
display: block;
position: absolute;
top: 0;
right: 0;
width: 90px;
padding: 0;
margin: 5px 0 0 0;
z-index: 100;
color: #666666;
font-family: Arial, Helvetica, sans-serif;
}
.emmerson #productDetail a:hover span p {
padding: 90px 0 0 0;
}

 

Live Site

http://www.creativgroup.com/sandpit/emmers.../commander.html

 

Full CSS

http://www.creativgroup.com/sandpit/emmers...mainControl.css

 

code is on line 484

 

Any help on this mystery would be good, I have already resided to the fact that IE6 will not do this, so a solution would be great!

 

gav

Hi Gav,

 

You have an interesting issue here. I'm looking into it, but I haven't come up with anything other than speculations so far.

 

What happens when you remove all the positioning CSS and just leave the styling that shows/hides the span?

 

The best way to combat a problem is usually to remove bits until you can pinpoint the evil code.

 

Rob

Hi Rob

 

No change still works in IE7/FF but displays the image below the larger image, but no change in IE6!

 

Gav

Did a bit of researching and found a bug in IE5 that does not support dynamic image resizing, once you set the height and width of an image it is set permanently meaning when I set it to 0px x 0px at the start it will always be that size, maybe this issue has been carried forward to IE6 and not documented.

 

Will have a go and see if the span with text only works.

Ok, interesting.

 

(backup the code) Could you try cutting everything back to the real basics, just a link, and the only thing in the span styling is the display none/block code. We can work our way up from there then — as there is no reason why that wouldn't work in IE 6.

 

[Edit] Ok, try that with the images, and let me know how it goes. You shouldn't need to set it to 0 any way if you're hiding it?

http://www.creativgroup.com/sandpit/emmers...ng/product.html

 

Still does the same, altho the span does appear on click in IE6 but not the image!

 

EDIT: tried using display:none; on the image instead of dimention change and sitll no luck

IE6 and before doesn't support :hover in CSS.

 

http://snipplr.com/view/1912/internet-expl...-ie6-css-hover/

 

bugger wanted to avoid using JAVA at all costs for any kind of rollover effects, I already have a 7500line external Java file running the accordation effect.

Ok, I think I've come up with a solution for you.

 

Are you trying to have the image and text (inside the span) hidden on page load, but when someone hovers the link the image and text shows up together (somewhere) ?

Yeah thats pretty much the idea.

 

I just managed to get the span to appear by forcing a trigger on the a:hover class but it only shows the span not the image.

 

Fire Away

Hi ,I made a similar effect ( I think) for one of my sites.

The page in question is here.

A condensed version of the code:

HTML:
<div class="container">
<a id="g1" class="gallery slide1" href="#nogo"><span><img src="images/berlingo_large1.jpg" alt="Citroen Berlingo" /><br /></span></a>
<a class="gallery slide2" href="#nogo"><span><img src="images/berlingo_large2.jpg" alt="Citroen Berlingo" /><br /></span></a>
<a class="gallery slide3" href="#nogo"><span><img src="images/berlingo_large3.jpg" alt="Citroen Berlingo" /><br /></span></a>
<a class="gallery slide4" href="#nogo"><span><img src="images/berlingo_large4.jpg" alt="Citroen Berlingo" /><br /></span></a>
<a class="gallery slide5" href="#nogo"><span><img src="images/berlingo_large5.jpg" alt="Citroen Berlingo" /><br /></span></a>
</div>

and the css:

.container {position:relative; width:800px; height:400px; background:url(images/container_bot.jpg) bottom center no-repeat; margin:10px auto; font-size:1.6em;}
.container b { width:800px; text-align:center; position:absolute; bottom:150px; left:0; color:#666666;z-index:1;}

a.gallery, a.gallery:visited {display:inline; color:#000; text-decoration:none; border:1px solid #fff; width:75px; height:75px; float:left; margin:7px 10px; position:relative;}

a.slide1 {background:url(images/berlingo_tn1.jpg);}
a.slide2 {background:url(images/berlingo_tn2.jpg);}
a.slide3 {background:url(images/berlingo_tn3.jpg);}
a.slide4 {background:url(images/berlingo_tn4.jpg);}
a.slide5 {background:url(images/berlingo_tn5.jpg);}

a.gallery span {visibility:hidden; display:block; position:absolute; width:420px; height:300px;color:#000; text-align:center; }

a.slide1 span {left:20px; top:80px;}/*5 picture layout*/
a.slide2 span {left:-77px; top:80px;}
a.slide3 span {left:-174px; top:80px;}
a.slide4 span {left:-271px; top:80px;}
a.slide5 span {left:-368px; top:80px;}

a.gallery:hover {white-space:normal; border:1px solid #000; z-index:100;}

a.gallery:hover span {visibility:visible; z-index:100;}

a.gallery:hover span img {margin:10px; border:1px solid #000; position:relative; z-index:100;}

a.gallery:active, a.gallery:focus {border:1px solid #c00; z-index:10;}

a.gallery:active span, a.gallery:focus span {visibility:visible; z-index:10;}

a.gallery:active span img, a.gallery:focus span img {border:1px solid #000; position:relative; margin:10px; z-index:10;}

Some partsd of the code will be irrevelant to you but it might give you an idea.

Cheers ElenMan just figure it out as you posted it tho

 

I forced the :hover effect in IE6 by declaring a non associated a:hover class which acted as a trigger for any other hover effects. Then simply declared the image as display:block; on both the a and a:hover classes. It seems to have done the job.

 

Code for any interested party's.

 

#productContainer {
font-family: Arial, Helvetica, sans-serif;
width: 497px;
margin: 0;
padding: 0;
}
#productDetail p {
padding: 0;
margin: 0;
}
#productDetail img.mainImage {
float: left;
padding: 0;
margin: 0 5px 0 0;
}
#productDetail a:hover {
background-color: #FFFFFF;
}
#productDetail a {
font-family: Arial, Helvetica, sans-serif;
color: #666;
font-weight: bold;
font-size:14px;
text-decoration: none;
}
#productDetail a img {
display: block;
height: 0;
width: 0;
border-width: 0;
}
#productDetail a:hover img {
display: block;
height: 90px;
width: 90px;
}
#productDetail a span {
display: none;
}
#productDetail a:hover span {
display: block;
}

 

Cheers for all your help and input

This is a right odd one, but I've cracked it.

 

HTML

<div id="productContainer">
<div id="productDetail">
	<a href="#">HOOD FASCIA &<br />SOFFIT
		<span>
			<img src="http://www.creativgroup.com/sandpit/emmerson/assets/doorImages/chieftanThumb.gif" />
			Some test Copy To Go Here
		</span>
	</a>
</div>
</div>

 

CSS

#productDetail a:hover				{ background: none; }
#productDetail a span			{ display: none; }
#productDetail a:hover span		{ display: block; }

 

 

Basically it looks like IE 6 needs the link (not the span) to have some sort of hover set, which in turn triggers the span hover. Very odd, and I'll need to look into it to discover exactly why, but at least you have a working solution now.

 

Yeah it is a bit of a strange one, you also need to declare any images as display:block; otherwise they will not render. The spans seem to work ok tho

Glad you got it sorted out

http://www.creativgroup.com/sandpit/emmers.../commander.html

 

got it working in the page now, cheers for all the input

The images worked fine for me without setting them as block.