20 replies [Last post]
cgallagr98
Offline
newbie
State College, PA
Last seen: 17 years 34 weeks ago
State College, PA
Timezone: GMT+7
Joined: 2005-02-04
Posts: 1
Points: 0

Hi All,

I have created a cross-browser template that uses an external style sheet to position layers and text. I need to find a workaround for the min-height tag as it applies to the main content layer of a webpage. It looks fine in Firefox and Netscape but in IE the content layer ends up being too short since the min-height only applies to table attributes in IE. Can anyone show me a work around without using tables in the layer? Basically I need for the content layer to ALWAYS fill the screen even when there is no content in it, but not by using tables or breaks.

Regards,
CG Cool

Anonymous
Anonymous's picture
Guru

Need workaround for min-height in IE

Hey, good luck. When you find out how to do it let us all know. Wink

I guess there is a javascript solution but I have never used it.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Need workaround for min-height in IE

I'm not sure I understand what you mean but height:100% in IE acts the same as min-height for FF just feed the rule to IE only, as FF will read it as no more than 100%.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Anonymous
Anonymous's picture
Guru

Need workaround for min-height in IE

I think he is saying he wants his divs to fill the height of the window regardless of how much content is in there.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Need workaround for min-height in IE

Yes so......height:100% in IE will fill the viewport if height:100% is defined in the body :?

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

BigToque
BigToque's picture
Offline
newbie
Last seen: 2 years 29 weeks ago
Timezone: GMT-6
Joined: 2005-01-08
Posts: 6
Points: 0

Need workaround for min-height in IE

Hugo wrote:
Yes so......height:100% in IE will fill the viewport if height:100% is defined in the body :?

Hugo.

I'm actually having the exact same problem at the moment (I think :oops: )

My site (http://www.bigtoque.com/test) looks fine in IE, but in FF, if the content is less than 100% of the height of the screen, the DIV only fills to the bottom of the content.

I could really use some help also.

/*huts.bigtoque.com Stylesheet*/

html, body {
  min-height: 100%;
}

* html, * body {
  height: 100%; /* IE ONLY */ 
}


body {
  margin: 0px;
  padding: 0px;
  background-color: #3a6ea5;
  color: #666666;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 1em;
}

#wrapper{
  background-color: #3a6ea5;
  height: 100%;
  width: 780px;
}

#logo{

}

#navbar {
  margin-top: -3px;
  width: 125px;
  float: left;
}

#navbar a:link, #navbar a:visited {
  display: block;
  color: #7e7e7e;
  background-color: #ffffff;
  border-bottom: 1px solid #000000;
  padding-top: 3px;
  padding-bottom: 3px;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
}

#navbar a:hover {
  background-color: #dedede;
}

#valid a:link, #valid a:visited, #valid a:hover {
  display: block;
  background-color: #3a6ea5;
  border: 0px;
}

#main {
  width: 633px;
  height: 100%;
  background-color: #ffffff;
  float: left;
  margin-top: -91px;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  padding: 10px;
  background: url(images/bgPage.jpg);
}

#main h1 {
  text-align: center;
}

#news {
  width: 292px;
  float: left;
  padding: 10px;
  padding-top: 0px;
  background-color: #dedede;
}

#news ul{
 margin: 10px;
 font-size: .9em;
}

#recap {
  width: 292px;
  float: right;
  padding: 10px;
  padding-top: 0px;
  background-color: #dedede;
}

#recap ul{
 margin: 10px;
 font-size: .9em;
}

table, tr, td{
  border: 1px solid #000000;
}
[/code][/url]

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Need workaround for min-height in IE

BigToque,
not sure what problem you having, define:

html, body {height:100%;min-height;100%;}

On a container wishing to have full viewport height
For Mozi use min-height:100%; height:auto;

/*hide fromIEMac\*/
* html #container {height:100%;}
/*end hide*/

Star selector hides height from Mozi otherwise it will stick at 100%
Escape hack hides rule from IEMac which will stumble on height:100%
Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

kajordo
Offline
newbie
Last seen: 17 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-15
Posts: 3
Points: 0

Need workaround for min-height in IE

Hmmm, dunno know why here noone seems to understand his problem...

This is my solution:

div {

min-height: 450px;

height: 450px;

}

Explanation:

min-height works in Firefox but not in IE.
height in IE works also as a min-height directive (not in Firefox).
So if you put them both you will have it work in both Firefox and IE.

As for all the 100% matter (everyone seem to think that it is about it) it don't work for you.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Need workaround for min-height in IE

Hmm dunno what you mean by "why here noone seems to understand his problem"

I understand the problem and use of min-height/height fine thankyou very much as do others on this board, it's been discussed in many threads.
How it relates to the posters problem and his requirements is clear enough methinks,
although from the code you posted I'm not altogether sure you do, as you have now fixed FF/Mozi at 450px height stopping it expanding any further forcing it's contents to overflow, the requirement was for a container to always fill 100% of the viewport.

Apologies but I can not make sense of your final sentence; would you care to clarify.

Oh and welcome to the forum.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

kajordo
Offline
newbie
Last seen: 17 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-15
Posts: 3
Points: 0

Need workaround for min-height in IE

To Hugo
What are talking about? Where in the world I've said that you don't understand the min-height/height problem?

I just only said that many here don't understand what he wants to do, infact they keep answering to put 100% somewhere, but it's not the solution.

Thank you for the greeting, and in any case I don't want to offend you or anyone else, wanted only to help a guy and I've seen that many answers weren't correct.

kajordo
Offline
newbie
Last seen: 17 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-15
Posts: 3
Points: 0

Need workaround for min-height in IE

Ok, beside that I also didn't understand the problem. The matter is that height:100% don't work with div (in my experiences not), so if everyone keep responding height:100% that doesn't help the guy that posted this:

Quote:

My site (http://www.bigtoque.com/test) looks fine in IE, but in FF, if the content is less than 100% of the height of the screen, the DIV only fills to the bottom of the content.

tought it was a div problem like quoted, not html (as a tag, obviously).

Don't wanted to offend anyone, only help, sorry if I've invaded your territory Hugo.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Need workaround for min-height in IE

kajordo,
It's not my territory, you have as much right to be here as I do and to voice an opinion; it's an open community.
I have taken no offence whatsoever I assure you. Smile

I genuinely didn't understand what you were referring to especially the comments regarding using height:100% (it does work after a fashion and can have it's uses) as far as I could tell the questions had been answered, but reviewing things I could have made it clearer to ensure that Mozi only saw min-height; I think part of the problem may have been cross posting which can always be confusing especially as the original question was about height in IE but also it's a frustrating subject that crops up too often and that we seem to repeat and one tends to get a little sloppy when repeating stuff that one understands.
Perhaps we ought to write a definitive guide on the subject for the 'How To' section.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

caderoux
Offline
newbie
Last seen: 17 years 31 weeks ago
Joined: 2005-02-23
Posts: 1
Points: 0

Need workaround for min-height in IE

Can't you just put this div as the first element inside your problem div?

<div style="width : 0px ; height : 450px ; float : left ; clear : left ; overflow : hidden ;"></div>

This will force the container to be at least this big (you must have no height setting on the containing element).

It sure would be nice to do it all with just a stylesheet, but this works for me.

HiRAEdd
Offline
newbie
Brisbane, Australia
Last seen: 17 years 31 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2005-02-24
Posts: 6
Points: 0

Need workaround for min-height in IE

Haven't read the posting in detail but if you're looking for an IE work-around to the min-height, etc. css properties, this article and solution may be what you're looking for.
http://www.doxdesk.com/software/js/minmax.html

CaptnTBag
Offline
newbie
Peoria, Illinois
Last seen: 17 years 31 weeks ago
Peoria, Illinois
Joined: 2005-03-01
Posts: 4
Points: 0

Need workaround for min-height in IE

so without using that external file, there is no way to give a div a min-height (using px) and a max-height (using 100%) and having it work in IE?

Because, in IE it just goes as big as the content. I want it to fill the page (as does the other requests) but yet when the content is smaller; for the div not to colapse and stay at a min-height.

HiRAEdd
Offline
newbie
Brisbane, Australia
Last seen: 17 years 31 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2005-02-24
Posts: 6
Points: 0

Need workaround for min-height in IE

That would appear to be the case Smile

CaptnTBag
Offline
newbie
Peoria, Illinois
Last seen: 17 years 31 weeks ago
Peoria, Illinois
Joined: 2005-03-01
Posts: 4
Points: 0

Need workaround for min-height in IE

*beep*ty. :?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 23 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Need workaround for min-height in IE

It's early in the morning I thought your beep was a bump Smile

This topic is a little unclear so I will have a go at clarifying.
min-height
IE treats height like min-height so if you give only IE a height value and other browsers a min-height you should get what you want.

.container{min-height:450px;}
/* hide from ie-mac \*/
* html .container{height:450px;}
/* end hack */
So thats simple enough but what about max-height.
Firstly you need to think seriously about what to do with content that exceeds the max-height. Browsers may do some funny things with the extra content unless you specify an overflow value.
Which may give us a hint of an answer for max-height in IE.
Set the overflow and height of the parent.
Max-height is something you should think clearly about before use.

Hope that helps

CaptnTBag
Offline
newbie
Peoria, Illinois
Last seen: 17 years 31 weeks ago
Peoria, Illinois
Joined: 2005-03-01
Posts: 4
Points: 0

Need workaround for min-height in IE

Now, there are two issues I am having with this;

1 (which is relavent). In IE the content doesn't extend to 100%.

2. I want the footer to placed at the bottom.

CaptnTBag
Offline
newbie
Peoria, Illinois
Last seen: 17 years 31 weeks ago
Peoria, Illinois
Joined: 2005-03-01
Posts: 4
Points: 0

Need workaround for min-height in IE

i tried this (from here http://www.svendtofte.com/code/max_width_in_ie/)

and changed width to height (way at the bottom - in px)

and it worked... :?

HiRAEdd
Offline
newbie
Brisbane, Australia
Last seen: 17 years 31 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2005-02-24
Posts: 6
Points: 0

Need workaround for min-height in IE

That code is sar-weet! Much better (I think) than the previous solution I posted.