Preview pane

Brennan Stehling brennan at offwhite.net
Thu Sep 7 20:19:05 CEST 2006


Yes, you can compact it a little.  I just did it that way to make sure my change was obvious.

It is going to be very interesting to see how quickly IE7 replaces IE6.  Then these annoying little problems will go away.

Brennan

On Thu, 07 Sep 2006 08:18:02 -0400, Brett Patterson <brett at bpatterson.net> wrote:
> 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.
--
Brennan Stehling
Offwhite.net LLC
brennan at offwhite.net





More information about the Dev mailing list