1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Why Does My Image Border Look Odd In FF?

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

  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