You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by Andrew Robinson <an...@gmail.com> on 2007/08/17 19:51:17 UTC
[OT: IE7 CSS] Standards mode: getting "remainder" height working
Sorry to put this out on the JSF list, but I am having a difficult
time with IE7 in standards mode.
I am building a page with a header, footer and content. Inside the
content, I have other similar layouts. I would like to have the header
and footer auto-layout and the content take up the remaining height. I
was using CSS with the table for this:
<table style="height: 100%; table-layout: fixed;">
<tbody>
<tr><td>Header</td></tr>
<tr style="height: 100%"><td>Content</td></tr>
<tr><td>Footer</td></tr>
</tbody>
</table>
Firefox 2.0: works
IE7 quirks mode: works
IE7 standards mode: broken
In IE7 standards mode, the second row takes up 100% of the table's
container height instead the height of the table minus the heights of
the first and third row (which is what I want).
I tried sub-classing the DocumentRenderer from Trinidad and spit out
<!-- IE force quirks mode --> at the top if the agent was IE. The
table then works, but a lot of my other code is broken on the page as
my styles are standards based.
I want to stay in standards mode, but really need the "auto,
remainder, auto" type functionality for element heights.
Microsoft's code always uses quirks mode to get this to work (like the
outlook web interface), so it is hard to find a way to get it to work.
Does anyone know of any tricks to get this to work in standards mode
without a whole lot of JavaScript on resize type code in IE7?
Thanks,
Andrew
Re: [OT: IE7 CSS] Standards mode: getting "remainder" height working
Posted by Andrew Robinson <an...@gmail.com>.
I have tried that but most of the time it will not work. The reason
being that the content in the item being resized changes the parent's
height and makes it near impossible to calculate percentage heights
accurately without using absolute positioning.
I've resolved to force IE into quirks mode as that seems to be the
easiest to work with, despite having many CSS shortcomings in that
mode.
On 8/20/07, Cristi Toth <cr...@gmail.com> wrote:
> IE supports CSS property expressions
> #content {
> height:expression(javascript code that returns the right height)
> }
>
> it works pretty nice and no need for onresize stuff
> but Firefox doesn't support CSS expressions,
> so if you want Firefox support too, then you have to add the js code to
> onresize
>
> Regards,
> Cristi Toth
>
> -------------
> Codebeat
> www.codebeat.ro
>
>
> On 8/17/07, Andrew Robinson <an...@gmail.com> wrote:
> > Sorry to put this out on the JSF list, but I am having a difficult
> > time with IE7 in standards mode.
> >
> > I am building a page with a header, footer and content. Inside the
> > content, I have other similar layouts. I would like to have the header
> > and footer auto-layout and the content take up the remaining height. I
> > was using CSS with the table for this:
> >
> > <table style="height: 100%; table-layout: fixed;">
> > <tbody>
> > <tr><td>Header</td></tr>
> > <tr style="height: 100%"><td>Content</td></tr>
> > <tr><td>Footer</td></tr>
> > </tbody>
> > </table>
> >
> > Firefox 2.0: works
> > IE7 quirks mode: works
> > IE7 standards mode: broken
> >
> > In IE7 standards mode, the second row takes up 100% of the table's
> > container height instead the height of the table minus the heights of
> > the first and third row (which is what I want).
> >
> > I tried sub-classing the DocumentRenderer from Trinidad and spit out
> > <!-- IE force quirks mode --> at the top if the agent was IE. The
> > table then works, but a lot of my other code is broken on the page as
> > my styles are standards based.
> >
> > I want to stay in standards mode, but really need the "auto,
> > remainder, auto" type functionality for element heights.
> >
> > Microsoft's code always uses quirks mode to get this to work (like the
> > outlook web interface), so it is hard to find a way to get it to work.
> >
> > Does anyone know of any tricks to get this to work in standards mode
> > without a whole lot of JavaScript on resize type code in IE7?
> >
> > Thanks,
> > Andrew
> >
>
Re: [OT: IE7 CSS] Standards mode: getting "remainder" height working
Posted by Cristi Toth <cr...@gmail.com>.
IE supports CSS property expressions
#content {
height:expression(javascript code that returns the right height)
}
it works pretty nice and no need for onresize stuff
but Firefox doesn't support CSS expressions,
so if you want Firefox support too, then you have to add the js code to
onresize
Regards,
Cristi Toth
-------------
Codebeat
www.codebeat.ro
On 8/17/07, Andrew Robinson <an...@gmail.com> wrote:
>
> Sorry to put this out on the JSF list, but I am having a difficult
> time with IE7 in standards mode.
>
> I am building a page with a header, footer and content. Inside the
> content, I have other similar layouts. I would like to have the header
> and footer auto-layout and the content take up the remaining height. I
> was using CSS with the table for this:
>
> <table style="height: 100%; table-layout: fixed;">
> <tbody>
> <tr><td>Header</td></tr>
> <tr style="height: 100%"><td>Content</td></tr>
> <tr><td>Footer</td></tr>
> </tbody>
> </table>
>
> Firefox 2.0: works
> IE7 quirks mode: works
> IE7 standards mode: broken
>
> In IE7 standards mode, the second row takes up 100% of the table's
> container height instead the height of the table minus the heights of
> the first and third row (which is what I want).
>
> I tried sub-classing the DocumentRenderer from Trinidad and spit out
> <!-- IE force quirks mode --> at the top if the agent was IE. The
> table then works, but a lot of my other code is broken on the page as
> my styles are standards based.
>
> I want to stay in standards mode, but really need the "auto,
> remainder, auto" type functionality for element heights.
>
> Microsoft's code always uses quirks mode to get this to work (like the
> outlook web interface), so it is hard to find a way to get it to work.
>
> Does anyone know of any tricks to get this to work in standards mode
> without a whole lot of JavaScript on resize type code in IE7?
>
> Thanks,
> Andrew
>