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.

WordPress error: Could not create directory. /public_html.

If your WordPress automatic update fails with the error:

An error occured while updating WordPress: Could not create directory. /public_html.

1) Log into your server
2) Delete the folder ‘upgrade’ found in the wp-content folder
3) Remake the ‘upgrade’ folder (mkdir upgrade)
4) Change the permissions to 777 (chmod -R 777 upgrade)

Done!

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!

Use pixels or em for font sizing

Most browsers support resizing of text that has been defined in pixels but, as you would expect, IE 6 does not.

This means that to make your site 100% IE6 compatible you need to use another type of font sizing – ems or percentages, for example. The problem there is that each browser has it’s own starting size for text and 1em in browser A might not be the same as 1em in browser B and when your client/boss asks for 12pt text that doesn’t necessarily mean it will be 1.2em.

The quickest and easiest way to resolve this is by setting the body font-size to 62.5%.

body { font-size: 62.5%; }

This then sets your base font size to 10 pixels and that way, 1em is equal to 10 pixels.