Sorry if this is in wrong place, hoping to get quick answer.

Been playing with this all day and getting nowhere fast...

Background: web site will have a lot of older folk so, old versions of browsers are important (read NN 4.x). Site is about Real Estate so lots of pictures many of which are links.

That said

Here's what I'm trying to do:

pictures that aren't links have a white border
pictures that are links have either the same link colors as the text or are always one of the link colors.

What I get is...

Opera: The non-links are white, links stay one color.
IE: The non-links are white, links stay one color.
NN: The links follow the settings for text links, the non-links have no border, but have this rediculous little white box underneath the image (probably 2X2).

Any ideas? Here's some of the code.

CSS in a seperate file is:

a:link { color: #ccffcc; text-direction:none; font-weight: bold; font-size: 9pt; font-family: Arial; white-space: nowrap }
a:visited { color: #99cccc; text-direction:none; font-weight: bold; font-size: 9pt; font-family: Arial; white-space: nowrap }
a:hover { color: #336666; font-size: 9pt; background-color: #ccffcc; white-space: nowrap }
img.links { border-color: #336666; border-style: solid; border-width: 2pt; }
img.nolinks { border-color: #ffffff; border-style: solid; border-width: 2pt; }

HTML is:
<a href="listings/37422/37422.html"><img src="listings/37422/front_50.jpg" width="320" height="240" alt="" class="links"></a><br>

<img src="listings/33628/view_50.jpg" width="320" height="240" alt="" class="nolinks" ><br>

Anyone know how to get rid of the !@$^##@% little white box?
What am I missing here?

Trying to avoid tables and java if possible. Not sure if I shouldn't just put this mess in a table with appropriate colored backgrounds, but this page already has way too many tables.

Thanks in advance.

scribe

I know so little about style sheets I shouldn't be responding, but at least I will bump your post.

If I had the problem, I would look up the standard java browser detection code, and redirect those viewers to a parallel page built without css just for netscape. As long as you had a few such pages and not much code that might be the simplest.

Or perhaps use the detection code to load within that page a separate style sheet and tinker with that for NS.

Good luck and hopefully you'll get a better fix.

it would be better if you physically posted the HTML on a website so we could look at it.

<img src="listings/33628/view_50.jpg" width="320" height="240" border="0" alt="" class="nolinks" ><br>

I feel your pain, trying to write a style sheet that doesn't completely stuff up Netscape 4 -- ultimately, your problem comes down to the fact that CSS support in NS4 sucks, a lot. (Your code works fine in versions 6/7 and Mozilla ...)

First up, some pedantry to clear up a few not-right things in your CSS code.

"text-direction:" is not a valid property -- I think you're looking for "text-decoration:none" to remove link underlines.
Using the three different "border" properties works but isn't the best idea. "border: solid 2pt #336666" is shorter and clearer, and is better supported by older browsers.
You shouldn't just put "font-family:Arial" because not everyone has a copy of Arial installed. Use "font-family:Arial,sans-serif" instead.
Some of the A styles are the same across all three selectors -- you can just put the common ones all together in one block, which saves space: "a { font-size: 9pt; font-family: Arial, sans-serif; }" This will then apply to all links, regardless of visited/hover or not.

Anyway. The white box you're seeing is actually the border you were trying to put around the image -- NS4 isn't very smart with borders and for some elements (such as images) it can't properly determine the size and shape of the object to put the border around. So, it just draws the border under the image. In the few minutes of playing that I had time to do, I couldn't find a way to make it not do this.

So, as I see it you have two options: either put something (a <div> or <td> would do) around the images and apply the border to that, or just don't try to make borders in NS4. Doing the first can be tricky because NS4 will put space between the IMG and the border of a tag that's around it (you'll need to play with things like "padding:0").

To do the second, no JavaScript is required -- you can just put the border styles (and anything else NS4 doesn't like) into a separate CSS file, then put this in your HTML:
<style type="text/css">@import url("non_ns4.css");</style>
which will load the style sheet in every recent browser, but not NS4.
Even if you do this, you can still have NS4 draw borders around the link images by not setting border="0" on the IMG tag, and then specifying some different border for IMG in the non-NS4 style sheet. Then, NS4 will draw a border around image links the same colour as text links, and every other browser will draw whatever border you specify in the CSS.

Hmm ... I seem to be rambling a lot, but I hope enough of this made sense to help!

Thanks for the help azza. Knowing that something is consistently a problem can be useful - at least then I know it's not me.

Thanks for the advice on the CSS. Haven't implemented it yet.

I've been meaning to update the fonts to allow for a suggested alternative.

One thing about your suggestions tho', when reading on using CSS, this is my first stab at it; I seem to recall reading somewhere that a particular browser (may have been more than one) got confused by mutiple declarations i.e.:

border: solid 2pt #336666

Have you run into that?

Thanks again for the responses.

scribe

. . . talking about a design forum on WHT . . . :D

One thing about your suggestions tho', when reading on using CSS, this is my first stab at it; I seem to recall reading somewhere that a particular browser (may have been more than one) got confused by mutiple declarations i.e.:

border: solid 2pt #336666

Have you run into that?

Nope, never seen that before. In all of my cross-browser design experience (for what that's worth :)) I've always found that "border:" is better supported than more specific properties like "border-left:" or "border-color:". In particular Netscape 4 (dodgy as it is) tends to stuff up borders unless you use "border:".

You might have been thinking of "font:", which is rather poorly supported.

In any case, glad to have been of assistance. Good luck -- if you want to make things work well in NS4, you'll need it!