Using the power of CSS we’ll create the following box with round corners, without an <img> tag in sight:

The problem with CSS

Historically the main problem with using CSS has been lack of browser support. This is no longer the case as version 5 browsers, which all have good support for CSS, now account for over 99% of browsers in use.

Instead, the problem is that browsers can sometimes interpret CSS commands in different ways, causing developers to throw their arms up in the air and switch back to pixel-perfect table layouts. Fear not though, as you learn more about CSS you’ll gradually start to understand the different browser interpretations and realise that there aren’t really that many.

How browser detection using CSS hacks works

The way browser detection using CSS hacks works is to send one CSS rule to the browser(s) you’re trying to trick, and then send a second CSS rule to the other browsers, overriding this first command. If you have two CSS rules with identical selectors then the second CSS rule will always take precedence.

Say for example you wanted the space between your header area and the content to have a gap of 25px in Internet Explorer, or IE as it’s affectionately known. This gap looks good in IE but in Firefox, Opera and Safari the gap is huge and a 10px gap looks far better. To achieve this perfect look in all these browsers you would need the following two CSS rules:

#header {margin-bottom: 25px;}
#header {margin-bottom: 10px;}

The first command is intended for IE, the second for all other browsers. How does this work? Well, it won’t at the moment because all browsers can understand both CSS rules so will use the second CSS rule because it comes after the first one.

By inserting a CSS hack we can perform our browser detection by hiding the second CSS rule from IE. This means that IE won’t even know it exists and will therefore use the first CSS rule. How do we do this? Read on and find out!

Browser detection for Internet Explorer

To send different CSS rules to IE, we can use the child selector command which IE can’t understand. The child selector command involves two elements, one of which is the child of the other. So, html>body refers to the child, body, contained within the parent, html.

Using the example of the header margin, our CSS command would be:

#header {margin-bottom: 3em;}
html>body #header {margin-bottom: 1em;}

IE can’t understand the second CSS rule due to the html>body CSS command so will ignore it and use the first rule. All other browsers will use the second rule.

Browser detection for Internet Explorer 5

It may seem strange at first to send different CSS rules to different versions of a browser, but in the case of IE5 it’s very necessary. This is due to IE5′s misinterpretation of the box model. When specifying the width of an element in CSS, padding and borders aren’t included in this value. IE5 however, incoporates these values into the width value causing element widths to become smaller in this browser.

The following CSS rule would result in a width of 10em for all browsers, except IE5 which would give it a width of just 5em (IE5 would incorporate two sets of padding and border, on both the left and right, when calculating the width):

#header {padding: 2em; border: 0.5em; width: 10em;}

The solution to this problem? Perform browser detection and send a different CSS rule to IE5:

#header {padding: 2em; border: 0.5em; width: 15em; width/**/:/**/ 10em;}

IE5 will use the first width value of 15em, 5em of which will be taken up by the two sets of padding and border (one each for the left and for the right). This would ultimately give the element a width of 10em in IE5.

The 15em value will then be overridden by the second width value of 10em by all browsers except IE5, which for some reason can’t understand CSS commands with empty comment tags either side of the colons. It doesn’t look pretty but it does work!

Browser detection for Internet Explorer on the Mac

Quite simply, IE on the Mac does strange things with CSS. The browser’s become somewhat obsolete as Microsoft aren’t going to be bringing out an updated version. As such, many web developers code their CSS-driven sites so that the site works in IE/Mac, although it may not offer the same level of advanced functionality or design. Provided IE/Mac users can access all areas of the site this is seen as a suitable way of doing things.

To hide a command using the IE/Mac CSS hack² is simple, and involves wrapping a set of dashes and stars around as many CSS rules as you like:

/* Hide from IE-Mac \*/
#header {margin-bottom: 3em;}
#footer {margin-top: 1.5em;}
/* End hide */

IE/Mac will simply ignore all these commands. This CSS hack can actually be quite useful if there’s a certain area of the site not working properly in IE/Mac. If that section isn’t fundamental to being able to use the site, you can simply hide it from IE/Mac like so:

#noiemac {display: none}

/* Hide from IE-Mac \*/
#noiemac {display: block;}
/* End hide */

The first CSS rule hides the entire section assigned the noiemac id (i.e. <div id="noiemac">). The second CSS rule, which IE/Mac can’t see, displays this section.

Browser detection for IE 4 and Netscape 4

Version 4 browsers have limited and somewhat erratic support for CSS. Making a CSS layout in these browsers, whose market share has now slipped well below 1%, can be extremely challenging. It’s become common practice nowadays to completely hide the CSS file from version 4 and earlier browsers. This can be achieved using the @import directive to call up the CSS document:

<style type="text/css">@import "styles.css";</style>

Version 4 (and earlier) browsers will display a non-styled version of the site as they can’t understand this @import directive.

Checking your site in the different browsers

At the time of writing, the major Internet browsers include IE5, IE6, Firefox, Opera and Safari. (Check out TheCounter.com³ for up-to-date browser statistics.) You can download all these browsers, and a number of more obscure ones, at the Evolt browser archive⁴.

Ideally you should check your site in all these browsers, on both PC and Mac (except IE6 and Safari, which are only available on PC and Mac respectively). If you don’t have access to a Mac you can get a screenshot of your site on Safari by running it through Dan Vine’s iCapture⁵ or you can pay to use Browsercam⁶ which offers a more extensive screen capturing service.

Conclusion

On the whole, modern browsers have very good support for CSS – certainly good enough for you to be using CSS to control layout and presentation. Sometimes however, certain page elements will appear differently in different browsers. Don’t worry too much if you don’t know the reason why – if you can fix it up with these CSS hacks then your web pages should look great across all browsers!

Our article, Ten CSS tricks you may not know1 has proven to be such a success that we decided it was time to offer you ten more CSS tricks that you may not know.

Nearly all HTML elements are either block or inline elements. The characteristics of block elements include:

• Always begin on a new line
• Height, line-height and top and bottom margins can be manipulated
• Width defaults to 100% of their containing element, unless a width is specified

Examples of block elements include <div>, <p>, <h1>, <form>, <ul> and <li>. Inline elements on the other hand have the opposite characteristics:

• Begin on the same line
• Height, line-height and top and bottom margins can’t be changed
• Width is as long as the text/image and can’t be manipulated

Examples of inline elements include <span>, <a>, <label>, <input>, <img>, <strong> and <em>.

To change an element’s status you can use display: inline or display: block. But what’s the point of changing an element from being block to inline, or vice-versa? Well, at first it may seem like you might hardly ever use this, but in actual fact this is a very powerful technique, which you can use any time you want to:

• Have an inline element start on a new line
• Have a block element start on the same line
• Control the width of an inline element (particularly useful for navigation links)
• Manipulate the height of an inline element
• Set a background colour as wide as the text for block elements, without having to specify a width

2. Another box model hack alternative

The box model hack² is used to fix a rendering problem in pre-IE 6 browsers on PC, where by the border and padding are included in the width of an element, as opposed to added on. A number of CSS-based solutions have been put forward to remedy this, so here’s another one which we really like:

padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;

The first width command is read by all browsers; the second by all browsers except IE5.x on PC. Because the second command comes second it takes precedence over the first – any command that comes second will always override a preceding command. So, how does all this work?

By placing empty comment tags (/**/) before the colons, IE5.0 will ignore the command. Likewise, by placing these empty comment tags after the colon, IE5.5 will ignore the command. By using these two rules in conjunction with each other, we can hide the command from all of IE5.x.

3. Minimum width for a page

A very handy CSS command that exists is the min-width command, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page.

Unfortunately, IE doesn’t understand this command, so we’ll need to come up with a new way of making this work in this browser. First, we’ll insert a <div> under the <body> tag, as we can’t assign a minimum width to the <body>:

<body>
<div id="container">

Next we create our CSS commands, so as to create a minimum width of 600px:

#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}

The first command is the regular minimum width command; the second is a short JavaScript command that only IE understands. Do note though, this command will cause your CSS document to invalidate so you may prefer to insert it into the head of each HTML document to get round this.

You might also want to combine this minimum width with a maximum width:

#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}

4. IE and width & height issues

IE has a rather strange way of doing things. It doesn’t understand the min-width and min-height commands, but instead interprets width and height as min-width and min-height – go figure!

This can cause problems, because we may need boxes to be resizable should more text need to go in them or should the user resize text. If we only use the width and height commands on a box then non-IE browsers won’t allow the box to resize. If we only use the min-width and min-height commands though then we can’t control the width or height in IE!

This can be especially problematic when using background images. If you’re using a background image that’s 80px wide and 35px high, then you’ll want to make sure that the default size for a box using this image is exactly 80 x 35px. However, if users resize the text then the box size will need to expand gracefully.

To resolve this problem, you can use the following code for a box with class="box":

.box
{
width: 80px;
height: 35px;
}

html>body .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}

All browsers will read through the first CSS rule but IE will ignore the second rule because it makes use of the child selector command³. Non-IE browsers will read through the second one and will override the values from the first rule because this CSS rule is more specific, and CSS rules that are more specific always override those that are less specific.

5. Text-transform command

One of the lesser known, but really useful CSS commands is the text-transform command. Three of the more common values for this rule are: text-transform: uppercase, text-transform: lowercase and text-transform: capitalize. The first rule turns all characters into capital letters, the second turns them all into small letters, and the third makes the first letter of each word capitals.

This command is incredibly useful to help ensure consistency in style across an entire website, particularly if there a number of content editors. Say for example your style guide dictates that words in headings must always begin with capital letters. To ensure that this is always the case, use text-transform: capitalize. Even if site editors forget about the capitalisation, their mistake won’t show up on the website.

It’s also preferable to use text-transform: uppercase to capitalise words, as screen readers may pronounce shorter words in capital letters as acronyms. A great example of this is ‘CONTACT US’, which is pronounced as ‘contact U S’ by some screen readers.

6. Disappearing text or images in IE?

IE has a very strange bug where text or background images sometimes disappears from sight. These items are still actually there, and if you highlight everything on screen or hit refresh they’ll often re-appear. Kind of strange, huh?

This problem mostly occurs on background images and on text next to a floated element. To remedy the problem, simply insert position: relative into the CSS command for the disappearing element, and for some bizarre reason that’ll usually fix the problem. If this doesn’t work (it sometimes doesn’t), assign a width to the offending element in the CSS and that should fix the problem.

7. Invisible text

Sometime you may actually want to make text invisible. Invisible text can be especially useful for screen reader users, perhaps to assign a label to a form item or insert a heading ahead of a section. Don’t want to change the visual appearance by inserting these? Make them invisible and no one using a visual browser knows that they’re there.

You may also want to make text invisible if using a print or handheld CSS file, as some information may not need to be displayed on either of these mediums (see below for more on this).

To make text invisible you can use display: none – easy! This works fine for hiding text from handhelds (if CSS is supported) and printed web pages, but isn’t so great for many screen readers. Screen readers are now becoming too clever for their own good, and some will actually ignore the any text that has the rule display: none assigned to it.

For screen readers users therefore, a new approach is needed: position: absolute; left: -9000px. This basically takes the text and positions it 9000px to the left of the left edge of the screen, essentially making it invisible.

8. CSS document for handhelds

A separate CSS document can be created for PDAs and mobile phones, and only activated when one of these devices is being used to access your site. More and more websites are creating separate CSS documents for printing⁴, so web pages automatically become print-friendly when users choose to print them. You can also do the same for handheld devices.

The following command is used to call up the CSS document for handhelds:

<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld" />

CSS commands in the handheld CSS file override any equivalent commands in the main CSS document. So, what commands should you place in this file?

Ideally, you want handheld web users to avoid having to scroll across. To test this, open up your website in a regular browser window and resize it to 150px in width. Then, open up your main CSS file and insert some new commands at the very bottom of the document. The commands you place here should adjust the layout of the website so that it doesn’t require horizontal scrolling at a 150px width. Then, open up a new document, cut and paste these new commands over, and save it as handheldstyle.css (or whatever name you want to give it).

What your website offers to handheld web users should be quite different to what it offers on traditional web browsers, as the user experience is quite different. For further information, a book such as Handheld Usability⁵ is a great read.

9. 3-d push button effect

Back in the early days of the web, 3-d buttons that appeared to become pushed in when moused over were all the rage. At that time, this could only be achieved through images and JavaScript, but now with the advent of CSS we can go all retro and re-create this effect:

Example link⁶

The main CSS commands you’ll need are:

a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}

a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

Aside from these commands, you can insert any other commands to achieve the desired presentation effect – the only limit is your imagination!

10. Same navigation code on every page

Most websites highlight the navigation item of the user’s location in the website, to help users orientate themselves. This is a fundamental requirement for basic usability, but can be a pain as you’ll need to tweak the HTML code behind the navigation for each and every page. So can we have the best of both worlds? Is it possible to have the navigation highlighted on every page, without having to tweak the HTML code on each and every page? Of course it is…

First of all, you’ll need to assign a class to each navigation item:

<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="contact">Contact us</a></li>
</ul>


You’ll then need to insert an id into the <body> tag. The id should be representative of where users are in the site and should change when users move to a different site section. When in ‘Home’ it should read <body id="home">, in ‘About Us’ it should be <body id="about"> and in ‘Contact Us’ <body id="contact">.

Next, you create a new CSS rule:

#home .home, #about .about, #contact .contact
{
commands for highlighted navigation go here
}

This basically creates a rule that only takes effect when class="home" is contained within id="home", and when class="about" is in id="about" and class="contact" is in id="contact". These situations will only occur when the user is in the appropriate site section, seamlessly creating our highlighted navigation item.

Once IE6 becomes outdated you’ll be able to use the commands outlined in this article. Actually, that’s not strictly true – provided that your website doesn’t rely on these commands and is still legible in IE6 and before then there’s no problem using them.

Child selector

Despite Internet Explorer 6 not supporting the CSS child selector, it’s actually been used a lot as a way of hiding CSS commands from Internet Explorer. This is no longer possible as IE7 now understands the child selector. So, what is the child selector? Well, imagine the following HTML structure:

<div><p><span>Text goes here</span></p></div>

In the above example, the <p> is a child of the <div> and the <span> is a grandchild of the <div>. We can make the text in the <span> red by using the following CSS rule:

div span {color: red;}

This basically means that the contents of the <span> will be red, provided that the <span> is nested within a <div>. That <span> could be a child, grandchild, great-grandchild etc. of the <div>.

If we were however to use the following CSS code:

div>span {color: red;}

…Then the text within our <span> wouldn’t turn red. This is because we’ve inserted the child selector between the div and span (the greater than sign), which basically means that our span has to be a child of a div. In the above example, the <span> is a grandchild of the <div>.

So, by using the child selector, we can assign rules to any HTML element that’s a child (and not a grandchild) of another element. Let’s say for example we want a top margin to be assigned to the first <div> in our body, but not to any others. Without the child selector we would be forced to assign a class or id to this <div> and reference that class or id in our CSS command. Now though, we can reference this <div>, and only this <div>, without the need for a class or id through the CSS:

body>div {margin-top: 10px;}

Using the child selector to hide commands from IE

Historically, the child selector has been used to hide CSS commands from IE. Simply by placing html>body in front of any CSS command IE will ignore it:

html>body .foo {CSS commands go here;}

This works because <body> is always a child of <html> – it can of course never be a grandchild or great-grandchild of <html>.

Now that IE7 understands the child selector, you have to insert an empty comment tag in directly after the greater than sign. IE7 will then not understand this selector (who knows why!?) and will therefore totally ignore this CSS command:

html>/**/body .foo {CSS commands go here;}

Adjacent selector

The adjacent selector is another extremely useful CSS selector that up until now Internet Explorer hasn’t understood. Fortunately, IE7 does understand it. The adjacent selector basically allows you to reference an HTML element that’s adjacent to another element:

blockquote+p {margin-top: 0;}

The above CSS code basically says that any paragraph that’s preceded by a quote shouldn’t have a top margin. This is useful as you may always wish to cite the person making the quote in a paragraph after the quote and may want to get rid of the space between the paragraph and quote.

Another great example of when you may use the adjacent selector is in horizontal lists. Often, you may want to format the first item slightly differently to the other items in the list. So, if you wanted to assign a left border to each navigation item except for the first, you could use this CSS code:

li+li {border-left: 1px solid black;}

This basically means that any <li> that follows another <li> (i.e. all of them except the first) should have a left hand border.

First-child pseudo class

Although there are still a number of pseudo classes⁸ IE7 doesn’t understand, the first-child pseudo class is one that it does now support. Again, this is a good news as this allows us to format the first HTML element differently in any given section without having to assign it a class or id. So, for example, say you wanted the first paragraph in the content area to never have a top margin, you could use this CSS command:

#content p:first-child {margin-top: 0;}

Conclusion

Internet Explorer 7 is certainly an improvement on Internet Explorer 6, in terms of CSS. A very large number of CSS bugs have been fixed and IE7 now supports more CSS commands. There’s still a very long way to go though and there remains a large number of CSS commands IE still doesn’t understand – let’s hope it catches up soon!

CSS is based on a set of design principles :