border problems

**havik** · 02-28-2003 02:01 PM

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

**Wisbin** · 02-28-2003 02:16 PM

try

Code:

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

**havik** · 02-28-2003 02:29 PM

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

**Wisbin** · 02-28-2003 02:40 PM

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;
}

**havik** · 02-28-2003 02:48 PM

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

**nkaisare** · 02-28-2003 03:08 PM

I dont know... but possibly because a is an inline element and not a block level element???

**nkaisare** · 02-28-2003 03:17 PM

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.

**havik** · 02-28-2003 03:37 PM

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

celebguy_dv · 03-04-2003 03:10 AM

http://banners.dollarmachine.com/pic/2014000/hal001.gif

Thread: border problems

Thread Tools

Display

border problems

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions