SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2003
    Location
    India
    Posts
    160
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Link border not working on firefox

    Hi,

    http://www.webcash.in/fp/image_link_hover.html

    The page displayed properly on IE 6, but not on firefox.

    When you mouseover any of the images, it will show a green border for the image. It works fine on IE.

    But not on FireFox, can anyone tell how i fix the problem in firefox ?

    Thanks,

    Yujin

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hello,

    There's lots of things wrong with that page,
    - You need a doctype
    - Your style block needs to be in the head of the document
    - Don't use inline styles and embedded
    - Validate to make sure your code is correct
    - Only add classes where you can't select the elements you want to style with the tag selector alone.

    Here's what I came up with:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <HEAD>
    <TITLE>New Document</TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <style type="text/css">
    .videos td {
    	background: #FFD;
    	padding: 10px;
    	text-align: center
    }
    .videos td:hover {
    	background: #eee;
    }
    .videos a:hover {position: relative} /* Fix for IE */
    .videos a img {
    	border: 4px solid #ddd;
    }
    .videos a:hover img {
    	border: 4px solid #7b3;
    }
    </style>
    </HEAD>
    <BODY>
    <table width="100&#37;" class="videos">
      <tbody>
        <tr>
          <td>1 <br>
            <a href="myvideo.html"><img src="http://img.youtube.com/vi/KF2l9A9AqHs/default.jpg" width="130" height="97" alt="" /></a>
            <p><a href="963/myvideo/">MyVideo</a></p></td>
          <td>1 <br>
            <a href="myvideo.html"><img src="http://img.youtube.com/vi/KF2l9A9AqHs/default.jpg" width="130" height="97" alt="" /></a>
            <p><a href="963/myvideo/">MyVideo</a></p></td>
          <td>1 <br>
            <a href="myvideo.html"><img src="http://img.youtube.com/vi/KF2l9A9AqHs/default.jpg" width="130" height="97" alt="" /></a>
            <p><a href="963/myvideo/">MyVideo</a></p></td>
          <td>1 <br>
            <a href="myvideo.html"><img src="http://img.youtube.com/vi/KF2l9A9AqHs/default.jpg" width="130" height="97" alt="" /></a>
            <p><a href="963/myvideo/">MyVideo</a></p></td>
        </tr>
      </tbody>
    </table>
    </BODY>
    </html>
    I would steer clear of EditPlus and code from scratch.

    Hope it helps

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Depending on how many images you want in the gallery you may prefer one that's more fluid:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>New Document</title>
    <style type="text/css">
    #videos div {
    	background: #FFD;
    	padding: 10px;
    	text-align: center;
    	float: left;
    	width: 200px;
    }
    #videos div:hover {
    	background: #eee;
    }
    #videos a:hover {position: relative} /* Fix for IE */
    #videos a img {
    	border: 4px solid #ddd;
    }
    #videos a:hover img {
    	border: 4px solid #7b3;
    }
    </style>
    </head>
    <body>
    <div id="videos">
      <div>
        <p>1</p>
        <a href="myvideo.html"><img src="http://img.youtube.com/vi/KF2l9A9AqHs/default.jpg" width="130" height="97" alt="" /></a>
        <p><a href="963/myvideo/">MyVideo</a></p>
      </div>
      <div>
        <p>1</p>
        <a href="myvideo.html"><img src="http://img.youtube.com/vi/KF2l9A9AqHs/default.jpg" width="130" height="97" alt="" /></a>
        <p><a href="963/myvideo/">MyVideo</a></p>
      </div>
      <div>
        <p>1</p>
        <a href="myvideo.html"><img src="http://img.youtube.com/vi/KF2l9A9AqHs/default.jpg" width="130" height="97" alt="" /></a>
        <p><a href="963/myvideo/">MyVideo</a></p>
      </div>
      <div>
        <p>1</p>
        <a href="myvideo.html"><img src="http://img.youtube.com/vi/KF2l9A9AqHs/default.jpg" width="130" height="97" alt="" /></a>
        <p><a href="963/myvideo/">MyVideo</a></p>
      </div>
    </div>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •