Hello everyone and happy new year! I have some trouble with css-ing the <img>-tag. Whatever I try, it just doesn't behave like other elements, <li> for instance.
img #one img { } #one img a { text-decoration: none; outline:0; } #one img a:link { border: 1px solid white } #one img a:hover{ border: 1px solid red }
If I'd do the same css on an unordered list, everything would work fine. The list item has a white border that becomes red when the cursor is hovering over the item. But that isn't happening with <img>. The border is sometimes white sometimes unvisible (when border:0 in the reset at the beginning of the css-file). The hover effect is not working. I am not quite sure how border="0" in the markup is interacting with the css.
I have some trouble with css-ing the <img>-tag. Whatever I try, it just doesn't behave like other elements, <li> for instance.
html:
<div id="one"><img src="photo.jpg" width="200px" height="100px" border="0" /></div>
css:
img
#one img { }
#one img a { text-decoration: none; outline:0; }
#one img a:link { border: 1px solid white }
#one img a:hover{ border: 1px solid red }
If I'd do the same css on an unordered list, everything would work fine. The list item has a white border that becomes red when the cursor is hovering over the item. But that isn't happening with <img>. The border is sometimes white sometimes unvisible (when border:0 in the reset at the beginning of the css-file). The hover effect is not working. I am not quite sure how border="0" in the markup is interacting with the css.
Thanks,
Runa
HTML
CSS
img.wrborder a {
border: 1px solid #fff;
}
img.wrborder a:hover {
border: 1px solid #ff0000;
}
(Note: I didn't actually test the code but it should work, let me know if it doesn't)