3 replies [Last post]
kedar
Offline
newbie
Last seen: 15 years 27 weeks ago
Timezone: GMT-5
Joined: 2004-01-09
Posts: 2
Points: 0

Hi all

I have a web site that I designed that works perfectly well when viewed with IE. But view it with Netscape and it's all skewed to hell! It seems like the positioning of text and images for different <div> sections doesn't work the same in Netscape as it does in IE.

The ULR in question is http://www.literacyunlimited.ca.

Any suggestions would be appreciated.

Kedar

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 15 years 38 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

Netscape problems with CSS

If you are referring to Nav 4 then yes, the page could
easily be broken. I just looked in Firebird and Opera
and the page is fine.

Nav 4 is a horrible old browser. it's best to just withhold
the styles from it and let the few people still using it to
see a plain page with all the content but no styling.

If you @import the css rather than link it in, Nav 4 won't
see the styles at all.

http//www.positioniseverything.net/

kedar
Offline
newbie
Last seen: 15 years 27 weeks ago
Timezone: GMT-5
Joined: 2004-01-09
Posts: 2
Points: 0

Netscape problems with CSS

Thanks for the info BigJohn. What's the syntax for @importing the CSS
file?

Currently I'm doing it like this:
<link rel="STYLESHEET" type="text/css" href="../css/main.css">

Thanks
Kedar

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 15 years 38 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

Netscape problems with CSS

An @import must be within a style block or linked file,
and any @imports must precede other CSS rules in
that block or file. So you can have (in the head):

<link rel="STYLESHEET" type="text/css" href="../css/nav4styles.css">

<style type="text/css">
@import url("../css/main.css");
</style>

Then any rules that conflict between the two sheets that are
of equal weight will be decided in favor of the @imported sheet
because it comes later than the linked sheet. Thus it is possible
to give one set of styles to Nav4 (and all the rest), and then
override them for more modern browsers in the @import sheet
that Nav4 doesn't see. It's slightly tricky, but attention to details
is the key to getting it right.

For instance, I gave all my layout dedicated images "display: none"
in the linked sheet and then "display: inline" in the @imported sheet.
That way Nav4 is not given images it can't properly place anyway.
The same kind of thing was done where needed until it looked at
least not bad in Nav4. Finally a good look in a good browser to see
if anything has been missed, and if so it gets corrected in the @import sheet.

This only works for Nav4. Even old IE4 gets the @import sheet.

http//www.positioniseverything.net/