Set table caption location using CSS

If you use table captions on your site and want to be able to define the caption location there is a little used CSS rule called caption-location.

Internet Explorer puts the caption underneath the table, for example. If you want to put the caption above the table just add:

caption-side:top;

Now your table caption will sit at the top.

Make nth-child work in IE

Nth-child is one of the most useful pseudo classes that CSS has but the problem is it doesn’t work in any version of Internet Explorer prior to version 9. There are still a lot of people using IE7 and IE8.

Selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and advanced attribute selectors in Internet Explorer versions 6 to 8.

All you need to do is download the Selectivizr code and include it in your page like this:

<script type=”text/javascript” src=”[JS library]“></script>
<!–[if (gte IE 6)&(lte IE 8)]>
<script type=”text/javascript” src=”selectivizr.js”></script>
<noscript><link rel=”stylesheet” href=”[fallback css]” /></noscript>
<![endif]–>

The first line, where it says [JS library] refers to one of the common JavaScript libraries. If you’re not already using a JavaScript library, you’ll need to choose one of the following:

• jQuery
• dojo
• Prototype
• Yahoo
• DOMAssistant
• Mootools
• NWMatcher

And that’s it. You can now start putting advanced selectors like nth-child in your CSS and they’ll just work!

Fix all IE CSS problems?

Quick one today for anyone experiencing any number of Internet Explorer CSS bugs.

Check that you’ve put a Doctype – strict if possible – as that fixes lots of problems, particularly in Internet Explorer 7.

How to clear a float

Say you have three divs, A, B & C.

Div A is a container for B & C and you would like B & C to sit side by side.

To get your divs B & C to sit side by side you need to float them, but as soon as you do that div A no longer expands to hold them. This is probably because you haven’t floated div A so the quickest fix is to float it.

However, there are many times you can’t do that – if you are using margin: 0 auto; on the container div, for example.

There are two further solutions:

1) Add overflow:auto; to the container div.

2) Add a clearing div after divs B & C.

Solution 1 can sometimes add scrollbars for reasons that aren’t immediately obvious. If that has happened to you try using solution 2.

Adding a clearing div is very easy. You simply add an empty div just before you close your container div (div A in this example) and set it to clear:both.

Couldn’t get much easier!

IE7 ignoring table cell widths

I’ve been creating a fluid layout design with some nested data tables in and needed some of my columns to line up. No problem at all in Firefox and Safari but IE7 didn’t want to play nicely – I tried width=, style= and class= but IE ignored it all.

After a bit of Googling I found http://vinhboy.com/blog/2009/02/13/ie7-table-width/

Basically, you just need to put…

table{ table-layout:fixed; }

…in your stylesheet and IE will start listening to your width declarations.

Hide the IE6 Image Toolbar (save, print, email, open my pictures)

Want to get rid of the toolbar that appears when you hover over an image in Internet Explorer 6? You can hide it on a site-wide or image-by-image basis as follows.

To hide it across your entire site, simply add this line to your header:

To hide it on each image:

Conversely, if you’ve turned it off in the header and want to display the toolbar buttons on just one image you can do:

IE6 list items not floating

Today I encountered an issue with a menu that was based on an unordered list (UL) where all of my floated list items were displaying 100% wide and then dropping a line. They should have been sitting next to each other, with each LI the size of the text it contained.

My code was:


#header ul{
float:left;
width:740px;
height:26px;
list-style-type:none;
}
#header ul li{
float:left;
height:26px;
}
#header ul li a{
display:block;
height:26px;
}


I use this structure all the time and so was surprised that today it had decided not to work. After fiddling with it for a while I made my anchor float and suddenly everything started working .


#header ul li a{
float:left;
display:block;
height:26px;
}


IE Conditional comments appear in the body

Using conditional comments to target the various Internet Explorer versions can be a great help but even they have their own bugs.

Recently, a conditional comment I was using to specify an IE specific stylesheet started coming out in the body of the page. The code was in the header but somehow the comment was being printed out on the page.

It all came down to a missing space in the comment. I was using:

<!--[if lte IE7]><link rel="......./><[endif]-->

When I should have been using:

<!--[if lte IE 7]><link rel="......./><[endif]-->

(note the space between IE and 7).

Paragraph width collapsing in Internet Explorer

This is one that I struggled with for quite a while.

In most (good) browsers when you don’t specify a width for an element (p, span, a, etc.) it will grow to be as wide as its content.

Not so in IE. In Internet Explorer your paragraph with an unspecified width could end up looking like this:

Hello
this is
my test
paragraph

So far the only solution that I’ve found seems to be to play with the whitespace attributes. In IE7 using white-space:pre; will make your elements behave as they should. In IE 6 only white-space:nowrap; will fix it – obviously meaning that your text is all going to be on a single line (not good).

If anyone has a better solution I would be glad to hear it…

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.