Adam Oliver

Clearfix

Ok, let’s start with one tip that I use in every web project of mine. Clearfix will become your best friend as soon as you start to use it. It has saved me many times and I only wish I had known about this eariler. So what does clearfix do? When you float something inside a containing div the div’s height will not work as you might think. The float does not seem to be contained within the div at all. Clearfix sorts this out by forcing some content after the div and forcing the div to be the height of the floating element. It’s very easy to use. Simply add a class of clearfix to any element containing a floated element and add the following lines of CSS to your stylesheet.

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}

Style the horizontal rule (hr)

HTML should not be used for presentation but sometimes you’ve just got to use a horizontal rule.  Get rid o the default formatting using the following css or similar:

hr {
color: #000;
background-color: #000;
height: 4px;
border: none;
}

CSS Hack for IE 

Sometimes Internet Explorer just won’t render your CSS the way you expect.  In those cases you can use a dirty little CSS trick which will only be recognised by IE. Use an underscore before any CSS property to hide it from other browsers.

.class {
width:100px;
_width:110px;
}

Remove the outline from links

I always use an h1 tag to display a company logo on a website and use an image replacement technique to replace the h1 text with an image of a logo. Doing this causes two visual problems. Let’s start with the image replacement html and CSS:

HTML

<h1 id="logo"><a href="index.html">Company Name</a></h1>

CSS

h1#logo a {
display:block;
width:250px;
height:80px;
background:url(logo.gif) no-repeat;
text-indent:-999999px;
}

 
Ok, so using this technique forces the text way off to the left of the page and uses a background image to display the logo.  The two problems to fix here are the dotted line around the link (this just looks sloppy) and the fact that this goes way off to the left of the page.  two simple lines of CSS added to the logo anchor tag’s CSS will solve this:

overflow:hidden;
outline:none;

The first line ensures that the content is kept within the boundaries set and the second removed the horrible dotted line. Simple!

Double float margin in IE6

For a long time I simply thought that IE 6 simply couldn’t count until I came across this bug. When you have a floated element with a margin defined in the same direction of the float IE 6 will double the margin.
 

#sidebar {
float: left;
width: 300px;
margin-left: 10px;
}

IE6 will force the margin to be double it’s actual value, in this case to 20px - very annoying. Fortunately there is an easy fix. Simply add this CSS rule to the floated element:

display: inline;

Z-Index

z-index is something that positions elements on the page in the z-axis. It’s a stacking order from front to back which will allow you to place an element in front or behind another. Just make sure your position is not static for the elements you are indexing, make them positioned relatively or absolutely on the page. Then use a number to order the elements on the page. The lower the number the further to the back the element goes. The following code shows an example of this in action.

#topElement {
position:absolute;
top:0;
left:0;
z-index:100;
}

#bottomElement {
position:absolute;
top:0;
left:0;
z-index:0;
}

Transparency

Unfortunately transparency is not something that works with one CSS statement. It is possible, however in almost all modern browsers using the following CSS:

.transparent {
	filter:alpha(opacity=50); /* IE's proprietary filter for transparency  */
	-moz-opacity:0.5; /* For use with older Mozilla browsers like Netscape Navigator */
	-khtml-opacity: 0.5; /* Used for old versions of Safari */
	opacity: 0.5; /* The current standard. Supported by Firefox, Safari, and Opera */
}