Issues with Netscape 4.x and CSS

Images and border style issues with NN4.

[chris_p]

Hi Guys,

I'm new to CSS and need some advice. Apparently Netscape 4.x has a lot of issues with CSS. In particular I'm trying to place an image in the left hand corner of my page (as a logo) as well as place a thin border around my top & left navigation bars to give it that frame appearance.

The borders disappear in NN4 and the logo is not sized correctly. I've created an external style sheet and have placed everything within <DIV> in my HTML file.
CSS E.G
#leftmargin {position:absolute;
left:0cm; top:0cm;
height:1500cm;width:4cm;
background-color: #3333ff;
layer-background-color: #3333ff;
border-style:solid;
border:solid;
border-width:thin;
}

#logo{position:absolute;
left:0cm; top:0cm;
height:10cm; width:10cm;
background-color:#ffffff;
layer-background-color:#ffffff;
background-image:url(logo.gif);
layer-background-image:url(logo.gif);
}

Any advice?

Thanks in advance.

Chris.

[grahamstewart]

Any advice?

Yeah... don't worry about NN4! :)

It accounts for less than 2% of the browsers out there and that number is only going to drop.

Just bump them to [webstandards.org...] instead.

[chris_p]

My sentiments exactly but this is part of a requirement.
I don't have the luxury of blowing this off.
Any ideas?

[grahamstewart]

Try this great post by DrDoc [webmasterworld.com...]

Found it in the CSS forum library [webmasterworld.com]

[grahamstewart]

Oh.. and Welcome to Webmaster World [webmasterworld.com] :)

Sorry.. bit slow today

[chris_p]

Thanks for your help Graham.
The post re workarounds is very interesting.
I'll just have to persevere with making it NN4 compatable. What a pain!

Regards,

Chris.

[Nick_W]

Hi Chris, welcome!

Do you work with PHP/ASP? - If it's really important it might be worth serving different template to NN4....?

Nick

[WibbleWobble]

Are you aware that 1500cm is quite a big document?
Shouldn't pixels be used to define the image?

[chris_p]

I used that (1500cm) as an exagerated example. I was getting frustrated with the browsers schizophrenic rendering. I've actually found a height(16cm) that covers the page and renders in all browsers. Unfortunately using percentage (in this scenario) works in some browsers but not I.E 6.0.
I've eliminated most of my original browser problems. My last issue is trying to re-size my gif file to fit in the left hand corner as a logo. My example #logo code sizes the image correctly as far as the border goes. But unfortunately the image remains its original size. i.e border is 4cm X 4cm. image remains unchanged therefore doesn't fit in the border.
Any ideas.

[WibbleWobble]

Wouldn't the image stretch if it was larger? Wouldn't it be more logical to make the image itself larger?
I obviously don't quite get whats going on.

[DrDoc]

A short note about NN4:

NN4 doesn't like fancy "full properties". For example, it chokes on "border-width, border-style, border-color", but it handles "border" just fine. Again, it doesn't understand "border-top, border-right, border-bottom, border-left".

In short, NN4 is very picky. Either something works, or it doesn't work at all. On top of that, it usually has some weird issues whenever it can render something.

Now, to the image thing...

#logo{position:absolute;
left:0cm; top:0cm;
height:10cm; width:10cm;
background-color:#ffffff;
layer-background-color:#ffffff;
background-image:url(logo.gif);
layer-background-image:url(logo.gif);
}

I take it that #logo is the ID of a div, and that the image you want to resize is "logo.gif". Unfortunately, that is doomed to fail. Some, though very few, browsers can understand certain tricks that will make them resize a background image. But in most cases that effect is impossible to acheive. So, that leaves you with two options:

1) Resize the image manually.
2) Position the image inside the #logo div (using a normal <img> tag and CSS). The text will then float on top of the image.

Both solutions work very well, and have solid support, even in a browser such as NN4 :)

[chris_p]

Thanks for all your advice guys. It has been very helpful.
I'm getting the hang of this CSS stuff!
I've found that if you want to do it the right (or long..) way i.e validating using strict dtd's and accomodating the miriad of browsers then it requires a lot more effort.
I've been reading peoples responses on how to cope with NN4 and unfortunately, "ignore it and hope it goes away", doesn't cut it. Unfortunately some of us have to deal with it and as frustrating as it is, "we must overcome".:)
Once again thanks for your advice and expect to hear from me in the next couple of weeks.

Regards,

Chris.

[TheDoctor]

NN4 doesn't like fancy "full properties". For example, it chokes on "border-width, border-style, border-color", but it handles "border" just fine. Again, it doesn't understand "border-top, border-right, border-bottom, border-left".

Is there any way of getting NN4 to ignore border attributes? I'm trying to use them for a menu, but NN4 is going crazy. Given that it's a dying technology, I don't mind giving NN4 users an unformatted list of links, but I do object to them not being able use the links (particularly since an CSS-unaware broser like Lynx has no problems!).

[hafnius]

Hi The Doctor

[qoute]Is there any way of getting NN4 to ignore border attributes? [/quote]

How about border: none;?

Then if you @import a styleheet for the newer browsers only nn4 will ignore the border.

-And i am soooo glad NN4 is dying - it must have been a pain a couple of years back having to produce designs for it.

Regards
Hafnius

[TheDoctor]

How about border: none;?

Then if you @import a styleheet for the newer browsers only nn4 will ignore the border.

Thanks for the advice, but I also found what is perhaps a more elegant solution in another thread([webmasterworld.com ]): use @media all.

With this, you can hide CSS code fromm NN4 without specially creating a new file for later browsers. Check out the thread.

[DrDoc]

.myclass {
color: red;
/*/*/
border: 1px solid black;
/* End */
}

NN4 will display the red color, but ignore the border.

For more information, check this thread about getting style sheets to work in NN4 [webmasterworld.com]