% heights with CSS, min-height

Discussion in 'HTML' started by Nik Coughin, Apr 15, 2004.

  1. Nik Coughin

    Nik Coughin Guest

    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.
    Nik Coughin, Apr 15, 2004
    #1
    1. Advertising

  2. Nik Coughin wrote:
    > 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

    --
    Barry Pearson
    http://www.Barry.Pearson.name/photography/
    http://www.BirdsAndAnimals.info/
    http://www.ChildSupportAnalysis.co.uk/
    Barry Pearson, Apr 15, 2004
    #2
    1. Advertising

  3. Nik Coughin

    Nik Coughin Guest

    Barry Pearson wrote:
    > Nik Coughin wrote:
    >> I set the height to be 85%

    >
    > 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.

    >> Another thing that only happens in IE, there is a rectangular area in
    >> which I can't select text

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


    Yes, it is.

    Thanks Barry!
    Nik Coughin, Apr 16, 2004
    #3
  4. Nik Coughin

    Nik Coughin Guest

    Nik Coughin wrote:
    > Barry Pearson wrote:
    >> 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.
    >


    Stuff it. Anyone viewing the page with IE in 640x480 gets vertical
    scrollbars. Thanks!
    Nik Coughin, Apr 16, 2004
    #4
  5. Nik Coughin wrote:
    > Nik Coughin wrote:
    >> Barry Pearson wrote:
    >>> 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.

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


    Chuckle! And thanks for the info on alpha transparency.

    --
    Barry Pearson
    http://www.Barry.Pearson.name/photography/
    http://www.BirdsAndAnimals.info/
    http://www.ChildSupportAnalysis.co.uk/
    Barry Pearson, Apr 16, 2004
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Wayfarer
    Replies:
    4
    Views:
    798
  2. Chris

    CSS Min Height Attribute

    Chris, Mar 2, 2004, in forum: HTML
    Replies:
    7
    Views:
    956
    Spartanicus
    Mar 3, 2004
  3. Lois
    Replies:
    1
    Views:
    3,215
    Ryan Stewart
    Dec 27, 2004
  4. harry

    IE 5.5 & CSS min-height

    harry, May 22, 2005, in forum: HTML
    Replies:
    1
    Views:
    545
    Dylan Parry
    May 22, 2005
  5. juergen
    Replies:
    3
    Views:
    565
    opalinski from opalpaweb
    Sep 20, 2006
Loading...

Share This Page