No replies
vikezz
Offline
newbie
Last seen: 13 years 1 day ago
Timezone: GMT+2
Joined: 2008-10-06
Posts: 1
Points: 1

Hi CSS gurus,

I really hope you can help me:

I'm creating a very simple site where images popup when you mouse over a particular image.

View demo site here.

However I've some issues:

  1. I would like the popup images to be positioned the same place so they don't "bounce" on the page. just in the middel of the screen. Also in IE.
  2. IE ignores my Link color definition. Which results in a blue box around the image :/

I've been digging around google and css tuts to find a way to fix the above errors.. no success so far Sad but if you can just help me with some of them I would be more than happy!!

Thank you thank you!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
 
/*Credits: Dynamic Drive CSS Library */
/*URL: <a href="http://www.dynamicdrive.com/style/" rel="nofollow">http://www.dynamicdrive.com/style/</a> */
 
a:link, a:visited, a:active, a:hover {
	color: #FFF;
	text-decoration: none;
}
 
.thumbnail{
position: relative;
z-index: 0;
}
 
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
 
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
padding: 5px;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
 
}
 
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
 
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
z-index: ;
 
}
 
</style>
<!--[if gte IE 5]> <style type="text/css"> #blanket {filter:alpha(opacity=65);}</style><![endif]-->
</head>
 
<body>
<img src="index_02.png" width="348" height="133" border="0" /><br />
<a class="thumbnail" href="http://lg-julefrokost.dk/"><img src="index_05.png" width="129" height="178" /><span><img src="lgjulefrokost.png" /><br />
</span></a>
<img src="index_06.png" width="126" height="178" />
<a class="thumbnail" href="http://k-shop.dk/"><img src="index_07.png" width="131" height="178" /><span><img src="kshop.png" /><br />
</span></a>
<img src="index_08.png" width="124" height="178" />
<img src="index_09.png" width="123" height="178" />
<img src="index_10.png" width="130" height="178" />
<img style="margin-left:-5px;" src="index_11.png" width="127" height="178" />
<img style="margin-left:-5px;" src="index_12.png" width="134" height="178" />
</body>
</html>
<code>