Centering the page

You can centre your content in the middle of the page by setting it’s ‘left’ property to 50% and then setting the ‘margin-left’ to minus half of the content’s width. Taking the example of a rectangle:

#content{
position:relative;
width:500px;
height:400px;
left:50%;
margin-left:-250px;
}

Here we’ve moved the rectangle so that its left edge starts exactly in the middle of the page. We then use the margin-left attrribute to move it back to the left by half of the rectangle’s width – leaving it dead in the center.

This effect can also be achieved using only the ‘margin’ attribute and setting this to margin:0 auto; (this has set the top and bottom margin to 0 and the left and right to auto).

Unfortunately this won’t work in IE6 or earlier but we can fix this by also adding the attribute text-align:center; to the rectangle’s parent element (this could be ‘body’, for example). This will also have the effect of centering all of the text inside our rectangle so don’t forget to set ‘text-align’ back to left if that’s how your text is meant to be.

Cross browser transparency

Using transparency on your site can often help to bring the page to life. While the CSS 3.0 specification for opacity/transparency isn’t supported by all browsers they often have their own proprietary declarations.

#my-element{
opacity: 0.5;
-moz-opacity: 0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}

Using the example above we have successfully targeted Safari and Firefox 1.5+, earlier Firefox versions and Internet Explorer, respectively.

Double margin in IE6

When an element is floated and also has a margin set IE6 likes to double that margin. This happens when the element is floated left and has a left margin or floated right and has a right margin. Luckily this is one of the easier Internet Explorer bugs to fix; you can even do it without any hacks.

Simply set the misbehaving element to display:inline; and it will start behaving as expected.

What about when you need a different mode of diplay, for example display:none;? In this case you’ll have to use a hack like so:


margin-left:20px;
_margin-left:10px;


The _ is so that only IE6 picks it up. In this example all browsers set the element’s left margin to 20px while IE sets it to 10px and then doubles it (20px).