I'm coding a layout for my Personal/Blog site, and it displays differently in IE than it does in Firefox.
It displays properly in firefox, but the vertical-divider between the two sides is all messed up in IE.


http://www.mrpromqueen.com/test.php

Any solutions?

It's fine in IE6, but I guess that doesn't make you much happier.

What version of IE do you see the broken line in?

Well since Firefox is the only browser I really use.. I have an Add-On called "IE tab" which displays a page for me as if it were in IE.

However, I just tested the page in IE 8, and it displays it wrong, just as I was saying.

I see it in Opera and Chrome too. If you turn on table borders, then you'll see what's going on. Basically, different browsers allocate the extra space in your layout table differently.

Aah. Well obviously what I'm trying to accomplish is for the divider space to stretch all the way vertically, as far as the content of my text goes. Any idea on how to do this?

I'd leave the divider as a single cell, rather than splitting it into multiple cells that may get divided differently by different browsers. Your table just seems too complex to me.

Or you could make a yellow image strip as wide as the table (that is fixed width anyhow) with dots in the right spot and use that as a background for TABLE. Your other backgrounds and inline images should end up on top of that, so it doesn't matter that the yellow is behind it all.

But I agree with Darin. There's too much table stuff. Why is the top graphic sliced in little pieces for instance? Do you plan to link the bits to different pages?

Yes some parts of the top graphic were being turned into links, that's why it's sliced like that.

However, I re-sliced it and used bigger pieces wherever I could, and it works now.

(see here if you care to see)

Thank you so much for the help guys. =)

I get a 404 file not found.