www.webdeveloper.com
Results 1 to 9 of 9

Thread: border problems

  1. #1
    Join Date
    Jan 2003
    Location
    Peg City
    Posts
    638

    border problems

    Why won't borders show up in netscape 6.0?

    I have the following in my style tag:

    a:hover.NavJump {
    width:116px;
    text-decoration: none;
    color: #000000;
    border: 1px ridge solid;
    border-color: #000000;
    }

    The purpose is to enclose the link, when hovered upon, in a box and to change the text color. At first I figured Netscape 6 didn't support hover, but then why is the text color changing? Any ideas?

    Havik

  2. #2
    Join Date
    Feb 2003
    Posts
    8
    try

    Code:
    a.NavJump:hover { 
    width:116px; 
    text-decoration: none; 
    color: #000000; 
    border: 1px ridge solid; 
    border-color: #000000; 
    }

  3. #3
    Join Date
    Jan 2003
    Location
    Peg City
    Posts
    638
    Thanks, I did that and I also realized that it was this statement:

    border: 1px ridge solid;

    that netscape didn't like.

    I now have the following:

    a.NavJump:hover {
    width: 116px;
    text-decoration: none;
    color: #000000;
    border: 1px solid;
    border-color: #000000;
    }

    Which still works in explorer but the box will only enclose the actual word instead of the default 116 pixels I was hoping it would. I'm going to work on it but any ideas there?

    Havik

  4. #4
    Join Date
    Feb 2003
    Posts
    8
    I have no idea what you are talking about.. sorry.. any URL here?


    btw you could make it more RSI-friendly if you go with:

    a:hover.NavJump {
    width:116px;
    text-decoration: none;
    color: #000;
    border: 1px solid #000;
    }

  5. #5
    Join Date
    Jan 2003
    Location
    Peg City
    Posts
    638
    Yeah, take a look at this with both netscape and explorer:

    http://www.e-bsc.ca/Temp/NewFolder/example.html

    In explorer, the box enclosing the links is always 116 pixels wide unless the text is larger than 116 pixels.

    But in netscape (my version is 6.2.2), the box only encloses the text part of the link.

    Havik

  6. #6
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    I dont know... but possibly because a is an inline element and not a block level element???

  7. #7
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    Actually, its true! This is the page I created and it works:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <title>Untitled</title>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
        div.NavJump span {display: none}
        div.NavJump a {font-family: arial; font-size: 8pt; color: #0d60d1; text-decoration: none; font-weight: bold}
        div.NavJump a:link {display:block; width: 116px; text-decoration: none; color: #0d60d1; border: 1px solid #FFFFFF;}
        div.NavJump a:visited {display:block; width: 116px; text-decoration: none; color: #0d60d1; border: 1px solid #FFFFFF;}
        div.NavJump a:active {display:block; width: 116px; text-decoration: none; color: #000000; border: 1px solid #000000;}
        div.NavJump a:hover {display:block; width: 116px; text-decoration: none; color: #000000; border: 1px solid #000000;}
    -->
    </style>
    </head>
    
    <body>
    <div class="NavJump">
        <a href="#">Home</a><span> | </span>
        <a href="#">FAQ's</a><span> | </span>
        <a href="#">Reader's Choice</a><span> | </span>
        <a href="#">Links</a><span> | </span>
        <a href="#">Contact</a><span> | </span>
        <a href="#">Who We Are</a><span> | </span>
        <a href="#">Counseling</a><span> | </span>
        <a href="#">Seminar Series</a><span> | </span>
        <a href="#">Info Products</a><span> | </span>
        <a href="#">Ask The Expert</a><span> | </span>
        <a href="#">Suppliers Database</a><span> | </span>
        <a href="#">Virtual Tour</a>
    </div>
    </body>
    </html>
    The only thing required to make your code work was to include {display: block} within styles for a:hover

    Then I changed the doctype to HTML 4.01 Strict. This meant that I had to include <a> within a block-level element like div.

    Then I thought, why type "NavJump" 12 times, when you can do it once (for div) and use div.NavJump a {...}

    Non-visual browsers need something other than <br> or spaces to distinguish links. Hence I added <span> | </span> and made its display as none... so that it doesn't show up in visual browser.

  8. #8
    Join Date
    Jan 2003
    Location
    Peg City
    Posts
    638
    Thanx, that worked beautifully. Now I won't have to compromise anything. Oh yeah, double thanx for simplifying the code so NavJump didn't have to be typed so many types.

    Havik

  9. #9
    celebguy_dv Guest

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles