border problems [Archive] - WebDeveloper.com

Click to See Complete Forum and Search --> : 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

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

:p 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??? :confused:

nkaisare

02-28-2003, 03:17 PM

Actually, its true! This is the page I created and it works:

<!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">

</style>
</head>

<body>
<div class="NavJump">
<a href="#">Home</a> | 
<a href="#">FAQ's</a> | 
<a href="#">Reader's Choice</a> | 
<a href="#">Links</a> | 
<a href="#">Contact</a> | 
<a href="#">Who We Are</a> | 
<a href="#">Counseling</a> | 
<a href="#">Seminar Series</a> | 
<a href="#">Info Products</a> | 
<a href="#">Ask The Expert</a> | 
<a href="#">Suppliers Database</a> | 
<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 or spaces to distinguish links. Hence I added | 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 (http://www.kinkyceleb.com/1261795520)