Preview pane not fully displayed in IE7

[Gryphon]

As of the introduction of the preview pane in Revision 391, the lower pane is not full screen in IE7. It is only as tall as the message subject pane leaving the lower half of the preview area blank.

http://dec01.imghost.us/HJc1.jpg

I compared this feature in Firefox and confirm that it is not working as intended IE7.

[thomasb]

As I don't have IE7 installed here, cold somebody please post fixes for that? Must be a CSS issue.

[ahndee]

The preview pane is messed up in Safari as well - looking at the page source I see that there is

<style type="text/css">
#mailcontframe {
  bottom: auto;
  height: 210px;
}
</style>

after the <div id="mailpreviewframe">...</div> - this new style definition (especially the height declaration) seems to override the one in mail.css.

I tried to look through the code to figure out where this additional style is written in order to see whether removing solves the issue but was not able to find the proper place...

[Gryphon]

Changing mail.css line no. 147 to 100% appeared to fix it for IE7. Not sure what the result of that is in other browsers.

html>body*#messagecontframe
{
  height: 40%;
}

to

html>body*#messagecontframe
{
  height: 100%;
}

[ahndee]

Changing the height from 40% to 100% does not work in Safari - after changing this the preview frame extends beyond the bottom of the viewport.

[Reload]

Changing the height from 40% to 100% is working for IE 7.0

[robin]

Looks fine with r398. Please test again.

[Gryphon]

Example of display in IE7

[Gryphon]

Still the same in r400.

[robin]

I see it too now. Must have something to do with the fact that IE7 does better CSS rendering than IE6 but still responds to IE6 hacks.

[robin]

Please try this:

Index: skins/default/mail.css
===================================================================
--- skins/default/mail.css      (revision 403)
+++ skins/default/mail.css      (working copy)
@@ -144,7 +144,9 @@
 /*\*/
 html>body*#messagecontframe
 {
+  [height: 40%;
   height: 40%;
+  ]height: 100%;
 }
 /**/

[robin]

I forgot to give credit to where I found this hack:

LitePacific Hack

[Gryphon]

robin, that change works in IE7. I also viewed the change in FF 2.0 and it appears to still work normally as well.

[robin]

OK, I've tested this on Opera 9 (win32), Firefox 1.5 (mac), Firefox 2.0 (win32), IE6, IE7 and Safari. Looks good on all of them, commited SVN406.

[ahndee]

preview display in Safari (2.0.4 on 10.4.8/PPC) with r407

[ahndee]

Still broken for me with Safari (latest version on 10.4.8/PPC) - see attached file

[robin]

Since Safari is the last known browser to have a problem, I'll set this ticket to duplicate of #1484187, which has a better subject.