rain13 Posted December 27, 2010 Share Posted December 27, 2010 I want to make gallery so that images have grey border and i want border turn white when I move my mouse on it. It works like i want when i look it with IE8, but when I open my gallery with firefox, I have ugly blue border instead of thin grey border. Does anyone know how to make it look on firefox just as good as it looks on IE? Link: http://autoit.pri.ee/tmp/lol.htmlsource: <HTML> <HEAD> <style TYPE="text/css"> body { font-family: Verdana, Arial, sans-serif; font-size: 12px; color: #222222; margin: 0px; padding: 0px; background: #ffffff url(bg.gif) repeat-x; } a { text-decoration: none; } #container1 a img { vertical-align: bottom; margin: 1px; border: solid 1x transparent; } #container1 a:hover img { border-color: #ffffff; } #container1 a:hover { /* wakeup IE */ border-width: 0; } </style> </HEAD> </BODY><a href="?p=0">0</a>|<table border="0" bgcolor=transparent><tr><th style="width: 140; height: 140;" id="container1";><a href="IMGP0028.JPG"><img src="thumbs/IMGP0028.JPG" alt="IMGP0028.JPG" title="IMGP0028.JPG" height="93" width="124"/></th><th style="width: 140; height: 140;" id="container1";><a href="IMGP0052.JPG"><img src="thumbs/IMGP0052.JPG" alt="IMGP0052.JPG" title="IMGP0052.JPG" height="93" width="124"/></th><th style="width: 140; height: 140;" id="container1";><a href="IMGP0072.JPG"><img src="thumbs/IMGP0072.JPG" alt="IMGP0072.JPG" title="IMGP0072.JPG" height="93" width="124"/></th><th style="width: 140; height: 140;" id="container1";><a href="IMGP0095.JPG"><img src="thumbs/IMGP0095.JPG" alt="IMGP0095.JPG" title="IMGP0095.JPG" height="93" width="124"/></th></tr><tr><th style="width: 140; height: 140;" id="container1";><a href="IMGP0121.JPG"><img src="thumbs/IMGP0121.JPG" alt="IMGP0121.JPG" title="IMGP0121.JPG" height="93" width="124"/></th><th style="width: 140; height: 140;" id="container1";><a href="IMGP0175.JPG"><img src="thumbs/IMGP0175.JPG" alt="IMGP0175.JPG" title="IMGP0175.JPG" height="93" width="124"/></th><th style="width: 140; height: 140;" id="container1";><a href="IMGP0335.JPG"><img src="thumbs/IMGP0335.JPG" alt="IMGP0335.JPG" title="IMGP0335.JPG" height="93" width="124"/></th><th style="width: 140; height: 140;" id="container1";><a href="IMGP0357.JPG"><img src="thumbs/IMGP0357.JPG" alt="IMGP0357.JPG" title="IMGP0357.JPG" height="93" width="124"/></th></tr><tr><th style="width: 140; height: 140;" id="container1";><a href="IMGP0382.JPG"><img src="thumbs/IMGP0382.JPG" alt="IMGP0382.JPG" title="IMGP0382.JPG" height="93" width="124"/></th><th style="width: 140; height: 140;" id="container1";><a href="IMGP0409.JPG"><img src="thumbs/IMGP0409.JPG" alt="IMGP0409.JPG" title="IMGP0409.JPG" height="93" width="124"/></th><th style="width: 140; height: 140;" id="container1";><a href="IMGP0502.JPG"><img src="thumbs/IMGP0502.JPG" alt="IMGP0502.JPG" title="IMGP0502.JPG" height="93" width="124"/></th><th style="width: 140; height: 140;" id="container1";><a href="IMGP0638.JPG"><img src="thumbs/IMGP0638.JPG" alt="IMGP0638.JPG" title="IMGP0638.JPG" height="93" width="124"/></th></tr><tr><th style="width: 140; height: 140;" id="container1";><a href="IMGP0643.JPG"><img src="thumbs/IMGP0643.JPG" alt="IMGP0643.JPG" title="IMGP0643.JPG" height="93" width="124"/></th><th style="width: 140; height: 140;" id="container1";><a href="IMGP0810.JPG"><img src="thumbs/IMGP0810.JPG" alt="IMGP0810.JPG" title="IMGP0810.JPG" height="93" width="124"/></th><th style="width: 140; height: 140;" id="container1";></th><th style="width: 140; height: 140;" id="container1";></th></tr></table> </BODY></HTML> Link to comment Share on other sites More sharing options...
thescientist Posted December 27, 2010 Share Posted December 27, 2010 idk, there could be a couple reasons just based on syntax and rules alone. The extra semicolon at the end of all your <th> elements, and the fact that id's can only be used once on a page. Consider validating your pages to look for errors that can be resolved to enhance compatibility amongst all browsers and along with that you should really be using a Doctype (DTD), preferably a Strict one. Also, border declarations have to be written in a certain order, I think the first property has to be border-style, and then you can do the rest. Anyway, you should definitely try and clean things up a bit. However, this should make things work for you now, though. img { border-style: solid; border-color: #000000; border-width: 1px;} Link to comment Share on other sites More sharing options...
rain13 Posted December 27, 2010 Author Share Posted December 27, 2010 idk, there could be a couple reasons just based on syntax and rules alone. The extra semicolon at the end of all your <th> elements, and the fact that id's can only be used once on a page. Consider validating your pages to look for errors that can be resolved to enhance compatibility amongst all browsers and along with that you should really be using a Doctype (DTD), preferably a Strict one. Also, border declarations have to be written in a certain order, I think the first property has to be border-style, and then you can do the rest. Anyway, you should definitely try and clean things up a bit. However, this should make things work for you now, though.img { border-style: solid; border-color: #000000; border-width: 1px;} wouldnt that img { border-style: solid; border-color: #000000; border-width: 1px;} affect all images including images I am going to add later to use them as buttons?OK now my code is this: <HTML> <HEAD> </HEAD> </BODY><a href="?p=0">0</a>|<table border="0" bgcolor=transparent><tr><th style="width: 140; height: 140;" ><a href="IMGP0028.JPG"><img src="thumbs/IMGP0028.JPG" alt="IMGP0028.JPG" title="IMGP0028.JPG" height="93" width="124"/></th><th style="width: 140; height: 140;" ><a href="IMGP0052.JPG"><img src="thumbs/IMGP0052.JPG" alt="IMGP0052.JPG" title="IMGP0052.JPG" height="93" width="124"/></th><th style="width: 140; height: 140;" ><a href="IMGP0072.JPG"><img src="thumbs/IMGP0072.JPG" alt="IMGP0072.JPG" title="IMGP0072.JPG" height="93" width="124"/></th><th style="width: 140; height: 140;" ><a href="IMGP0095.JPG"><img src="thumbs/IMGP0095.JPG" alt="IMGP0095.JPG" title="IMGP0095.JPG" height="93" width="124"/></th></tr><tr><th style="width: 140; height: 140;" ><a href="IMGP0121.JPG"><img src="thumbs/IMGP0121.JPG" alt="IMGP0121.JPG" title="IMGP0121.JPG" height="93" width="124"/></th><th style="width: 140; height: 140;" ><a href="IMGP0175.JPG"><img src="thumbs/IMGP0175.JPG" alt="IMGP0175.JPG" title="IMGP0175.JPG" height="93" width="124"/></th><th style="width: 140; height: 140;" ><a href="IMGP0335.JPG"><img src="thumbs/IMGP0335.JPG" alt="IMGP0335.JPG" title="IMGP0335.JPG" height="93" width="124"/></th><th style="width: 140; height: 140;" ><a href="IMGP0357.JPG"><img src="thumbs/IMGP0357.JPG" alt="IMGP0357.JPG" title="IMGP0357.JPG" height="93" width="124"/></th></tr><tr><th style="width: 140; height: 140;" ><a href="IMGP0382.JPG"><img src="thumbs/IMGP0382.JPG" alt="IMGP0382.JPG" title="IMGP0382.JPG" height="93" width="124"/></th><th style="width: 140; height: 140;" ><a href="IMGP0409.JPG"><img src="thumbs/IMGP0409.JPG" alt="IMGP0409.JPG" title="IMGP0409.JPG" height="93" width="124"/></th><th style="width: 140; height: 140;" ><a href="IMGP0502.JPG"><img src="thumbs/IMGP0502.JPG" alt="IMGP0502.JPG" title="IMGP0502.JPG" height="93" width="124"/></th><th style="width: 140; height: 140;" ><a href="IMGP0638.JPG"><img src="thumbs/IMGP0638.JPG" alt="IMGP0638.JPG" title="IMGP0638.JPG" height="93" width="124"/></th></tr><tr><th style="width: 140; height: 140;" ><a href="IMGP0643.JPG"><img src="thumbs/IMGP0643.JPG" alt="IMGP0643.JPG" title="IMGP0643.JPG" height="93" width="124"/></th><th style="width: 140; height: 140;" ><a href="IMGP0810.JPG"><img src="thumbs/IMGP0810.JPG" alt="IMGP0810.JPG" title="IMGP0810.JPG" height="93" width="124"/></th><th style="width: 140; height: 140;" ></th><th style="width: 140; height: 140;" ></th></tr></table> </BODY></HTML> Firefox still puts those blue frames around pics.I think it's because images are links but how to fix it then..? Link to comment Share on other sites More sharing options...
Fmdpa Posted December 27, 2010 Share Posted December 27, 2010 wouldnt that affect all images including images I am going to add later to use them as buttons? You could target all images within the table: table img { border-style: solid; border-color: #000000; border-width: 1px;} The problem may be, as thescientist said, because you do not have a specified doctype. Your code would be greatly improved if you indented it properly. Also, use of uppercase tag names/attributes is discouraged. In XHTML doctypes, uppercase tags/attributes is not permitted at all. Link to comment Share on other sites More sharing options...
Ingolme Posted December 27, 2010 Share Posted December 27, 2010 One problem you have is that you've mislabeled "px" as "x", making the whole declaration be discarded by standard compliant browsers: #container1 a img { vertical-align: bottom; margin: 1px; border: solid 1x transparent; } Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.