Why Does My Image Border Look Odd In FF?

Discussion in 'CSS' started by gobbly2100, Apr 30, 2008.

0
  1. #1
    gobbly2100, Apr 30, 2008 IP
  2. hajagha

    hajagha Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    First of all, you should set hover border to the images NOT anchor link. and because of this, you should use Class NOT ID. So:
    
<head>
<style>
.wallpapers {
	width: 380px;
	padding: 2px;
}

.wallpapers img {
	border:2px solid #f00;
}

.wallpapers:hover img{
border: 2px solid #000;
}
    HTML:
    but this code doesn't work in IE and you have to add this line for IE:
    
.wallpapers:hover{
color: red; 
}
</style>
</head>
    HTML:
    and the body willbe :

    <body>
<a href="/images/wallpapers/evo_desktop_001.jpg" class="wallpapers"><img alt="Evo 
Desktop Wallpaper 001" border="0" src="evo_desktop_001_thumb.jpg"/></a>
<a href="/images/wallpapers/evo_desktop_002.jpg"  class="wallpapers"><img alt="Evo Desktop 
Wallpaper 002" src="evo_desktop_002_thumb.jpg"/></a>
</body>
    HTML:
    <head>
<style>
.wallpapers {
	width: 380px;
	padding: 2px;
}

.wallpapers img {
	border:2px solid #f00;
}

.wallpapers:hover img{
border: 2px solid #000;
}

.wallpapers:hover{
color: red; 
}
</style>
</head>
<body>

<a href="/images/wallpapers/evo_desktop_001.jpg" class="wallpapers">
<img alt="Evo Desktop Wallpaper 001" border="0" src="evo_desktop_001_thumb.jpg"/>
</a>

<a href="/images/wallpapers/evo_desktop_002.jpg"  class="wallpapers">
<img alt="Evo Desktop Wallpaper 002" src="evo_desktop_002_thumb.jpg"/></a>

</body>
    HTML:
     
    hajagha, Apr 30, 2008 IP
  3. gobbly2100

    gobbly2100 Banned

    Messages:
    906
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Awesome, thank you!

    I don't know why I didn't use class on the img tags instead now I think about it after you showing me.

    Thanks again!
     
    gobbly2100, May 1, 2008 IP