CSS Min Height Attribute

Discussion in 'HTML' started by Chris, Mar 2, 2004.

  1. Chris

    Chris Guest

    Hi All,

    Is there any way of getting around the problems internet explorer has with
    the min height attribute in CSS? I have set a container as the following

    #main {
    position: relative;
    border-bottom: 2px solid #330066;
    min-height:400px;
    height: 400px;
    top:5px;
    width: 100%;
    background: url(img/bgimg.jpg) no-repeat right bottom;
    }

    A footer follows this container and if I remove the "height: 400 px" line in
    Internet Explorer the footer comes right up to where my content ends. I
    want to show my background image in full which is located on the #main id.

    Any help would be apperciated!

    Thanks.

    Chris.
     
    Chris, Mar 2, 2004
    #1
    1. Advertising

  2. Chris

    Spartanicus Guest

    "Chris" <> wrote:

    >Is there any way of getting around the problems internet explorer has with
    >the min height attribute in CSS?


    IE doesn't "have a problem" with min-height, it's not supported.

    > min-height:400px;
    > height: 400px;


    Nonsensical as the height will always be 400px.

    >I want to show my background image in full which is located on the #main id.


    Place an empty spacer div beneath your content, define it's height in
    your external css file.

    --
    Spartanicus
     
    Spartanicus, Mar 2, 2004
    #2
    1. Advertising

  3. Chris

    Spartanicus Guest

    Spartanicus <> wrote:

    >>I want to show my background image in full which is located on the #main id.

    >
    >Place an empty spacer div beneath your content, define it's height in
    >your external css file.


    Forgot to add that you should switch it's display off for proper UAs.

    --
    Spartanicus
     
    Spartanicus, Mar 2, 2004
    #3
  4. Chris

    Paul Furman Guest

    Chris wrote:

    > Hi All,
    >
    > Is there any way of getting around the problems internet explorer has with
    > the min height attribute in CSS? I have set a container as the following
    >
    > #main {
    > position: relative;
    > border-bottom: 2px solid #330066;
    > min-height:400px;
    > height: 400px;
    > top:5px;
    > width: 100%;
    > background: url(img/bgimg.jpg) no-repeat right bottom;
    > }
    >
    > A footer follows this container and if I remove the "height: 400 px" line in
    > Internet Explorer the footer comes right up to where my content ends. I
    > want to show my background image in full which is located on the #main id.
    >
    > Any help would be apperciated!



    I use a max-width workaround for IE that I found. There might be a way
    to reconfigure it to handle your situation?

    div.textbox {
    <!-- for other browsers -->
    max-width: 35em;

    <!-- for other browsers -->
    width: expression( <!-- for IE only -->
    document.body.clientWidth > (500/12) *
    parseInt(document.body.currentStyle.fontSize)?
    "35em":
    "auto" );
     
    Paul Furman, Mar 2, 2004
    #4
  5. Chris

    Mark Parnell Guest

    On Tue, 2 Mar 2004 12:45:40 -0000, "Chris" <> declared in
    alt.html:

    > Hi All,


    G'day.

    > Is there any way of getting around the problems internet explorer has with
    > the min height attribute in CSS?


    Something like this:

    #main {
    height: 400px; }

    body>#main { /* IE won't see this because it doesn't */
    height: auto; /* understand child selectors. */
    min-height: 400px; }

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
     
    Mark Parnell, Mar 2, 2004
    #5
  6. Chris

    Spartanicus Guest

    Mark Parnell <> wrote:

    >> Is there any way of getting around the problems internet explorer has with
    >> the min height attribute in CSS?

    >
    >Something like this:
    >
    >#main {
    > height: 400px; }
    >
    >body>#main { /* IE won't see this because it doesn't */
    > height: auto; /* understand child selectors. */
    > min-height: 400px; }


    But that would cause the box to be *constrained* to 400px in IE, thereby
    causing a scrollbar to appear where it shouldn't.

    --
    Spartanicus
     
    Spartanicus, Mar 3, 2004
    #6
  7. Chris

    Mark Parnell Guest

    On Wed, 03 Mar 2004 00:10:55 +0000, Spartanicus <>
    declared in alt.html:

    > But that would cause the box to be *constrained* to 400px in IE, thereby
    > causing a scrollbar to appear where it shouldn't.


    IIRC, IE will automatically increase the size of the box to contain its
    contents regardless of the height attribute (in fact, it pretty much
    works like min-height should). I could be wrong.

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
     
    Mark Parnell, Mar 3, 2004
    #7
  8. Chris

    Spartanicus Guest

    Mark Parnell <> wrote:

    >> But that would cause the box to be *constrained* to 400px in IE, thereby
    >> causing a scrollbar to appear where it shouldn't.

    >
    >IIRC, IE will automatically increase the size of the box to contain its
    >contents regardless of the height attribute (in fact, it pretty much
    >works like min-height should). I could be wrong.


    You're right, a usable bug ;)

    --
    Spartanicus
     
    Spartanicus, Mar 3, 2004
    #8
    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:
    829
  2. Nik Coughin

    % heights with CSS, min-height

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

    IE 5.5 & CSS min-height

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

Share This Page