#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Posts
    45
    Rep Power
    12

    CSS class for <a> not working in N6


    I'm trying to convert the following codes which worked in IE5.5up, to be Netscape 6 compatible.

    What it's supposed to do is to display a few images in a horizontal row, which links to another page when clicked. I'm using a css file to set the class for the <a> link to display the images.

    I know a workaround is to simply enclose the <a> tag around an <img> tag, where the "src" of the <img> is the "url" of the original <a> class, like this:

    <a href="http://www.google.com"><img src="image1.gif"></a><a class="btnorg" href="http://www.yahoo.com"><img src="image2.gif"></a>


    But that will mean an extensive change in all of the original codes.

    I've also tried to include "position: absolute" and "position: relative" in the css class, but it didn't help.

    I was wondering what could be wrong, and whether it could be just something small I missed out.


    Here are the codes:

    File: adm.css:

    a.btnorg { color: white; font-family: Arial; text-decoration: none; background: url(image1.gif) no-repeat; text-align: left; width: 74px; height: 74px; clip: auto }

    a.btnpeople { color: white; font-family: Arial; text-decoration: none; background: url(image2.gif) no-repeat; text-align: left; width: 74px; height: 74px }


    File: test.html
    <html>
    <head>
    <link rel="stylesheet" href="../styles/adm.css">
    <style media="screen" type="text/css"><!--
    #consolepanel { position: absolute; z-index: 3; top: 50px; left: 10px; width: 704px; height: 504px; visibility: visible }
    //--></style>
    </head>

    <body bgcolor="#444444">
    <div id="consolepanel">

    <table border="2">
    <tr>
    <td>
    <table border="1">
    <tr>
    <td>
    <span>
    <a class="btnpeople" href="http://www.google.com"></a><a class="btnorg" href="http://www.yahoo.com"></a>
    </span>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>

    </div>
    </body>
    </html>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Posts
    1,014
    Rep Power
    15
    Add 'float:left;' to both classes.
    This way, both 'a' elements become blocks AND are displayed next to each other.

    Hope this helps,
    Jeroen
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Posts
    45
    Rep Power
    12
    Great!! You've saved me!!

IMN logo majestic logo threadwatch logo seochat tools logo