Welcome to WebmasterWorld Guest from 35.172.100.232

Forum Moderators: not2easy

Message Too Old, No Replies

CSS div span hover problem for IE6

CSS hover problem for IE6

     
12:37 pm on Jun 30, 2007 (gmt 0)

New User

10+ Year Member

joined:June 30, 2007
posts:2
votes: 0


hello
i've registered into this site, for the fact that i was impressed on the way people help each other.

now i'm facing a problem that might be common to you.

I have created a gallery containing images, where a white border should be around them (general idea).

The image might be 90x70 or 40x90, so horizontal and vertical alignment is necessary.

i've done all that.

the only thing i need is to make active the whole div element i use around the image, so when i hover the white border (div element) should turn to yellow

firefox is working like a charm
IE6 sees active only a bottom right area of the whole div element

what have i done wrong?
here is the code, you may paste it and execute it to see what i mean.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body {
background-color: #000000;
}
.alpha-shadow {
float: left;
background: url(shadow.gif) no-repeat bottom right;
margin: 0px -5px 0 0px!important;
margin: 0px -5px 0 0px;
}
.alpha-shadow div {
background: url(myshadow.png) no-repeat left top!important;
background: url(myshadow.gif) no-repeat left top;
padding: 0px 5px 5px 0px;
}
.list {
left: -12px;
voice-family: "\"}\"";
voice-family:inherit;
left: auto;
}
.list {
margin: 0px auto;
right: -5px;
left: -5px;
position: relative;
text-align: center;
width: 600px;
list-style: none;
padding: 0px;
}
.list li {
float: left;
padding: 5px;
margin: 0px 0px 5px 0px;
}
.list li span {
height: 138px;
width: 138px;
display: block;
background: white;
}
.list li span {
display: table;
_position: relative;
overflow: hidden;
border-width: 1px;
border-color: #ccc #999 #999 #ccc;
border-style: solid;
}
.list>li span {
overflow: none;
}
.list li span:hover,.list li span.hover {
background: #FFCC00;
}
.list li span a:hover {
background: #FFCC00;
}
.list li span a {
_position: absolute;
_top: 50%;
display: table-cell;
vertical-align: middle;
margin: 0px auto;
text-align: center;
}
.list li span a img {
_position: relative;
_top: -50%;
_left: -50%;
}
</style>
</head>
<body>
<ul class="list">
<li>
<div class="alpha-shadow"><div>
<span><a href="#"><img src="http://www.exampe.com/thumb.jpg" width="90" height="75" /></a></span>
</div></div>
</li>
<li>
<div class="alpha-shadow"><div>
<span><a href="#"><img src="http://www.exampe.com/thumb.jpg" width="90" height="75" /></a></span>
</div></div>
</li>
<li>
<div class="alpha-shadow"><div>
<span><a href="#"><img src="http://www.exampe.com/thumb.jpg" width="90" height="75" /></a></span>
</div>
</div>
</li>
</ul>
</body>
</html>

[edited by: Robin_reala at 9:17 pm (utc) on June 30, 2007]
[edit reason] Removed URLs (per TOS #13 [webmasterworld.com]) [/edit]

1:36 pm on July 2, 2007 (gmt 0)

New User

10+ Year Member

joined:July 2, 2007
posts: 1
votes: 0


IE6 doesn't support the pseudoclass 'hover', just if you apply it directly on a link.
A possible solution could be javascript to emulate it.
You can find more information here:
[htmldog.com...]
4:18 pm on July 2, 2007 (gmt 0)

New User

10+ Year Member

joined:June 30, 2007
posts:2
votes: 0


have you tested this example? (use a valid image to check)

the hover issue is working with IE,
my problem is that it doesn't include the whole element and only the 1/4 of it

7:38 pm on July 4, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Feb 12, 2006
posts:2709
votes: 116


there are probably a few different ways you could do it, but i would do it something like this...

make the <a href=""> around the image into a block with display:block. and give it a specific width and height as well. make the width and height the same size as the bit you want to be clickable. (you might have to give it a class to do that - have one class for the horizontal images, and another one for vertical images)
i would then get rid of the .alpha-shadow div completely.
you no longer need that div there if you've made the <a href=""> into a block -- you can put the background shadow onto the <a href=""> instead.

if you then need to put a second background image under it as well, put it on the <li> tag.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members