Welcome to WebmasterWorld Guest from 54.221.87.97

Forum Moderators: not2easy

Message Too Old, No Replies

Issues with Netscape 4.x and CSS

Images and border style issues with NN4.

     

chris_p

9:05 am on Apr 17, 2003 (gmt 0)

10+ Year Member



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

9:10 am on Apr 17, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

9:22 am on Apr 17, 2003 (gmt 0)

10+ Year Member



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

grahamstewart

9:31 am on Apr 17, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

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

grahamstewart

9:34 am on Apr 17, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

Sorry.. bit slow today

chris_p

9:51 am on Apr 17, 2003 (gmt 0)

10+ Year Member



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

11:27 am on Apr 17, 2003 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

12:13 pm on Apr 17, 2003 (gmt 0)

10+ Year Member



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

chris_p

12:34 pm on Apr 17, 2003 (gmt 0)

10+ Year Member



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

1:44 pm on Apr 17, 2003 (gmt 0)

10+ Year Member



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

6:08 pm on Apr 17, 2003 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

9:03 am on Apr 18, 2003 (gmt 0)

10+ Year Member



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

10:37 pm on May 1, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

12:18 am on May 2, 2003 (gmt 0)

10+ Year Member



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

8:02 pm on May 2, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

10:26 pm on May 2, 2003 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



.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]