This is my first posting of a question here at the Site Point forums. I'm a bit nervous because I don't want to appear stupid, but I figure that I'm not going to learn anything if I don't stick my neck out once in a while. For those of you who are CSS gurus, I've got a puzzling IE bug for you.
Many of you will probably be familiar with the Three Pixel Text-Jog bug in Internet Explorer. If not, you can read about it here: www.positioniseverything.net/explorer/threepxtest.html
I've got a similar problem, but the difference is that IE is creating a seven pixel jog to the left in one div and is making another div seven pixels wider than wanted.
The page in point comes directly from my newly-created blog. You can find it at www.pudgypuppy.com/testblog.htm. This blog uses Movable Type. When I installed MT, I used the standard Movable Type install. I am also using the default CSS file that was installed when I installed MT. I've changed only two basic things about the CSS file.
Change #1: I consolidated the many different font characteristics that were originally specified for an individual element in a manner like this:
into the more compact form of:
font-family: palatino, arial, sans-serif;
Change #2: I removed background colors on many of the items and changed the background colors on others.
font: bold medium palatino, arial, sans-serif;
So, now that I'm done with the preliminary stuff, here are the two problems.
The calendar located in the upper left corner of the page is seven pixels wider than any of the other <div>s in that column. It essentially "overshoots" the other <div>s by seven pixels on the right-hand side. I've given the column a grey background and have given the calendar and each of the other <div>s nested within the grey column a background color of pink. If you open the page www.pudgypuppy.com/testblog.htm in Internet Explorer, you can see what I'm talking about. It may not be completely apparent, so I've taken a screen shot of the page, zoomed in, and attached the resulting graphic to this message.
How can I fix this problem so that the calendar is the exact same width as the rest of the <div>s? This problem only happens in IE. If I view the same page in Firefox, the calendar and all the other <div>s are the exact same width. (You can see this in the second graphic I've attached to this message.)
The container that holds all of the blog text, called #content in the stylesheet, is shifted seven pixels to the left of where it should be. Again, this problem is only present in IE. In Firefox, it lines up perfectly to the right of the grey column. I thought I could fix this using the IE Three Pixel Jog bug fix, but after reading through the solution for that problem, it doesn't appear to work for <div>s, but rather, it works on text inside a <div>. My problem is not with the text, it's with the background color and the exact position of the <div>. I want it to lay immediately to the right of the grey-colored column.
For ease, as mentioned earlier, I'm also attaching a picture of the correct layout, as taken from Firefox, immediately after the picture of the calendar "overshooting" the right hand side of each of the other <div>s.
So if anyone out there has seen this behavior before and can give some insight, that would be absolutely wonderful. Note that none of the <div>s on this page are floated, so I don't think the problem is with floats.
Also, I think this problem is specific to IE6. I've tried several hacks that are targeted at IE5.x, and none of them solved the problem, so my guess is that this issue only lies with IE6.
I hope I've described this problem adequately. If you have any questions, please add a reply to this post. I'll be pleased as punch to be more descriptive.
Thanks, everyone! I look forward to hearing your ideas, suggestions and (hopefully) solutions!