An update on selector support

We’ve recently been writing some software for a client that only needs to be accessible on IE7 and Firefox and so I thought I would take the opportunity to use a few selectors that lack of IE6 support would usually prohibit me from doing.

With the advent of IE7 you can now use the child, sibling and attribute selectors – as well as a few others.While IE6 still has a large market share it’s not advisable to use these methods for the core functionality of your site, but why not use them to add additional ‘treats’ for users of more modern browsers? It’s a great way to get used to the concept and application of them.

For a full breakdown of browser support for various css tricks try http://www.quirksmode.org/css/contents.html

Bringing floats back into the flow

As a rule, if you place floated elements inside an unfloated element then the containing unfloated element will not expand.

If you’re having trouble getting an unfloated element to grow to the size of the floated elements it contains there is a very simple method to get it to start growing…

overflow:auto;

Assigning the above property to the containing element causes it to grow with its contents – even if the content is floated. 

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.