Need CSS workaround for IE 6 ignoring min-height

Discussion in 'HTML' started by Wayfarer, Oct 2, 2003.

  1. Wayfarer

    Wayfarer Guest

    Hi,

    I've got a website (see below) that, among other things, has a database
    of quotes. When no quotes are returned from a search, or if there are
    only one or two quotes returned, the <div id="content"> needs to be at a
    minimum height to avoid mutilating the menu and page presentation. It
    works in NS, Opera and Firebird, but IE 6 just ignores it. Is there any
    workaround? I'd prefer one that doesn't involve javascript, though I'll
    use it if I have to.

    TIA

    --
    Wayfarer
    Journeys: http://wayfarer.brinkster.net/
     
    Wayfarer, Oct 2, 2003
    #1
    1. Advertising

  2. Wayfarer wrote:

    > <div id="content"> needs to be at a
    > minimum height to avoid mutilating the menu and page presentation. It
    > works in NS, Opera and Firebird, but IE 6 just ignores it. Is there any
    > workaround? I'd prefer one that doesn't involve javascript, though I'll
    > use it if I have to.


    IE doesn't support min-height.

    I know you wanted to avoid JavaScript, but there is a possible way to fix
    using IE-proprietry extensions to JavaScript.

    You can test for the actual height of an element using
    document.getElementById('ElementID').offsetHeight and then if this is
    found to be less than what you wanted as a minimum, adjust the value of
    document.getElementById('ElementID').style.height.

    Of course, make sure you do a JavaScript test for the user agent. If
    agent != IE, then do nothing.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?id=132
     
    Toby A Inkster, Oct 2, 2003
    #2
    1. Advertising

  3. Wayfarer <> writes:

    > [...] the <div id="content"> needs to be at a
    > minimum height to avoid mutilating the menu and page presentation. It
    > works in NS, Opera and Firebird, but IE 6 just ignores it. Is there any
    > workaround?


    M$IE treats the height property incorrectly anyway and stretches a box
    to the size that its contents need. You could thusly declare min-height
    for browsers that support it and then employ the usual M$ voodoo syntax
    [0] to attach style rules to your document that declare height instead.


    [0] <http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp>

    Which is a very entertaining read; to quote the beginning:

    | One of the most common operations performed in a Web page is to detect
    | the browser type and version.

    Know your oxymorons. Barf, barf.

    | Browser detection is performed to ensure
    | that the content presented to the browser is compatible and renders
    | correctly.

    Now, *that* explains

    Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg,
    application/vnd.ms-powerpoint, application/vnd.ms-excel,
    application/msword, */*

    Chomp, chomp.


    --
    README
     
    Eric B. Bednarz, Oct 3, 2003
    #3
  4. Wayfarer

    kchayka Guest

    Wayfarer wrote:
    >
    > I've got a website (see below) that, among other things, has a database
    > of quotes. When no quotes are returned from a search, or if there are
    > only one or two quotes returned, the <div id="content"> needs to be at a
    > minimum height to avoid mutilating the menu and page presentation. It
    > works in NS, Opera and Firebird, but IE 6 just ignores it. Is there any
    > workaround? I'd prefer one that doesn't involve javascript, though I'll
    > use it if I have to.


    IE's default overflow behavior doesn't follow specs, but will work in
    your favor here. Unless the overflow property is specifically set, IE
    will ignore the set dimension(s) and expand a box as needed to fit the
    content. This means you can set the height property and it will act as
    min-height. Just don't set overflow and you should be fine.

    * html div#content { height:10em; } /* min-height for IE */

    Should work. AFAIK, this particular syntax only works in IE so other
    browsers should ignore the rule.
    <URL:http://centricle.com/ref/css/filters/tests/star_html/>

    --
    To email a reply, remove (dash)un(dash). Mail sent to the un
    address is considered spam and automatically deleted.
     
    kchayka, Oct 3, 2003
    #4
  5. Wayfarer

    DU Guest

    kchayka wrote:

    > Wayfarer wrote:
    >
    >>I've got a website (see below) that, among other things, has a database
    >>of quotes. When no quotes are returned from a search, or if there are
    >>only one or two quotes returned, the <div id="content"> needs to be at a
    >>minimum height to avoid mutilating the menu and page presentation. It
    >>works in NS, Opera and Firebird, but IE 6 just ignores it. Is there any
    >>workaround? I'd prefer one that doesn't involve javascript, though I'll
    >>use it if I have to.

    >
    >
    > IE's default overflow behavior doesn't follow specs, but will work in
    > your favor here.


    Exactly!

    Unless the overflow property is specifically set, IE
    > will ignore the set dimension(s) and expand a box as needed to fit the
    > content.


    .... except if it is overflow:visible: that's the particular bug in IE.

    This means you can set the height property and it will act as
    > min-height. Just don't set overflow and you should be fine.
    >


    He could declare

    #quote-container
    {
    background-color: #ffefd5;
    padding: 0.25em 4em 1.5em 4em;
    height:10em;
    overflow:visible;
    /* in IE 6, containing box will stretch in case content overflows */
    }

    body>div#quote-container
    {
    min-height:10em;
    }

    Not tested but it should work.

    > * html div#content { height:10em; } /* min-height for IE */
    >
    > Should work. AFAIK, this particular syntax only works in IE so other
    > browsers should ignore the rule.
    > <URL:http://centricle.com/ref/css/filters/tests/star_html/>
    >



    DU
    --
    Javascript and Browser bugs:
    http://www10.brinkster.com/doctorunclear/
    - Resources, help and tips for Netscape 7.x users and Composer
    - Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
    http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html
     
    DU, Oct 5, 2003
    #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. Chris

    CSS Min Height Attribute

    Chris, Mar 2, 2004, in forum: HTML
    Replies:
    7
    Views:
    963
    Spartanicus
    Mar 3, 2004
  2. Nik Coughin

    % heights with CSS, min-height

    Nik Coughin, Apr 15, 2004, in forum: HTML
    Replies:
    4
    Views:
    583
    Barry Pearson
    Apr 16, 2004
  3. Lois
    Replies:
    1
    Views:
    3,259
    Ryan Stewart
    Dec 27, 2004
  4. harry

    IE 5.5 & CSS min-height

    harry, May 22, 2005, in forum: HTML
    Replies:
    1
    Views:
    555
    Dylan Parry
    May 22, 2005
  5. Oliver Wong

    IE6 ignoring "height" CSS attribute?

    Oliver Wong, Jun 4, 2007, in forum: HTML
    Replies:
    3
    Views:
    1,051
    Oliver Wong
    Jun 5, 2007
Loading...

Share This Page