Bug in ie6, favicons, comment overflow

Hi there,

I have been working on my wordpress site recently and finally succeeded to get it working reasonably well. However, there are still a few kinks I have noticed that I would be grateful for help to resolve. I decided to write one post with the three problems as opposed to three separate entries:

My site:

http://www.michaeldowney.co.uk/nikki

Problem one:

My favicon does not display in Internet Explorer 7. There seems to be some documentation on this problem, but I haven’t found a quick solution. Can anyone verify the problem and tell me how to solve it?

The code I am using in my header file is this:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

Problem two:

The comments overflow in all browsers. This is another documented problem, and one I not found a solution for. When somebody goes to write a comment, the text goes out of the box so you cannot see what you are typing (only in Firefox), and when posted, it flows across the whole page, breaking the website (all browsers).

Problem three:

The page is broken in Internet Explorer 6. This has something to do with the way I’ve set up the margins I think, but odd because both Firefox and IE7 can handle the code. Please verify by resizing the site. If it works correctly, the header image should resize and the columns change to one (the right hand column will shoot to the bottom of the page). In IE6, the column is at the bottom of the page to begin with, even when viewed at 1024×758 or greater. You can also view the problem by trying to post a comment – you will see the left hand column is cut off slightly.

I’m at a loss for how to fix this, as the code works in IE7 and Firefox… Here is the code I have inserted in the special IE6 css file:

#container {width: expression(document.body.clientWidth < 900? "650px" : document.body.clientWidth > 900? "950px" : "auto");}

#mainpicinner  {width: expression(document.body.clientWidth < 900? "560px" :
document.body.clientWidth > 900? "860px" : "auto");}

Basically it says that the header picture will resize when viewed under 900 pixels and expand to full over 900 pixels. This code is in the IE7 css file and IE6 css file.

For reference, here are the (what I believe to be) relevant sections in the main stylesheet for my site:

#container {float: none; display: block; margin:0 auto; overflow: hidden; width: 100%; min-width: 650px; max-width: 950px;}

.cols01 {float: right; display: block; width: 380px; padding: 0 20px 48px 20px;}
.cols02 {float: left; display: block; width: 460px; padding: 0 10px 48px 10px;}
.cols03 {float: left; display: block; width: 880px; padding: 0 10px;}
.center {text-align: center;}

.box01 {display: block; max-width: 900px; margin: 0 auto; clear: both;}

I believe it is possible to see my stylesheet with the webdeveloper tool bar in Firefox, correct? But if you need any more information, I will happily upload it or something.

That’s all then. I would really appreciate any help that can be given!