1. Technology

Tips and Tricks Using CSS

Get Your Style Sheets Working Where Ever They are Viewed


Many people are reluctant to use CSS because they find it difficult to use because it seems to respond differently in different browsers. The good news is: if you design primarily for modern browsers (Chrome, Firefox, Safari, Opera, and Internet Explorer 9 and up) this isn’t really a problem any more. All of these browsers handle most CSS properties and are adding new features and functionality from CSS3 all the time.

But if you still have to design for older browsers (IE 7 and 6 primarily, although IE 8 has some issues too.) you may still find CSS challenging. In this article you’ll find some tips for solving some of the common problems with these browsers.

CSS Margin Problems

Older versions of Internet Explorer (version 7 and lower) don’t handle the box model correctly, and so this can result in margins that are off compared to how they look in modern browsers.

To fix this you can either ignore it (as it’s only going to happen in really old browsers) or fix it using a box model hack. The hacks listed on that web page help you get IE 6 and 7 to show the same margins as other browsers. You can also use conditional comments to hide CSS specific to IE 7 and lower:

<!--[if lte IE 7]>
<link href="ie7-styles.css" rel="stylesheet">

CSS Drop Caps

The most logical way to do a drop-cap would be to use the first-letter pseudo-element. To set a drop-cap using this, you might write a style like this. Type the following and place it in a STYLE element at the top of your web page:

p.introduction:first-letter {
  font-size : 300%;
  font-weight : bold;
  float : left;
  width : 1em;

Then paste this into the body of your document:

<p class="introduction">
This paragraph has the class “introduction.” If your browser supports the pseudo-class “first-letter,” the first letter will be a drop-cap.

But some older browsers don’t support this pseudo-class. You can still fake it in some browsers by using the SPAN element around the first letter in the paragraph. For example:

<span style="font-size : 200%; font-weight : bold; float : left; width : .75em;">

Try pasting the following into your HTML editor:

<span style="font-size : 200%; font-weight : bold; float : left; width : .75em;">T</span>his paragraph has a drop-cap on the first character that should be visible in most every browser.<br clear="all" />

Or this:

<span style="font-size : 200%; font-weight : bold; float : left; width : .75em; background-color : #cc0000; color : #cccccc;">Y</span>ou can even play with other style attributes on your drop-cap. Just remember to test in as many browsers as you can, so you’re not surprised by how your page looks. <br clear="all" />

If you set those styles as CSS classes, you can use conditional comments like above to only style the SPAN element in older browsers.

Don’t Be Afraid to Expermiment with CSS

Style sheets give you a lot of power and flexibility in your web page designs. Experiment with the various CSS properties and how they work in the browsers, and you’ll find that your only true limit is your imagination.

If You Have to Support Extremely Old Browsers

Netscape 4 and Internet Explorer 6 are both so old that they are hardly ever used. But if you need to support them, the following tips can help you out.

Netscape 4 Turns CSS Off with JavaScript

If you are in the unfortunate position of having to design for an extremely old browser like Netscape 4, there is one more thing you should check: that CSS is turned on.

If you view your pages in Netscape 4.x, and the styles aren’t showing up at all, you’ll need to check your browser preferences. The frustrating part of this is that even if you have checked "Enable style sheets" (in Advanced preferences), if you have disabled JavaScript Style Sheets will also not work.

The challenge with this is that if your customers have also turned off JavaScript in Netscape 4, there is nothing you as the web designer can do to get it turned back on. Instead, you should look into gracefully degrading the pages for Netscape 4 users so that the content is still there, but it doesn’t rely on the CSS and JavaScript features that might be disabled.

Netscape 4 Margins vs. IE 6 Margins

Netscape 4 doesn’t handle margins in the same fashion as Internet Explorer 6. But it’s still possible to get the same effect using different style tags on the same document. And you don’t have to use JavaScript for browser detection. All you need do is use the @import and cascading to your advantage.

For example, typically, when you use a header tag (h1-h6), there is a huge amout of space between the header and the following paragraph. But if you use margin tags to fix this you will need to write two different styles to get it to work correctly in Netscape 4 and Internet Explorer.

In Internet Explorer:

h2 { margin-bottom : 0; } p { margin-top : 0; }

In Netscape 4

h2 { margin-bottom : 0; } p { margin-top : -1em; }

Then, because Netscape 4 doesn’t recognize the @import statement, but does recognize the <link> tag, you can use this to your advantage. First place the Netscape properties in a <link> file:

<link href="netscape-styles.css" rel="stylesheet" type="text/css">

Then place the Internet Explorer styles in an @import file (be sure that it follows the Netscape styles):

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

Netscape 4 will read only the first style sheet, and thus will render the text correctly. Internet Explorer will read both style sheets, but will use cascading rules to determine which should be used. As long as the imported styles come after the linked styles, the imported style sheet will "win" and those will be used.

CSS Background Colors

It’s easy to add background colors to paragraphs using CSS. Paste the following into your web page:

<p style="background-color : #cccccc;">
This paragraph should have a grey background color.

If you just add a simple style property, Netscape will extend the background to the edges of the “box” that is the paragraph. You need to tell Netscape that there is a border, but if you set the border property to none, the border will not display.

<p style="background-color : #cccccc; border : none;">For example, in this paragraph.</p>

Stay up-to-date by reading the Most Current Articles on Web Design and HTML.

©2014 About.com. All rights reserved.