Jump to content

a:hover for an image doesn't work in IE6


Guest herbie04
 Share

Recommended Posts

Guest herbie04

I was looking at the image gallery example under the CSS section of w3schools.com and tried it out myself. Everything works fine in Firefox, but the a:hover doesn't work in IE6. Please look at the following code. I've bolded the a:hover section:<html><head><style type="text/css">div.img{ margin: 2px; border: 1px solid #ff0000; height: auto; width: auto; float: left; text-align: center; } div.img img{ display: inline; margin: 5px; border: 1px solid #ffffff;}div.img a:hover img {border: 1px solid #ff0000;}div.desc{ text-align: center; font-weight: normal; margin: 2px;}</style></head><body><div class="img"> <a target="_blank" href="link.htm"><img src="go blackshirts.jpg" alt="blackshirts" /></a> <div class="desc">Add a description of the image here</div></div></body></html>------------------------------------------------------------------------------------------------This creates a box that contains a picture with description below. When you point to the picture, a thin red border should appear around it. It works fine in Fireworks, but the red border does not show up in IE6. Any ideas?Also, I'm pretty new to CSS and was wondering why there is sometimes a / before a tag is ended. For example, in the code above, there is this piece: <a target="_blank" href="link.htm"><img src="go blackshirts.jpg" alt="blackshirts" />Why is there a / just before the tag is ended?Thanks!

Link to comment
Share on other sites

True. It caused me a huge amount of grief when I needed to have rollover in a <p> tag. That is why I am learning JavaScript now. There is a topic about it somewhere.Anyway...I think this is what you want:

<html><head><style type="text/css">div.img a.img:hover{border: ff0000}</style></head><body><div class="img"><a href="#" class="img"><img src="#" /></a></div></body></html>

Hope I have helped!

Link to comment
Share on other sites

  • 2 weeks later...
  • 1 year later...

I noticed this problem with IE6 Border with w3schools Image gallery example and came up with this solution <style type="text/css">body { background-color:#fff; }div.img{ margin: 2px; border: 1px solid #0000ff; height: auto; width: auto; float: left; text-align: center;} div.img img{ display: inline; margin: 3px; }a:link img, a:visited img, a:hover img, a:active img { border-width: 1px; border-style:solid;}:link, :link img, :visited, :visited img { border-color: #0066FF; }:link:hover, :visited:hover, active:hover, :link:hover img, :visited:hover img { border-color: #FF9900; }div.desc{ text-align: center; font-weight: normal; width: 120px; margin: 2px;}</style>and its works in Opera, FF and IE7

Link to comment
Share on other sites

i have the same kind of problems. I make nav bars and rollovers on my website and they always look all crazy in IE6 and IE7 In firefox it looks fine. I guess I need to work alot more with it and how to make the websites be compatible for multiple browsers.What are the procedures to make them work in other browsers?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...