grillcheese || It's All Good.

Posted on 7.25.2005

Eric Meyer on CSS
Using @import Restrictions

If you've ever struggled with Netscape Navigator 4.x, this trick is for you. It all hinges on the fact that NN4.x doesn't understand what @import means. This is by far the most widely used trick, even though it's only good for hiding external style sheets.


Old Explorers
@import is also not understood by IE3/Win and IE4/Win, if that's a concern for you.
Consider the following style sheet:


A few things here will cause trouble or otherwise be useless in NN4.x. Most obviously, NN4.x doesn't understand a:hover rules because it was released before :hover made its way into the CSS specification. It also has trouble with :active. These aren't necessarily major problems because NN4.x will pretty much ignore these rules. There is a much bigger problem, unfortunately: The application of padding to hyperlinks.

For some reason, NN4.x seems to assume that any element that's been given padding (or borders or margins) must be a block-level element. Thus, the styles set up here will cause hyperlinks to break up whatever element they're found within and possibly overlap other pieces of the document. So you definitely can't have NN4.x seeing the padding declaration in your CSS.

Here's the solution: Take the Navigator-unfriendly styles and move them into a separate file (call it adv-styles.css, for example). That would give you:

a:link, a:visited {padding: 1px 0.5em;}
a:hover {color: red; background: yellow;}
a:active {color: yellow; background: red;}
This leaves you with a somewhat pared-down style sheet:


Now all you have to do is import the styles you just removed.



Eric Meyer on CSS: Tricking Browsers and Hiding Styles

posted by grillcheese at 12:06 PM

0 Comments:

Post a Comment

<< Home

Posts

  • Writing Effective Use Cases An up-to-date guide t...
  • XHTML Primer XHTML: Guidelines All developers are...
  • Ulrich SchnaussA Strangely Isolated PlaceJust hear...
  • Soldier survives sniper attack During a routin...
  • The next UK Antarctic Base. BBC NEWS | Science/Na...
  • CSS.Styled.Form.Controls As you may or may not kno...
  • CSS Dropdowns Hybrid CSS Dropdowns: A List Apart
  • Katie Holmes: What are you thinkin'?This is my gue...
  • Romero (George, not the Ion Storm tool) George ...
  • daily dose of imagery Great quality images...from...

Radio/Podcasts

  • Pandora Radio
  • Slacker Radio
  • imeem
  • Digitally Imported Radio: Chillout
  • Last.fm: Ulrich Schnuass Simliar Artists
  • Onion Radio News
  • Podcast: Amped New Music Weekly
  • solipsistic NATION
  • Podcast: Learn Spanish
  • Podcast: Learn Chinese
  • Podcast: Marketplace
  • Podcast: Amateur Traveler
  • Podcast: Current Events

Video

  • Hulu
  • vimeo
  • Joost
  • Filmz.tv
  • The Office
  • ABC

Reading

  • Tab's Blog
  • G-Rant Blog
  • Techcrunch
  • Valleywag
  • Pulse 2.0
  • Digg
  • Google Reader