I've just spent an embarrassingly long time tracking down a couple of
layout problems that surfaced when I started testing my app on
Internet Explorer. Thought I'd offer the solutions that finally
worked in case someone else hits the same snags. YMMV, as usual.
The first has to do with the jQuery Beauty Tips plugin. The tooltips
were showing up in IE with a transparent background. The short answer
is: If you've included all the required js files recommended on the
Beauty Tips page and it's still not working, then you need
jquery.bt.js version 0.95RC1. The prior released version won't work.
The second problem just about drove me crazy. My app is using a
layout.html from ca. v1.64 of web2py. It's the one with a two-column
body with a button menu on the left and content on the right. Most of
my pages were rendering correctly on IE but the menu column
(class="width10em") was coming out way too wide on a few. The problem
had to do with the way IE was sizing the body column
(class="expandable column2") since the menu column content was the
same for all pages. After much futzing and cursing, the cleanest
solution I could come up with was to conditionally put an empty zero-
height fixed-width div at the top of each body column. So in
layout.html I now have a style defined thusly:
<!--[if IE]>
<style>
.iewidthfix {
width: 500px !important;
height: 0px !important;
}
</style>
<![endif]-->
and, further down, I put the div in the the td containing the body
column.
<td class="expandable column2">
<div class="flash">{{=response.flash or ''}}</div>
<!--[if IE]>
<div class="iewidthfix"></div>
<![endif]-->
{{include}}
</td>
Works like a charm in IE 8 (haven't tried 6 or 7 yet) and doesn't
screw anything up in Firefox, Chrome, and Safari.
Cheers,
Mike
