cool .css trick for nn and ie4.

C

chris leeds

I am currently working on a .css layout and was thinking about how I might
use a browser detection script and a pop-up to tell nn4.x people why it
looks so crappy but it'd have to have a cookie so it didn't hit them with
the alert box on every page, etc.

I think I came up with a good solution:

using the @import rule like so:
<style type="text/css"> @import "1.css"; </style>
will block nn4.x AND ie4, using it like this:
<style type="text/css"> @import (1.css); </style>
will block only nn.

so that's got me to a point where when I view the page with nn4.x it just
serves a non-css page. which is fine. it's still readable and usable,
though ugly but it didn't solve my problem of telling them WHY it's so ugly,
so here is what I came up with:

on my style sheet I made a class called .warning:
..warning{
display: none;
}

and just after the body tag (before everything else on the page) put this:

<span class="warning">WARNING: You're seeing an unformatted version of this
web. The reason for this is you are either using a very old browser or the
style sheet failed to load.</span>


so what you've got is a warning that only shows if the page gets served
without the style sheet, either due to an old browser or a technical problem
with the server.

In all fairness I picked up the @import trick from a book, but the .warning
class thingy was all mine ;-)

I think it's a better answer than JavaScript and it's sure a lot easier!

Hope someone else can benefit from the trick.
 
T

Thomas A. Rowe

Chris,

As a web developer there is no reason that you can not build a web site that
basically looks the same for all users, not matter which graphical browser
they are using.

Why discriminate?

I think as a web developer/site owner, you will loose site visitors, since
the visitor's first impression would be one of negative, and most likely
will move on to another web site and never bother to return. Remember you
only have a few seconds to the impress the user that the site has what they
are looking for, so you need to use it wisely.

--

==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, Forums, WebCircle,
MS KB Quick Links, etc.
==============================================
 
C

chris leeds

of course you're right but with nn 4.x accounting for an estimated 2%, I
think my little warning trick is more than they deserve.

I don't know why I'm drawn to the .css (p), maybe the same reason that bugs
just love the bug-zapper ;-)

btw, it'd be a lot easier and more stable to just smack the page into a
table and id the <td> tags.
but then it wouldn't be -P ;-)
 
J

Jack Brewster

I've found that if you use CSS-P with absoulute values (i.e. px) instead of
relative (%, em) you can still come up with a usable positioned layout for
NS4. You'll need to do some @import css filtering, but it can be made to
work.

I'll stay off the "Let NS4 die" soapbox today. I think Thomas is tired of
watching me wave that banner. :)
 
T

Thomas A. Rowe

The only time I don't see an issue with developing web site with all of the
latest technologies is when working within a intranet environment where the
browser of choice has be defined as a corporate standard, etc.

--

==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, Forums, WebCircle,
MS KB Quick Links, etc.
==============================================
 
C

chris leeds

but the warning trick, it's cool. I also noticed that when I was browsing
the different pages here:
http://www.mezzoblue.com/zengarden/alldesigns/
that occasionally a style sheet failed to load. I'm sure that without the
nn issue, a certain number of people with "good" browsers will fail to get
the sheet. I think it's a good idea to put something like this on every
page that relies on an external style sheet, that way when something
inevitably goes wrong it doesn't look like you've got an unformatted site
because you like that sort of thing.
IMHO
 
S

Steve Easton

Chris,
Can you use it to load different style sheets??
One that is nn compatible for nn
and one that is IE compatible for IE??
imho that would be great.!!
 
C

chris leeds

I think so. I'm not sure exactly how but I'm delving into the @ rules.
apparently you can specify different sheets for different media like print,
screen, mobile, etc.
If I figure out how I'll let you know. Maybe someone will be kind enough to
post the answer ;-)
 
J

jon spivey

Chris,
or another way to hide styles from NN4 is to use double comments. For
example -
<style type="text/css">
#nn4{
color:red
}
#nn4{
/*/*/display:none/* */
}
</style>
<div id="nn4"> You have Netscape 4</div>

Only NN4 users would see the div - all other browsers will read the
display:none. I find this easier than using @import - but its personal
preference
 
C

chris leeds

that's very cool. the reason I wanted to hide it all from the 4.x versions
is because it looked so bad it's actually better with them not getting
anything. ;-), but that tip got dragged to the "tips folder".

now, if there was only a way you could make a div display it's content
(center, middle) like a table cell, that'd be just what I need.
 
S

Stefan B Rusynko

PS
also check your @ imports in NN6/7 vs 4x

--




| that's very cool. the reason I wanted to hide it all from the 4.x versions
| is because it looked so bad it's actually better with them not getting
| anything. ;-), but that tip got dragged to the "tips folder".
|
| now, if there was only a way you could make a div display it's content
| (center, middle) like a table cell, that'd be just what I need.
|
| | > Chris,
| > or another way to hide styles from NN4 is to use double comments. For
| > example -
| > <style type="text/css">
| > #nn4{
| > color:red
| > }
| > #nn4{
| > /*/*/display:none/* */
| > }
| > </style>
| > <div id="nn4"> You have Netscape 4</div>
| >
| > Only NN4 users would see the div - all other browsers will read the
| > display:none. I find this easier than using @import - but its personal
| > preference
| >
| >
| > --
| > Jon
| > Microsoft MVP - FP
| >
| >
| > | > > I am currently working on a .css layout and was thinking about how I
| might
| > > use a browser detection script and a pop-up to tell nn4.x people why it
| > > looks so crappy but it'd have to have a cookie so it didn't hit them
| with
| > > the alert box on every page, etc.
| > >
| > > I think I came up with a good solution:
| > >
| > > using the @import rule like so:
| > > <style type="text/css"> @import "1.css"; </style>
| > > will block nn4.x AND ie4, using it like this:
| > > <style type="text/css"> @import (1.css); </style>
| > > will block only nn.
| > >
| > > so that's got me to a point where when I view the page with nn4.x it
| just
| > > serves a non-css page. which is fine. it's still readable and usable,
| > > though ugly but it didn't solve my problem of telling them WHY it's so
| > ugly,
| > > so here is what I came up with:
| > >
| > > on my style sheet I made a class called .warning:
| > > .warning{
| > > display: none;
| > > }
| > >
| > > and just after the body tag (before everything else on the page) put
| this:
| > >
| > > <span class="warning">WARNING: You're seeing an unformatted version of
| > this
| > > web. The reason for this is you are either using a very old browser or
| > the
| > > style sheet failed to load.</span>
| > >
| > >
| > > so what you've got is a warning that only shows if the page gets served
| > > without the style sheet, either due to an old browser or a technical
| > problem
| > > with the server.
| > >
| > > In all fairness I picked up the @import trick from a book, but the
| > .warning
| > > class thingy was all mine ;-)
| > >
| > > I think it's a better answer than JavaScript and it's sure a lot easier!
| > >
| > > Hope someone else can benefit from the trick.
| > >
| > >
| > >
| >
| >
|
|
 
C

chris leeds

don't have nn6 or 7 but I do have mozilla firebird and opera. it works ok
with them but that stinking firebird doesn't play along as well as I'd like
to see. it does strange things with placement and padding.
http://nedp.net/skin
the @import thing is supposed to hide from v5 down.
 
C

chris leeds

I don't know if you're still following this thread, or if anyone will see it
but I finished up this page:

http://nedp.net/newh/xmas
it's got separate style sheets for print and screen. I also used the WEFT
tool to embed a font (defaults to descending less desirable fonts if that
doesn't work). That tool is pretty cool. It's surprising for free.
 
S

Stefan B Rusynko

Consider alternative styles for users that block WEFT downloads
- IMHO WEFT opens too many potential security holes to ever allow it to download a font

--




| I don't know if you're still following this thread, or if anyone will see it
| but I finished up this page:
|
| http://nedp.net/newh/xmas
| it's got separate style sheets for print and screen. I also used the WEFT
| tool to embed a font (defaults to descending less desirable fonts if that
| doesn't work). That tool is pretty cool. It's surprising for free.
|
|
| | > Chris,
| > Can you use it to load different style sheets??
| > One that is nn compatible for nn
| > and one that is IE compatible for IE??
| > imho that would be great.!!
| > --
| > using 2k PRO but....95isalive
| > This site is best viewed............
| > .......................with a computer
| >
| > | > > but the warning trick, it's cool. I also noticed that when I was
| browsing
| > > the different pages here:
| > > http://www.mezzoblue.com/zengarden/alldesigns/
| > > that occasionally a style sheet failed to load. I'm sure that without
| the
| > > nn issue, a certain number of people with "good" browsers will fail to
| get
| > > the sheet. I think it's a good idea to put something like this on every
| > > page that relies on an external style sheet, that way when something
| > > inevitably goes wrong it doesn't look like you've got an unformatted
| site
| > > because you like that sort of thing.
| > > IMHO
| > > | > > > I've found that if you use CSS-P with absoulute values (i.e. px)
| instead
| > > of
| > > > relative (%, em) you can still come up with a usable positioned layout
| > for
| > > > NS4. You'll need to do some @import css filtering, but it can be made
| > to
| > > > work.
| > > >
| > > > I'll stay off the "Let NS4 die" soapbox today. I think Thomas is
| tired
| > of
| > > > watching me wave that banner. :)
| > > >
| > > > --
| > > > Jack Brewster - Microsoft FrontPage MVP
| > > >
| > > > | > > > > of course you're right but with nn 4.x accounting for an estimated
| 2%,
| > I
| > > > > think my little warning trick is more than they deserve.
| > > > >
| > > > > I don't know why I'm drawn to the .css (p), maybe the same reason
| that
| > > > bugs
| > > > > just love the bug-zapper ;-)
| > > > >
| > > > > btw, it'd be a lot easier and more stable to just smack the page
| into
| > a
| > > > > table and id the <td> tags.
| > > > > but then it wouldn't be -P ;-)
| > > > >
| > > > > | > > > > > Chris,
| > > > > >
| > > > > > As a web developer there is no reason that you can not build a web
| > > site
| > > > > that
| > > > > > basically looks the same for all users, not matter which graphical
| > > > browser
| > > > > > they are using.
| > > > > >
| > > > > > Why discriminate?
| > > > > >
| > > > > > I think as a web developer/site owner, you will loose site
| visitors,
| > > > since
| > > > > > the visitor's first impression would be one of negative, and most
| > > likely
| > > > > > will move on to another web site and never bother to return.
| > Remember
| > > > you
| > > > > > only have a few seconds to the impress the user that the site has
| > what
| > > > > they
| > > > > > are looking for, so you need to use it wisely.
| > > > > >
| > > > > > --
| > > > > >
| > > > > > ==============================================
| > > > > > Thomas A. Rowe (Microsoft MVP - FrontPage)
| > > > > > WEBMASTER Resources(tm)
| > > > > >
| > > > > > FrontPage Resources, Forums, WebCircle,
| > > > > > MS KB Quick Links, etc.
| > > > > > ==============================================
| > > > > > To assist you in getting the best answers for FrontPage support
| see:
| > > > > > http://www.net-sites.com/sitebuilder/newsgroups.asp
| > > > > >
| > > > > > | > > > > > > I am currently working on a .css layout and was thinking about
| how
| > I
| > > > > might
| > > > > > > use a browser detection script and a pop-up to tell nn4.x people
| > why
| > > > it
| > > > > > > looks so crappy but it'd have to have a cookie so it didn't hit
| > them
| > > > > with
| > > > > > > the alert box on every page, etc.
| > > > > > >
| > > > > > > I think I came up with a good solution:
| > > > > > >
| > > > > > > using the @import rule like so:
| > > > > > > <style type="text/css"> @import "1.css"; </style>
| > > > > > > will block nn4.x AND ie4, using it like this:
| > > > > > > <style type="text/css"> @import (1.css); </style>
| > > > > > > will block only nn.
| > > > > > >
| > > > > > > so that's got me to a point where when I view the page with
| nn4.x
| > it
| > > > > just
| > > > > > > serves a non-css page. which is fine. it's still readable and
| > > > usable,
| > > > > > > though ugly but it didn't solve my problem of telling them WHY
| > it's
| > > so
| > > > > > ugly,
| > > > > > > so here is what I came up with:
| > > > > > >
| > > > > > > on my style sheet I made a class called .warning:
| > > > > > > .warning{
| > > > > > > display: none;
| > > > > > > }
| > > > > > >
| > > > > > > and just after the body tag (before everything else on the page)
| > put
| > > > > this:
| > > > > > >
| > > > > > > <span class="warning">WARNING: You're seeing an unformatted
| > version
| > > > of
| > > > > > this
| > > > > > > web. The reason for this is you are either using a very old
| > browser
| > > > or
| > > > > > the
| > > > > > > style sheet failed to load.</span>
| > > > > > >
| > > > > > >
| > > > > > > so what you've got is a warning that only shows if the page gets
| > > > served
| > > > > > > without the style sheet, either due to an old browser or a
| > technical
| > > > > > problem
| > > > > > > with the server.
| > > > > > >
| > > > > > > In all fairness I picked up the @import trick from a book, but
| the
| > > > > > .warning
| > > > > > > class thingy was all mine ;-)
| > > > > > >
| > > > > > > I think it's a better answer than JavaScript and it's sure a lot
| > > > easier!
| > > > > > >
| > > > > > > Hope someone else can benefit from the trick.
| > > > > > >
| > > > > > >
| > > > > > >
| > > > > >
| > > > > >
| > > > >
| > > > >
| > > >
| > > >
| > >
| > >
| >
| >
|
|
 
C

chris leeds

in the .css I've specified descendingly nice looking fonts ending with
"serif" just to have some kind of control.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

css page problems 2
problem with repeating css graphic 3
CSS errors 2
Problem when saving 'separate files' for my CSS... 4
advanced(?) .css 25
css external H1, H2, H3 3
CSS rules 2
CSS @import URI question 2

Top