CSS Min Height Attribute

[Chris]

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.

 

[Spartanicus]

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]

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.

 

[Paul Furman]

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" );

 

[Mark Parnell]

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; }

 

[Spartanicus]

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.

 

[Mark Parnell]

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.

 

[Spartanicus]

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