Ie Screwing Up <div> Alignments

[kaseytraeger]

Hello all you TCH peeps! 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: htt*://www.positioniseverything.net/explorer/threepxtest.html

 

I've got a similar problem, but the difference is that IE is creating a seven pixel jog 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 htt*://www.pudgypuppy.com/testblog.htm. I used the standard Movable Type install and am using the default CSS file that was installed when I installed MT. I've changed two basic things about the CSS file.

 

(1) I consolidated the many different font characteristics that were originally specified for an individual element in a manner like this:

>.banner{
font-size: medium;
font-weight:bold;
font-family: palatino, arial, sans-serif;
}

into the more compact form of:

>.banner{
font: bold medium palatino, arial, sans-serif;
}

 

(2) I removed background colors on many of the items and changed the background colors on others.

 

So, now that I'm done with the preliminary stuff, here are the two problems.

 

PROBLEM #1

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. I've given the column a grey background and have given the calendar and each of the other <div>s a background color of pink. If you open the page htt*://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.

 

PROBLEM #2

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, I'll be attaching a picture of the correct layout, as taken from Firefox, in a post immediately following this one.

 

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.

 

Jim (btrfld), if you're out there today reading these posts, I think this one is right up your alley!

 

Thanks, everyone! I look forward to hearing your ideas, suggestions and solutions (hopefully!)

[kaseytraeger]

Here is the screen shot of the correctly-laid out page, as displayed in Firefox.

[btrfld]

Hi Kasey. You certainly do come up with tasty issues.

 

So far I can tell you that the content <div> is not the problem. It actually appears in exactly the same place in Firefox, Opera7 and IE6. Guess the issues must be on the links <div>.

 

I have to go out for an hour, but I'll get back at it later tonight.

 

Thanks for the challenge!

Jim

[kaseytraeger]

Jim,

 

You were absolutely right. The problem wasn't with the #content <div> at all.

 

The solution to this reaffirms my belief that tables are big headaches ...

 

The calendar is placed inside a table. I changed the table's default cellspacing from 4 to 3, and that fixed the problem. (By the way, I wasn't quick enough to see this one by myself...I had help from a little birdie!)

 

Either way, I'm glad I've finally got this one straightened out!

 

Have a wonderful evening

[DarqFlare]

I love tables.

 

I am so used to them and efficient with them that I refuse to learn to work with divs... lol

[Lucas]

If I'm understanding you correctly, the problem that you're seeing is commonly called the peekaboo bug. It is a bug in IE that is a problem with the default style sheet that comes with MT. Do a search on MT's forum and you'll find all the info in the world about it. I never understood why MT would come with a "broken" style sheet. Yeah, it's IE that's messed up, but when most people use it, it makes MT not completely functional "right out of the box" if you will.

 

It's been a couple of months since I had to deal with it, but I think it is some sort of a problem with the "position: absolute" attribute. Browsing through my style sheet (a mod of the MT default) I see it in the container element, but it may be elsewhere as well. Most of the workarounds I tried broke too many things once they fixed the problem. What I found worked great was to add

 

line-height: 1.1;

 

to the element body

 

For some reason, explicitny giving that a value tricks IE into working right, and that is a value that is close to the default that is usually used so everything looks normal.

There are a bunch of other ways to trick IE into working right if that doesn't do the trick. Check out MT's forums.

 

The other possibility is to tell all of your visitors to just use mozilla....