IE7 beta wierdness

[Ghodmode]

I'm attempting to make a CSS-only 3-column layout based on "In Search of the Holy Grail" by Matthew Levine at A List Apart.

I haven't finished testing thoroughly, but I think I have it working well almost everywhere.

3columns

My third column is presenting some strange problems, but only in IE7. I don't know whether to chalk these up as bugs that will be fixed by the time IE7 goes gold, or look for the cause. I'm using version 7.00.5700.6 ...

[ol]
[li]With just a header (h1) in the div, the last two letters of the header appear below the center div as well as in the right column. Double-clicking on the header (to select the whole word) also selects those two letters at the bottom: screenshot 1[/li]
[li]Adding some more content seems to take the problem away, but if I comment out the paragraph, it still affects the page's layout. In this case, the "footer" div, below everything, seems to move up, but not the footer's content, which is also just a header (h1). I can tell because the footer's border moves up behind everything: screenshot 2.[/li]
[/ol]

Has anyone noticed these things before? Is it too soon to try to build pages that will work in the upcoming IE?

Thank you,

--
-- Ghodmode

Give a man a fish and he'll come back to buy more... Teach a man to fish and you're out of business.

 

[Vragabond]

#1 is easy... It's the IE duplicate character bug.
#2 is a bit hard to comment because I don't know when exactly it happens. It does not happen if there's content in the main area? What does some more mean? Which paragraph are you commenting out? Could we see an example html (a link) with the exact code that IE7 shows problem #2?

 

[Ghodmode]

Vragabond, thank you. I didn't know about the duplicate character bug before.

Unfortunately, it's not exactly the duplicate character bug I'm seeing. Based on PIE's demo, IE7 doesn't present the duplicate character bug. This isn't happening in IE 6 at all. Between the two floats, I only have one comment, and no other hidden elements. I can't try the 3px margin as suggested in the article at PIE because the technique I'm using requires the use of negative margins. However, I've tried a 3px (and 13px, just in case) margin on the container div with no effect.

For item number 2, the problem I'm seeing occurred when I was trying to test for the problem, then reproduce my results. I added a paragraph element (with "Lorem ipsum...") inside of the "information" column and the problem went away. Then I wanted to reproduce the original problem, but I wasn't ready to delete the new paragraph element yet, so I just commented it. That's when I saw the result of the second screen shot.

I found another interesting effect while trying to solve the problem if it was related to the "duplicate character bug". If I remove either the comment at the end of the "content" div or the one at the end of the "navigation" div, the duplicate characters go away, but the "footer" div is affected as shown in the second screen shot.

I've discovered that adding an empty paragraph with no margin (<p style="margin: 0;"></p>) to the "information" div. This seems like a reasonable fix that shouldn't break anything. In any case, it probably won't be necessary anyway, as long as I have some actual content for that block. I've updated the file with this fix.

Thank you,
-- Ghodmode