Stylesheets - MSIE screen height vs. full height

Author

MSIE screen height vs. full height

2006-02-20, 3:29 am

I have an absolutely-positioned div with a y-repeating background inside
a container div of variable height (but taller than the browser screen).
I need the child div to expand to fill the entire height of the container.

This currently works in Firefox with the Transitional DTD, but IE6
didn't tile at all. By adding "height:100%" to the container and to the
BODY tag, IE will then expand to the screenheight, not to the actual
container height. How can I get it to expand completely?

See the example below. (Linked because I didn't know if posting the
whole xhtml would do wonky things..)

http://www.happymagpie.com/heighttest.html

This is extremely frustrating because the exact opposite happens when I
use just a generic <html> header is used instead of XHTML opening.
( FF expands to screen width, whereas IE expands completely.)

Philip
(Reposted since the first seem to have vanished...)

Spartanicus

2006-02-24, 10:21 am

"." <A@COX.NET> wrote:

>http://www.happymagpie.com/heighttest.html

In this case to get good help we need to know what you are actually
trying to do. The normally helpful minimized test case that you've
uploaded doesn't allow us to see this.

--
Spartanicus

kchayka

2006-02-24, 10:22 am

.. wrote:
> I have an absolutely-positioned div...
>
> http://www.happymagpie.com/heighttest.html

You seem to be using positioning without understanding what relative and
absolute really do. This is a disaster waiting to happen.

You would probably be better off finding a nice template that already
(mostly) does what you want, then adapt it for your needs.
<URL:http://css-discuss.incutio.com/?page=CssLayouts>

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

2006-02-24, 10:22 am

Sheesh. Everytime I try to send this, I have newsgroup problems..
Spartanicus wrote:

> "." <A@COX.NET> wrote:
> In this case to get good help we need to know what you are actually
> trying to do. The normally helpful minimized test case that you've
> uploaded doesn't allow us to see this.
>

Alright, here is a slightly updated URL with a better example:

http://happymagpie.com/testing/heighttest.html

I want the shadows on the side of the container div to extend the whole
length. FireFox will do it.

IE doesn't want to expand the shadow boxes (.box, .box2) unless both the
container div AND the Body tag are set to height:100% and then it
expands it only the height of the browser window, NOT the height of the
container.

Philip

Spartanicus

2006-02-24, 10:22 am

"." <A@COX.NET> wrote:

> Alright, here is a slightly updated URL with a better example:
>
> http://happymagpie.com/testing/heighttest.html

http://homepage.ntlworld.ie/spartanicus/philip.htm

--
Spartanicus

2006-02-24, 10:22 am

Spartanicus wrote:
> "." <A@COX.NET> wrote:
>
>
>
>
> http://homepage.ntlworld.ie/spartanicus/philip.htm
>

I see, just nesting the divs so the content controls the size in all of
them. I actually have a top and bottom shadow as well and thought that
having too many nested would be messy, but my way didn't turn out so
well. I thought I was being clever, but I'll just KISS.

I almost didn't catch the "container one" class definitions. Reads so
normal, until I actually looked at it.

You coded everything so strikingly different, I could probably ask a
hundred questions. Is there a reason you used padding instead of
defining the width of the shadows?

Thanks,
Philip

Spartanicus

2006-02-24, 10:22 am

"." <A@COX.NET> wrote:

>Is there a reason you used padding instead of
>defining the width of the shadows?

IIRC your example tried to paint the "borders" by using styled elements
without content, that causes difficulties like the height issue you
struggled with. By using wrapper elements around the content the width
and height automatically scales with the content. But in that situation
you can't define a width or height for these elements, so padding is
used to keep the content off the backgrounds.

Parts of the code may not be easy to understand due to CSS collapsing
margin behaviour http://www.w3.org/TR/CSS21/box.html#collapsing-margins

This behaviour is only seen in standard compliant browsers (e.g. KHTML
browsers, Opera, Mozilla and iCab). Comment out the "padding:1px 0 1px
20px;margin:-1px 0" code in my demo and view it in a standard compliant
browser to see it in action. The 1px top and bottom padding is used to
prevent the margins from collapsing (they are no longer adjacent), the
negative -1px margin is then used to undo the unwanted 1px shift.

--
Spartanicus