Guest herbie04 Posted May 17, 2007 Share Posted May 17, 2007 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 More sharing options...
vijay Posted May 17, 2007 Share Posted May 17, 2007 Hi... Its working in IE7 for hover.. and in IE6 Its working for onclick..Regards,Vijay Link to comment Share on other sites More sharing options...
ScottR Posted May 19, 2007 Share Posted May 19, 2007 the forward slash / is closing the tag. All tags must be closed in XHTML. If you go through the tutorial it'll all make sense to you. XHTML Tutorial Link to comment Share on other sites More sharing options...
Kevin M Posted May 19, 2007 Share Posted May 19, 2007 IE6 doesn't allow :hover for anything other than links as far as I know. Why this wouldn't work for you is beyond me since the image is within an anchor tag (or link). Link to comment Share on other sites More sharing options...
Nim199 Posted May 20, 2007 Share Posted May 20, 2007 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 More sharing options...
mmebane Posted June 1, 2007 Share Posted June 1, 2007 http://dean.edwards.name/IE7/ Link to comment Share on other sites More sharing options...
dsonesuk Posted March 26, 2009 Share Posted March 26, 2009 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 More sharing options...
lucas22 Posted March 30, 2009 Share Posted March 30, 2009 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 More sharing options...
Ingolme Posted March 30, 2009 Share Posted March 30, 2009 In order to make a:hover work in Internet Explorer 6 you must have the browser running in Standards Compliant mode, that means putting a Strict DTD on your page. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.