% heights with CSS, min-height

[Nik Coughin]

Bit stuck.

I have this column, on the left of my page-in-progress:

http://homepages.ihug.co.nz/~nrkn/new/

I set the height to be 85%, because I personally feel that a left column
looks better if it takes up most of the vertical space rather than just use
what it needs -- I'm open to suggestion on this, so long as it looks good.

Problem with using %s for the height is that if the navigation links take up
more room than the % height allows for, the div either obscures the nav
items (IE) or the nav items flow out of the div (Opera, Mozilla).

Setting min-height to around 18em fixes this in Opera and Mozilla, but as we
well know, IE doesn't support it... grrr. Any workarounds?

Another thing that only happens in IE, there is a rectangular area in which
I can't select text -- it covers the N, R, and about half of the K in the
logo, and "Menu I" in the first "Menu Item" -- any idea what it causing this
and how I can get around it?

Any other suggestions or comments?

Thanks a million. Two million even.

 

[Barry Pearson]

Bit stuck.
I have this column, on the left of my page-in-progress:
http://homepages.ihug.co.nz/~nrkn/new/

I set the height to be 85%, because I personally feel that a left
column looks better if it takes up most of the vertical space rather
than just use what it needs -- I'm open to suggestion on this, so
long as it looks good.

Normally I find that controlling height causes more trouble than it is worth.
But here, I think it looks great, so I have to agree with you! (Is that CSS
something tricky to do with PNG alpha-transparency in IE? I need to look into
this).

Problem with using %s for the height is that if the navigation links
take up more room than the % height allows for, the div either
obscures the nav items (IE) or the nav items flow out of the div
(Opera, Mozilla).

Just a thought - I haven't tested it for your case. Have you tried variants on
{ overflow: auto }? I know vertical scrollbars are a bit grotty, but they
should only appear in unusual circumstances.

Setting min-height to around 18em fixes this in Opera and Mozilla,
but as we well know, IE doesn't support it... grrr. Any workarounds?

Another thing that only happens in IE, there is a rectangular area in
which I can't select text -- it covers the N, R, and about half of
the K in the logo, and "Menu I" in the first "Menu Item" -- any idea
what it causing this and how I can get around it?

Perhaps it is:
http://blog.tom.me.uk/2003/07/23/boie6selecta.php

 

[Nik Coughin]

Normally I find that controlling height causes more trouble than it
is worth. But here, I think it looks great, so I have to agree with
you! (Is that CSS something tricky to do with PNG alpha-transparency
in IE? I need to look into this).

Alpha transparency in IE is pretty easy, uses one of M$'s proprietary
filters within the * html hack so that other browsers which handle png's
properly don't see it. Limitations are that the filter can only display the
png in one of three ways (off the top of my head):

1) The element that the filter has been applied to becomes the same size as
the png
2) The png is cropped to fit within the element that the filter has been
applied to
3) The png is stretched to fill the element that the filter has been applied
to

So no way (AFAIK) to tile a png image as a background with alpha
transparency. I just stretched a single pixel png for the div background.

Just a thought - I haven't tested it for your case. Have you tried
variants on { overflow: auto }? I know vertical scrollbars are a bit
grotty, but they should only appear in unusual circumstances.

No, I haven't, but I will look at it. I really don't want vertical
scrollbars anywhere except for on the browser, even in unusual cicumstances.

Perhaps it is:
http://blog.tom.me.uk/2003/07/23/boie6selecta.php

Yes, it is.

Thanks Barry!

 

[Nik Coughin]

No, I haven't, but I will look at it. I really don't want vertical
scrollbars anywhere except for on the browser, even in unusual
cicumstances.

Stuff it. Anyone viewing the page with IE in 640x480 gets vertical
scrollbars. Thanks!

 

[Barry Pearson]

Stuff it. Anyone viewing the page with IE in 640x480 gets vertical
scrollbars. Thanks!

Chuckle! And thanks for the info on alpha transparency.