I am working on a site that has a couple columns in it and I’ve fought with it for a while and finally thought I had everything lined up correctly. I cross checked it in Adobe BrowserLab and everything seemed good (except IE6 and IE7 but I just accepted that).
I tried it on a different computer though and IE9 on the computer I tried it on displayed it like IE7 was displaying it in BrowserLab. Essentially what’s happening is the “Daily Tech Blogs” column slips way down to the bottom of the page out of line.
Can’t for the life of me figure out why. As you’ll note in the CSS, I’m using display:table and display:table-cell because that was the only thing I could get to line things up on all browsers (or so I thought). I initially just used DIV’s but they were being treated different by different browsers. I then tried to recreate it with just <table>s but that put everything out of whack. Here’s the link to my JSFiddle:
Any thoughts?
I’ve found for my purposes that the best way to go about it is
<!--[if IE 7]><body class="ie7"><![endif]-->at the top of code. I can then just adjust things where I want them withposition:absolute. While I generally tend to avoid hacks like this (and most people would second that), it was really only a major problem in IE7 and it was the most efficient way for me to go about it rather than mess with code that’s proven on every other browser.