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
Need workaround for min-height in IE
Hey, good luck. When you find out how to do it let us all know.
I guess there is a javascript solution but I have never used it.
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.
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.
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.
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.
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]
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.
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.
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.
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.
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:
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.
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.
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.
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.
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
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.
Need workaround for min-height in IE
That would appear to be the case
Need workaround for min-height in IE
*beep*ty. :?
Need workaround for min-height in IE
It's early in the morning I thought your beep was a bump
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
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.
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... :?
Need workaround for min-height in IE
That code is sar-weet! Much better (I think) than the previous solution I posted.