Panels layout messing up in IE7

This is due to Internet Explorer 7 new revolutionary css rendering (TM). But ok, this is a known issue for any designer. Stacking columns at 50% + 50% means that two columns, in a perfect world, would simply touch on their internal side. However, browser computation of the 100% width might calculate a 100% width of, for instance 500, while the 50%, instead of 250, might be calculated at 251. The stacked columns would then collide and fall one below the other. Same story is true for N-columns layouts.

For this reason, I suggest to use non-filling values, letting some room for browser calculation defects and for a non-colliding, whereas not touching for a very small distance, that in most cases can be quietly tolerated.

Here's some code to follow up on the concept. This definitely worked great for me -- wish I could have the many hours of my life back that it took to uncover what the heck was happening! :/

I found the .nodeTitle references in my theme's style.css file and copied them, to be sure I'd be over-riding everything I needed to. For my case, until I make up a better solution (like adding a specific style for each Views page or something like that), I just modded the CSS file in "/sites/all/modules/panels/layouts/" to add specifications of the node titles like this:

.panel-2col-stacked .view .nodeTitle {
  padding: 6px 0px 2px 0px;
  line-height: 18px;
  width: auto; 
}

I mercifully cut out all the other stuff like font goodies, since you can add/remove as much of that stuff as you want. The relevant thing here for me was that in my theme, the .nodeTitle had a width of 400, so changing it here to "auto" allows IE to not be an irritant. Of course, you could do something more specific here if you really want total control over it, like doing a "nobreak" or whatever... but I just want the title to wrap inside the newly-shrunk node title space inside my Panels column. You could also dig deeper down the tree and have the left column titles different than the right -- you'd just do something like this to get more specific (I think):

.panel-2col-stacked .panel-col-first .view .nodeTitle {
  /* stuff */
  width: auto; 
}
.panel-2col-stacked .panel-col-last .view .nodeTitle {
  /* stuff */
  width: auto; 
}
/* etc... */

Of course, following this train of thought, you could also override other stuff in the views from here. Again though, I'm pretty sure there's a better way to do this, like using CSS for the specific Views or something, but I think this approach at least will work if you're simply trying to mod a particular Panel layout.

Hope this is clear. If nothing else, maybe it will help people discover their own solutions along this problem's lines. Also, maybe others will chime in with much better solutions and I can go back to lurking & learning. :D

Cheers,
--Hoza