homepage Welcome to WebmasterWorld Guest from 54.211.80.155
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Issues with Netscape 4.x and CSS
Images and border style issues with NN4.
chris_p




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

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




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

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




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

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

grahamstewart




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

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

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

grahamstewart




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

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

Sorry.. bit slow today

chris_p




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

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




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

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




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

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

chris_p




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

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




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

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




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

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




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

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




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

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




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

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




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

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




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved