Can't get it to work in ie6 and ie7

[thisthat23]

I am trying to get a link to hover over an image, but it's not working in ie6 and ie7. Here is an image to explain it more...
http://i118.photobucket.com/albums/o106/GregoryDougherty/explanation.jpg

Here is what I have so far...



<div class="container">
<a href="#"><img class="hardlink" img src="image1.jpg" ></a>
<a href="#"><img class="play" src="image2.jpg" ></a>
</div>


.container{float:left; line-height:25px; margin:3px; width:186px; height:126px; overflow:hidden}
a img.hardlink{overflow:hidden; border:solid 3px #dbdbdb}
a:hover img.hardlink{margin-bottom:-39px; border:3px solid #919191}

img.play{text-align:right; position:relative; top:0px; float:right; right:3px}
a:hover img.play{top:-39px}


I'm stuck on this, any help would be awesome.

[BLiZZaRD]

Using hover attribute in IE6 is hard enough (IE6 doesn't support hover: ) but the main problem is the location and position.

Wrap the entire thing in a container div that has CSS position:relative; and then inside have your images/divs position:absolute.

Leaving a relative positioned element on it's own, makes it relative to the page and the view pane, not the element it is inside of.

[thisthat23]

Isn't it wrapped in a container already? Do you know of some javascript that would make this work?

[thisthat23]

anybody got any other ideas? i'm kinda stuck still with this...

[boogyman]

this is a difficult problem, because its a rendering issue.
Each browser renders (displays) the size of one pixel differently, thus creating a cross-browser absolute position overlay to the exact pixel across multiple platforms and/or browsers is nearly impossible.

My only solution, while not the best would be to create an image and associated image map of the content you are attempting to display.

[BLiZZaRD]

Isn't it wrapped in a container already?


No, you only have one div. I was referring to a method to use 3 divs. Basically:



<div id="contain">
<div id="mainimg">
<img src="whatever.jpg">
<div id="littleimg">
<img src="whateverTiny.jpg">
</div>
</div>
</div>


Where #container has position:relative, and the other two can use position:absolute. Then top: -XXpx and left: XXpx for placement. Use z-index to make sure the tiny img is ontop.

[boogyman]

<div id="contain">
<div id="mainimg">
<img src="whatever.jpg">
<div id="littleimg">
<img src="whateverTiny.jpg">
</div>
</div>
</div>



Take out the second div, that is not providing any benefit. Instead put the id of the second image inside the image tag like and just apply some css to that specific link


<div id="contain">
<div id="mainimg">
<a href="path">img src="whatever.jpg"></a>
<a href="path" id="littleimg"><img src="whateverTiny.jpg"></a>
</div>
</div>




div#mainimg a {
/* Position the first image */
}
div#mainimg a#littleimg {
position: relative;
bottom: 0;
right: 0;
}

that would allow for a creative CSS, but without having to use an image map as I advised earlier.
I will say though that while you are still adding the extra div inside the container it allows for you to position of the two images how you would like them, so in that sense, I think in this situation its worth the extra 1/2kb file size

[lsio83]

well, I just learned this yesterday.
and actually there is much easy way to do it by using behavior with .htc file.

visit this side for full tutorial:
http://www.divitodesign.com/2008/01/vertical-css-menu-with-a-behavior-file/