Preview pane

Brett Patterson brett at bpatterson.net
Thu Sep 7 14:18:02 CEST 2006


Brennan Stehling wrote:
> In mail.css there you created a CSS selector for #preview as you see below.  I then was able to make IE6 work with the next 2 selectors.
>
> The first one is a little more specific than the first selector so it will override the values from the first selector and use that expression to set the height for the preview panel.  The next selector is a child selector which is only recognized by Firefox, IE7 and other modern browsers.  That basically resets the height back to the default.  The layout works as well in IE7 as it does in Firefox, so that is good.  And this change does make it work for IE6, but once you adjust the size of your window the measurments are changed.  My guess is the CSS expressions may not be reevaluated when the window changes size.  But if you were to reload the page in IE6 it will fix the height so the preview works right.
>
> My guess is that IE6 does not handle the bottom style rule very well in this case.  So setting the height with a dynamic value was the way I fixed it.
>
> Below is the CSS.
>
> #previewpane
> {
>   position: absolute;
>   display: none;
>   top: 85px;
>   left: 200px;
>   right: 40px;
>   bottom: 40px;
>   border: 1px solid #999999;
>   border-top: none;
>   background-color: #F9F9F9;
>   overflow: auto;
>   /* css hack for IE */
>   width: expression((parseInt(document.documentElement.clientWidth)-240)+'px');
> }
>
> div#previewpane
> {
>   height: expression((
>     parseInt(document.documentElement.clientHeight) -
>     parseInt(document.documentElement.clientHeight/2) - 64
>   )+'px');
> }
>
> body > div#previewpane
> {
>   height: auto;
> }
>
>
> Brennan Stehling
> http://brennan.offwhite.net/blog/
>
>
> On Thu, 07 Sep 2006 08:47:33 +0200, Robin Elfrink <elfrink at introweb.nl> wrote:
>   
>> Brennan Stehling wrote:
>>
>>     
>>> I can probably fix your IE6 issues.
>>>       
>> Oh, that would be very nice.
>>
>>
>>     
>>> Can you place a Zip of the full RC installation someplace where I can
>>>       
>> download it?
>>
>> Here it is:
>>
>> ....
>>
>>
>>
>> Robin
>>     
> --
> Brennan Stehling
> Offwhite.net LLC
> brennan at offwhite.net
>
>
>
>   
Really, all you need is to define the height in the first selector.  
Since we're working with IDs, there should never be more than one on the 
page (so no p, span, h3, table, form, or other ID named "preview").  So 
your 3 selectors can come down to one: #preview, and body > #preview.




More information about the Dev mailing list