CSS3 in All Browsers – Rounded Corners, Drop Shadows, Glows and Gradients

CSS3 supports a bunch of nice new CSS features, including rounded corners, drop shadows, glows, and gradients. However, different CSS vendors will use different prefixes to standard CSS3 features while still in an ‘experimental’ stage. This means you need multiple lines to accomplish the one CSS feature, to target all the different browsers. Below is a bunch of CSS that will give you these CSS features in as many browsers as possible (yes, including older versions of IE).

(more…)

IE Only Stylesheets and CSS

Targeting IE with specific CSS, is always a awful task, however I thought I’d cover the two basic ways to do it: in HTML using conditional CSS and in stylesheets using hacks.

Conditional CSS

Conditional CSS lets you include a specific IE only stylesheet on your HTML page. It is the preferred way of having targeted IE specific CSS and is guaranteed to work with future version of IE, something that cannot be said for the hacks.

You can target:

  • A specific version <!--[if IE 6]>
  • All version below a specific version <!--[if lt IE 6]>
  • All versions above a specific version <!--[if gt 6]>
  • All version below or equal to a specific version <!--[if lte IE 6]>
  • All version above or equal to a specific version <!--[if gte IE 6]>

Let’s look at including a stylesheet only for IE6 in the <head> element.

  • Option A – Using the style block
    <!--[if IE 6]>
    <style>
    	/* Magical IE 6 CSS goes here */
    	background-color: red;
    </style>
    <![endif]-->
  • Option B – Including a Stylesheet
    <!--[if IE 6]>
    	<link href="ie6.css" rel="stylesheet" type="text/css"/>
    <![endif]-->
    

In Stylesheet Hacks

In Stylesheet hacks work within a CSS file. They let you target a specific block of styling, or a specific line in your file.

Line Hacks

Line hacks allow you to target versions of IE with a single link of CSS.

  • IE 8 only
    background-color: red\0/;
  • IE 8 and below
    background-color: red\9;
  • IE 7 and below
    *background-color: red;
  • IE 6 only
    _background-color: red;

Block Hacks

Block hacks let you use the element selectors to target versions of IE. Obviously this lets you target multiple lines all at once

  • IE-7 only
    *+html #div { 
    	background-color: red;
    }
  • IE 6 only

    * html #div { 
    	background-color: red;
    }

Best Clearfix for All Browsers (IE6+)

Gone are the days of putting your clearfix as a separate div, this is the simplest CSS clearfix that works in all browsers (including IE6).

.group:before,
.group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

How to Use It

Say we have some HTML that looks like this:

<div id="container">
    <div class="floated">content</div>
    <div class="floated">content</div>
    <div class="floated">content</div>
</div>

clearfix-pre-group

The problem is easy to see – the #container isn’t wrapping around the floated elements. Why? Floated elements are removed from the normal flow of the document, so the #container doesn’t know they are there. To fix this, we can add in our .group clearfix to the #container.

<div class="group" id="container">
    <div class="floated">content</div>
    <div class="floated">content</div>
    <div class="floated">content</div>
</div>

clearfix-post-group

And voilà, our #container now wraps around our floated elements.

Thanks to Nicholas Gallagher for this great clearfix.

How To Vertically Center an Image in a DIV (All Browsers)

Horizontally centering in CSS has always been fairly trivial, but vertical centering is another story. So here are two methods guaranteed to work across all browsers (including IE6) for vertically centering an image.

container-img

Method 1: The Line Height Method

This method involves setting the line-height property in css, to be the same as the containers height. It works because an image is only considered to be one line, and by setting the image’s vertical align property, we can make it sit in the middle of the line.

line-height

Requirements:

  • A fixed height container (e.g. 200px)
  • Any size image
  • A container taller than the image

Browsers:

All browsers (IE6+)

The Code

<div id="container">
    <img src="myimage.jpg" alt="image" />
</div>
#container {
    height: 200px;
    line-height: 200px;
}

#container img {
    vertical-align: middle;
}

 Method 2: The Absolute Position + Negative Margins Method

The negative margins method is slightly trickier in terms of how it works, but the code is still super simple. Negative margins might seem like a hack, but they are perfectly valid CSS, in fact the W3C even say “Negative values for margin properties are allowed”. Negative margins work in 2 ways, when you apply a negative margin to the top/left margins of an element, it moves the element in that direction; applying them to the right/bottom margins pulls the subsequent elements towards the element. Seems tricky, but in practice its pretty simple. In this example, we are going to using an image thats 200px in height.

negative-margins-1

 

negative-margins-2

 

negative-margins-3Requirements

  • Any size container
  • Fixed height image

Browsers

All browsers (IE6+)

Code

<div id="container">
    <img src="myimage.jpg" alt="image" />
</div>
#container {
    width:960px;
    height:600px;
    position:relative; /* Set as position relative to the IMG will move relative to this container */
}

#container img {
    position:absolute;
    top:50%; /* Move the image down, so its top is half way down the container */
    margin-top:-100px; /* Move the image back up half its height */
}