[css-d] min-height, max-height, vertical centering and few other things
hello all, it's me again. i have a mockup of the new design here http://www.flickr.com/photos/king-muffin/6069114194/in/photostream , its work-in-progress here http://adif.sk/testversion/ with the important files here http://adif.sk/testversion/index.html and here http://adif.sk/testversion/index_style.css . i really hope i'm not going to end in spam filters because of the links :D anyway, the problems, or the TODO-list: 1) the background image. rright now, it doesn't show up in the IE6, i need to get to that. if you knew about a good tutorial on fixing static positioning in IE6, please let me know. also, i will need to add there a jQuery sliding gallery, so that it would show projects, and not this temporary background. KEYWORDS/TAGS: IE6 static positioning, jQuery sliding fading automatically changing gallery 2) the black bars above and below silver content. please see Opera and Firefox renderings for the contrast; there are some issues with the min-height property being interpreted differently. HOWEVER, before i start solving this problem, i would like to point out a third issue: 3) the vertical centering of the content. the behaviour i would like to achieve is as follows: - max-height of the #header and #bottom to be 100px - min-height of the #silver-middle to be 600px - if the #silver-middle's content doesn't stretch the page vertically (ie. its height is around the 600px), center it vertically and stretch #header and #bottom accordingly. - if the #silver-middle's content does stretch the page vertically (like it does now, on 6.9.2011), i don't really need to care about #header's and #bottom's height, just don't let them grow over 100px, so it doesn't make a mess. i would really like some aid from you on this third issue, as so far i was unable to yield successful results, and in the question of design this is my greatest concern at the moment. 4) implement dynamic loading of content in the left part of the screen, after clicking the navigation's left and right buttons. what would be the simplest way? am i able to generate the needed html dynamically, if i (the script) had access to the mysql database? how is it with security? if you reached this point, thank you for reading my wishes. i would be very thankful if you could help me with any of these issues. ~Adam __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-height best-practices
On Thu, Dec 16, 2010 at 12:23 PM, David Hucklesby huckle...@gmail.com wrote: On 12/16/10 10:28 AM, Chetan Crasta wrote re: http://fattoad.co.uk/ Give div#inner_wrap a height of around 1100px. The testimonial is getting cutoff because the height of 1015px is insufficient. FWIW I generally find that min-height works better than plain height in a majority of cases. (And height behaves like min-height in IE 6...) Cordially, David -- I hope it is okay to fork this discussion. (didn't want to disturb the original thread) Reading David's response I realize that I vastly under use min-height. I would like to correct that and start using it in appropriate settings. For the life of me I can't recall why I shied away from min-height a few years back. I started to use it. But, ran into some trouble and an article or two that somehow convinced me that I was better off trying to make due without it. That was then, this is now. I am hoping that someone might be able to point to a good source of info on proper use of min-height so that I don't open a can of worms with cross-browser issues or other gotchas. Regards, Claude Needham __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-height best-practices
I am hoping that someone might be able to point to a good source of info on proper use of min-height This is a good reference on min-height: http://reference.sitepoint.com/css/min-height ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-height best-practices
On Dec 17, 2010, at 5:45 AM, Claude Needham wrote: I am hoping that someone might be able to point to a good source of info on proper use of min-height so that I don't open a can of worms with cross-browser issues or other gotchas. The spec is a good start :-) see 10.7: http://www.w3.org/TR/CSS21/visudet.html#propdef-min-height one or two things to note: * min-height (and max-height) trigger 'haslayout' in IE 7 http://www.satzansatz.de/cssd/onhavinglayout.html#prop http://www.satzansatz.de/cssd/onhavinglayout.html#reset * conflicting behaviour with margin-collapsing see Bruno's test / demo page: http://www.brunildo.org/test/collminmax.html Neither of these issues have ever prevented me from using this property. ps - Can someone send me a screenshot of what IE 9 does with Bruno's page ? Tia. Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-height best-practices
On Thu, Dec 16, 2010 at 9:32 PM, Chetan Crasta chetancra...@gmail.com wrote: This is a good reference on min-height: http://reference.sitepoint.com/css/min-height On Thu, Dec 16, 2010 at 10:04 PM, Philippe Wittenbergh e...@l-c-n.com wrote: The spec is a good start :-) see 10.7: http://www.w3.org/TR/CSS21/visudet.html#propdef-min-height one or two things to note: * min-height (and max-height) trigger 'haslayout' in IE 7 http://www.satzansatz.de/cssd/onhavinglayout.html#prop http://www.satzansatz.de/cssd/onhavinglayout.html#reset * conflicting behaviour with margin-collapsing see Bruno's test / demo page: http://www.brunildo.org/test/collminmax.html Thanks to you both for the references. I'll dig into them. As you say the spec is a good place to start. However, the parts I am mostly looking is how navigate the idiosyncrasies created by implementations from the various browsers. The other references look to be good starting points for those. Thanks again, Claude __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Min-Height
I'm trying to use min-height in FF, which is supposed to support the
style, but it's ignoring it. IE, ironically enough, is honoring it because
I'm using the IE7 javscript library.
Anyway, here's the relevent code.
fieldset {
border:1px solid #369;
border-left:3.4em solid #369;
display:block;
margin-top:1em;
padding:1em 1em 1em 2.5em;
padding-top:0;
position:relative;
}
#dealInfoLegend {
height:185px;
left:-4.7em;
margin-top:-90px;
position:absolute;
top:50%;
width:12px;
}
#dealStructure {
clear:right;
float:none;
min-height:185px;
}
fieldset id=dealStructure
img id=dealInfoLegend src=images/dealInfoLegend.gif alt=Deal
Information
Why is Firefox messing with me?
--
Marc Luzietti
Flagship Project
Bayview Financial, L.P.
(305) 341-5624
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Min-Height
Interesting... I don't know why (I didn't find anything on the spec) but it
seems you need to specify the height property. It also seems that pretty
much any value works.
On 8/24/07, [EMAIL PROTECTED]
[EMAIL PROTECTED] wrote:
I'm trying to use min-height in FF, which is supposed to support the
style, but it's ignoring it. IE, ironically enough, is honoring it because
I'm using the IE7 javscript library.
Anyway, here's the relevent code.
fieldset {
border:1px solid #369;
border-left:3.4em solid #369;
display:block;
margin-top:1em;
padding:1em 1em 1em 2.5em;
padding-top:0;
position:relative;
}
#dealInfoLegend {
height:185px;
left:-4.7em;
margin-top:-90px;
position:absolute;
top:50%;
width:12px;
}
#dealStructure {
clear:right;
float:none;
min-height:185px;
}
fieldset id=dealStructure
img id=dealInfoLegend src=images/dealInfoLegend.gif alt=Deal
Information
Why is Firefox messing with me?
--
Marc Luzietti
Flagship Project
Bayview Financial, L.P.
(305) 341-5624
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Min-Height
On Aug 25, 2007, at 3:48 AM, [EMAIL PROTECTED] wrote: I'm trying to use min-height in FF, which is supposed to support the style, but it's ignoring it. IE, ironically enough, is honoring it because I'm using the IE7 javscript library. Specifically 'min-height' as applied to fieldset. It is a known bug: https://bugzilla.mozilla.org/show_bug.cgi?id=210094 (uly workaround: wrap the content of the fieldset in a div and apply the min-height to that div...) Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] min height with ie and ff
I did this a while back and cannot remember how. I am sure I set 3 height properties to get it working and used !important somewhere. min-height:400px; height:400px; I want the div to have a min height of 400px; min-height works but if I put in the second height attribute the box does not get bigger as the content expands in FF; any ideas? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min height with ie and ff
In answer to my own question: min-height:400px; height:400px; height:auto !important; does height:auto !important; validate? - Original Message - From: Ross [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: Wednesday, June 13, 2007 9:26 AM Subject: [css-d] min height with ie and ff I did this a while back and cannot remember how. I am sure I set 3 height properties to get it working and used !important somewhere. min-height:400px; height:400px; I want the div to have a min height of 400px; min-height works but if I put in the second height attribute the box does not get bigger as the content expands in FF; any ideas? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min height with ie and ff
Ross wrote: In answer to my own question: min-height:400px; height:400px; height:auto !important; does height:auto !important; validate? It should, !important is recognized by standards compliant browsers. It's only the quirky ones that misunderstand it. -- Thanks, Jim __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min height with ie and ff
Ross wrote:
I did this a while back and cannot remember how.
I am sure I set 3 height properties to get it working and used
!important somewhere.
min-height:400px; height:400px;
I want the div to have a min height of 400px; min-height works but if
I put in the second height attribute the box does not get bigger as
the content expands in FF;
any ideas?
You'll need height and min-height as you suspected, but not exactly like
that. The modern standards compliant browsers understand min-height but
IE6 doesn't. However, IE6 treats height like min-height so all you have
to do is feed height only to IE6. You can feed height to IE6 with your
method of choice, whether it be a conditional comment or * html hack.
div { min-height: 400px; }
* html div { height: 400px; }
AC
--
Audra Coldiron
Rock-n-Roll Design Hosting
http://rock-n-roll-design.com
KarmaCMS ( http://karmawizard.com ) - the ultimate CSS styled CMS.
Pre-made designs, designer tools, and reseller program available!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min height with ie and ff
You can feed height to IE6 with your method of choice, whether it be
a conditional comment or * html hack.
Actually, I've done it like this before, and it works:
div {
height:100%;
min-height:100%;
}
No need for hacks or conditionals. The min-height will override the
height, because it's last. IE6 doesn't recognize min-height, so it
ignores it and sticks with height. But anything that recognizes
min-height will apply it.
In any case, you also need to have:
html, body {
height:100%;
min-height:100%;
}
to make whatever div you're using go to 100% also.
:)
~Shelly
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min height with ie and ff
[snip]
In any case, you also need to have:
html, body {
height:100%;
min-height:100%;
}
to make whatever div you're using go to 100% also.
:)
~Shelly
[/snip]
Um, you only need this if the div you're trying to size doesn't have a
parent with a height setting. Else this could have some unpredictable
results on some layouts (think a footer that the user DOESN'T want
aligned to the bottom of the nav window if there isn't enough content
*dunno why, but there's no accounting for taste*). In fact, I would nix
the idea of the html body element all together because if you're sizing
a div's height and it isn't working as you anticipate, it'll be easier
to debug (because you probably DID want to set a height for its parent
but just forgot to).
Also, this technique doesn't work if you want min-height to be a static
value as the standards compliant browsers will render the element at the
static height and never resize it. Just in case someone decides to try
this technique for liquid images, etc. ;)
But, it's a good way to shave off a couple bytes of file size if you
want the settings to be 100%.
--
Thanks,
Jim
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Min-height, height, and viewport size
Zoe, Audra, Thank you for your responses. I now have a clearer understanding of how elements inherit height from each other. It seems that if there is a way to do this, it will involve some very clever manipulations of div tags. More than I can figure out right now, so I've opted to go with Audra's suggestion of a simple solid red coloured border for now. It will suffice until inspiration hits and I can pull off something fancier. -- Dave M G CSSed Zend Studio 5.5 Photoshop 7 (Wine) Inkscape, GIMP, Ubuntu 7.04 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Min-height, height, and viewport size
Audra,
Thank you for replying.
It should be...
#whole { min-height: 100%; }
You described it correctly at first so did you mis-type perhaps?
Yes, that was a typo. Thank you for catching it.
Just to be double sure, I rechecked my CSS code and uploaded it again.
The html and body tags are set to height: 100%, and the #whole
containter is set to min-height: 100%.
But the problem as originally reported is still there.
What am I missing?
--
Dave M G
CSSed
Zend Studio 5.5
Photoshop 7 (Wine)
Inkscape, GIMP, Ubuntu 7.04
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Min-height, height, and viewport size
Dave M G wrote:
Audra wrote:
It should be...
#whole { min-height: 100%; }
You described it correctly at first so did you mis-type perhaps?
Yes, that was a typo. Thank you for catching it.
Just to be double sure, I rechecked my CSS code and uploaded it again.
The html and body tags are set to height: 100%, and the #whole
containter is set to min-height: 100%.
But the problem as originally reported is still there.
Dave,
Your #whole div *is* filling the browser window. But the red borders are
not actually borders on it, but elements nested within it. You haven't
told the bottom one to move to the bottom of its containing element, the
#whole div. You could do so with absolute positioning.
The problem then becomes that the left and right red borders, again
nested divs, do not stretch down the full height of #whole. This is
because #whole only has a min-height on it, not a height, and they need
their parent to have a height that they can base their own height or
min-height on.
You can probably get it to work by messing with table display properties
instead, then using the height stuff for IE hacks. Not sure how IE 7
will handle that, though, since it doesn't have all the auto-stretch
bugs that IE 6 has but also doesn't have support for table display
properties.
I'm afraid I don't have time to try a whole new system that might be
required in your situation, but hopefully that gives you additional
understanding about what is going on and some ideas about where to turn
next for a solution.
Best,
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Min-height, height, and viewport size
Dave M G wrote:
Audra,
Thank you for replying.
It should be...
#whole { min-height: 100%; }
You described it correctly at first so did you mis-type perhaps?
Yes, that was a typo. Thank you for catching it.
Just to be double sure, I rechecked my CSS code and uploaded it again.
The html and body tags are set to height: 100%, and the #whole
containter is set to min-height: 100%.
But the problem as originally reported is still there.
What am I missing?
lol... yeah, that'll teach me to reply w/o looking at the site first.
As other options to what Zoe provided you could do one of the following:
1. Place a border on the body or the #whole
example - body { border: solid 20px red; }
drawbacks: you can't have the specific beveled look you have now cross
browser and there will always be a vertical scrollbar equal to border
width X 2.
2. Add another wrapper div inside #whole (maybe inner - I saw you
closed it but didn't see an opening), place background images for left
and right borders on these div's, then place two actual images in your
HTML for the top and bottom borders and stretch them to width: 100%.
#whole {
height: 100%;
background: url(borderleft.png) repeat-y;
}
#inside {
min-height: 100%;
position: relative;
background: url(borderright.png) top right repeat-y;
}
img#top {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 25px;
}
img#bottom {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 25px;
}
You'll need to create a small image for the top and bottom border like
you did for left and right. You'll also probably need to adjust the
image positioning with negative numbers to taste.
drawbacks: mixing style and content: an extra div and two images in
your HTML whose only purpose is visual. Also since the top and bottom
images overlap the borders on the backgrounds it sort of destroys the
illusion but that could just be me :-)
AC
--
Audra Coldiron
Rock-n-Roll Design Hosting
http://rock-n-roll-design.com
KarmaCMS ( http://karmawizard.com ) - the ultimate CSS styled CMS.
Pre-made designs, designer tools, and reseller program available!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Min-height, height, and viewport size
html {height:100%}
body {height: 100%}
#whole {height: 100%} /* This is the id of a div that contains the border */
However, it simply does not work as described. At least not in FireFox
where I primarily need it to work.
The red border of the #whole container will expand to the length of the
content inside. But if the content is not as long as the viewport, the
red border shrinks so that it is no longer touching the bottomof the
viewport.
Where did I go wrong?
Thank you for any advice.
It should be...
#whole { min-height: 100%; }
then for IE6...
#whole { height: 100%; }
You described it correctly at first so did you mis-type perhaps?
AC
--
Audra Coldiron
Rock-n-Roll Design Hosting
http://rock-n-roll-design.com
KarmaCMS ( http://karmawizard.com ) - the ultimate CSS styled CMS.
Pre-made designs, designer tools, and reseller program available!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Min-Height Fix/Hack?
Hi Craig,
The min- and max- properties aren't supported in IE browsers prior to
version 7.
There's a great article on the ALA site (written by Matthew Levine), it
covers getting all your columns to be the same length and how to prevent the
main content from bleeding over the footer, and a bunch more:
In Search of the Holy Grail:
http://www.alistapart.com/articles/holygrail
I hope you find it useful, I know I did.
Joe
- Original Message -
From: Craig Givens [EMAIL PROTECTED]
To: css-d css-d@lists.css-discuss.org
Sent: Sunday, April 08, 2007 11:51 PM
Subject: [css-d] Min-Height Fix/Hack?
Hi -
Does anyone know a good min-height fix/hack that would work for my page:
http://home.bellsouth.net/p/PWP-dzine
I'm trying to get the body text not to bleed over the footer and
expand gracefully. The same effect happens on page2.html - which is
linked from that homepage.
I've tried this code:
contents {
width:970px;
background:#ff;
display: table;
min-height:500px;
height:auto !important;
height:500px;
}
but that didn't seem to work well.
thanks for any help!
-Craig
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Min-Height Fix/Hack?
Hi -
Does anyone know a good min-height fix/hack that would work for my page:
http://home.bellsouth.net/p/PWP-dzine
I'm trying to get the body text not to bleed over the footer and
expand gracefully. The same effect happens on page2.html - which is
linked from that homepage.
I've tried this code:
contents {
width:970px;
background:#ff;
display: table;
min-height:500px;
height:auto !important;
height:500px;
}
but that didn't seem to work well.
thanks for any help!
-Craig
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-height: which one does it right FF2 or IE7?
Thank you, Bruno, your explanation made it clear to me.
My conclusion in regard to my test case is: It does make sense, that
both top and bottom specified is equivalent to having a height
specified.
It seems related to the fact that your containing block has both top and
bottom specified, and this is more or less equivalent to having a height
specified.
Therefore Firefox, Safari, iCab render my test case right. Thank you,
Philippe, for your browser tests.
--
{U}()Cimo
Michal Cizmazia
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] min-height: which one does it right FF2 or IE7?
Please, see my test case:
http://cim.szm.sk/min-height.html
My question is: Which browser does it right, FF2 or IE7?
--
Text of my test case:
CSS 2.1 Specification: The percentage is calculated with respect to
the height of the generated box's containing block. If the height of
the containing block is not specified explicitly (i.e., it depends on
content height), and this element is not absolutely positioned, the
percentage value is treated as '0' (for 'min-height')
It seems to me, that the expression this element refers to the
containing block (black border) not the generated box (orange
background).
Firefox2 applies min-height in both cases and does not require the
generated box to be absolutely positioned.
IE7 requires the generated box to be absolutely positioned. MSDN does
not mention absolute positioning, but refers to the specification.
MSDN: If the height of the containing block is not explicitly set,
then the element has no minimum height and the minHeight property is
interpreted as 0%.
Opera9 ignores min-height in both cases.
--
{U}()Cimo
Michal Cizmazia
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-height: which one does it right FF2 or IE7?
Michal Cizmazia wrote: http://cim.szm.sk/min-height.html My question is: Which browser does it right, FF2 or IE7? -- Text of my test case: CSS 2.1 Specification: The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as '0' (for 'min-height') It seems to me, that the expression this element refers to the containing block (black border) not the generated box (orange background). Hmmm, no, I think this element is the element having the min-height declaration, so in your case the orange one, not the containing block. That sentence in the spec is about the same as for the 'height' case, where there is also the following clarification: Note that the height of the containing block of an absolutely positioned element is independent of the size of the element itself, and thus a percentage height on such an element can always be resolved. According to my understanding this clarifies that absolutely positioned refers to the element having the [min-]height property, not to the containing block. So the Firefox behaviour that your test case shows seems somewhat incorrect to me. It seems related to the fact that your containing block has both top and bottom specified, and this is more or less equivalent to having a height specified. Indeed if you remove the bottom property and add some content to your contaning block (so that its height becomes dependent on this content), then _only_ the case with position:absolute on the orange box causes the orange box itself to stretch. Bruno __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-height: which one does it right FF2 or IE7?
On Jan 14, 2007, at 5:43 AM, Bruno Fassino wrote: Michal Cizmazia wrote: http://cim.szm.sk/min-height.html My question is: Which browser does it right, FF2 or IE7? -- Text of my test case: CSS 2.1 Specification: The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as '0' (for 'min-height') It seems to me, that the expression this element refers to the containing block (black border) not the generated box (orange background). Hmmm, no, I think this element is the element having the min-height declaration, so in your case the orange one, not the containing block. That sentence in the spec is about the same as for the 'height' case, where there is also the following clarification: Note that the height of the containing block of an absolutely positioned element is independent of the size of the element itself, and thus a percentage height on such an element can always be resolved. According to my understanding this clarifies that absolutely positioned refers to the element having the [min-]height property, not to the containing block. So the Firefox behaviour that your test case shows seems somewhat incorrect to me. Firefox 2.0, the latest trunk Gecko builds and the latest nightly builds of WebKit (Safari) all make the orange box the height of the parent box. iCab 3.0 also makes the orange box the size of the black-bordered box in both cases. It seems related to the fact that your containing block has both top and bottom specified, and this is more or less equivalent to having a height specified. Indeed if you remove the bottom property and add some content to your contaning block (so that its height becomes dependent on this content), then _only_ the case with position:absolute on the orange box causes the orange box itself to stretch. And if you leave the bottom property in, but add some content to the absolute positioned box, the a.p. box will be sized accordingly (the same as in http://cim.szm.sk/min-height.html) - computed height: 65px on my side, but the content will overflow. The orange box will take the height (65px) of the parent. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] min-height in IE
Hi I know that the min-height property is not supported in IE, but does any one have an idea how I can best get round this problem? Thanks very much Martyn __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-height in IE
On 4/5/06, Martyn [EMAIL PROTECTED] wrote:
Hi
I know that the min-height property is not supported in IE, but does any one
have an idea how I can best get round this problem?
one method:
/* this style gets sent to all browsers, but ie doesn't get it */
.class-name {min-height: 10em;}
/* the following tells non-mac ie browsers a height, which is
*treated* as min-height since ie expands it anyway */
/* hide from ie mac \*/
* html .class-name {height: 10em;}/* end hide */
according to what i know, this will also work fine in ie7 since that
browser will no longer see the * html styling rules.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Min-Height
On 2/24/06, Paul Novitski [EMAIL PROTECTED] wrote:
At 08:00 AM 2/24/2006, Chris Ovenden wrote:
This area is slightly problematic, because min-height is not yet
supported by IE7 (though we're promised it for the proper release). If
we assume it will be included, the neatest solution that works in all
browsers is:
#element { min-height:100px }
* html #element { height:100px }
Some people are against CSS hacks, but this is the only solution I
know of that is valid CSS and unlikely to have any adverse effects in
the future. [AFAIK (I can't test it here), the /*\*/ hack Stu uses is
not necessary, and in fact will make it break in IE5/mac.]
Internet Explorer conditional comments are validated by the W3C
engine and allow one to differentiate IE from other browsers and to
differentiate among IE versions.
Well, yes, but that isn't a CSS solution, it's a markup solution. Many
developers are either unable or unwillng to change the markup in this
way. It also has maintenance implications.
Chris
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Min-Height
This area is slightly problematic, because min-height is not yet
supported by IE7 (though we're promised it for the proper release). If
we assume it will be included, the neatest solution that works in all
browsers is:
#element { min-height:100px }
* html #element { height:100px }
Some people are against CSS hacks, but this is the only solution I
know of that is valid CSS and unlikely to have any adverse effects in
the future. [AFAIK (I can't test it here), the /*\*/ hack Stu uses is
not necessary, and in fact will make it break in IE5/mac.]
If by some madness IE7 doesn't support min-height this will at least
not harm matters, although an additional hack would probably be
needed. Let's hope not.
Chris
On 2/23/06, jeremy [EMAIL PROTECTED] wrote:
hey there...
I was able to get the min height property to work in IE, but it requires
using a hack.
a quick google search on min-height will give you MANY different hacks
available. I eneded up going with one from Stew
http://www.cssplay.co.uk/boxes/minheight.html
the only problem with it is that it exploits a bug in IE. Most of the
hacks for min-height do.
simple amount off code, not complicated, but not the cleanest.
-jeremy
I am having trouble getting min-height working correctly in IE. Someone
suggested that I use height instead, because it acts as min-height does
when interpreted by IE. However the text just overflowed when it hit the
bottom of the page. My site is: http://swilly.tk/~swilly/secondpres/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Min-Height
It's hard to know what specifically is wrong, looking at your page. But generally, min-height (and, in IE6-, height), as the name suggests, only regulates the size of a box up til the point when it is filled with text. Beyond this, the box will expand to enclose it UNLESS it is floated, in which case other measures are needed to make it enclose. On 2/23/06, swilly [EMAIL PROTECTED] wrote: I am having trouble getting min-height working correctly in IE. Someone suggested that I use height instead, because it acts as min-height does when interpreted by IE. However the text just overflowed when it hit the bottom of the page. My site is: http://swilly.tk/~swilly/secondpres/ Any help is greatly appreciated __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Min-Height
hey there... I was able to get the min height property to work in IE, but it requires using a hack. a quick google search on min-height will give you MANY different hacks available. I eneded up going with one from Stew http://www.cssplay.co.uk/boxes/minheight.html the only problem with it is that it exploits a bug in IE. Most of the hacks for min-height do. simple amount off code, not complicated, but not the cleanest. -jeremy I am having trouble getting min-height working correctly in IE. Someone suggested that I use height instead, because it acts as min-height does when interpreted by IE. However the text just overflowed when it hit the bottom of the page. My site is: http://swilly.tk/~swilly/secondpres/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Min-Height
I am having trouble getting min-height working correctly in IE. Someone suggested that I use height instead, because it acts as min-height does when interpreted by IE. However the text just overflowed when it hit the bottom of the page. My site is: http://swilly.tk/~swilly/secondpres/ Any help is greatly appreciated __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-height and IE
Thanks! I particularly like the doxdesk solution, it's a lot cleaner and won't invalidate my CSS with MS cruft Thanks again, -Jay On Monday 07 November 2005 7:06 pm, David Laakso wrote: [..] These are some methods to achieve min-max width in IE. http://www.svendtofte.com/code/max_width_in_ie/ http://www.gunlaug.no/homesite/main_8_2.html http://www.doxdesk.com/software/js/minmax.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-height and IE
Actually, if you just need min-height, it tends to be somewhat cleaner just to feed IE a height value. But for max-height, expressions are especially useful. Only one thing; has anyone figured out how to use em values in expressions? clientHeight and clientWidth return pixels. -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! Please avoid sending me Word or PowerPoint attachments. See http://www.gnu.org/philosophy/no-word-attachments.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-height and IE
I don't suppose there's a similar trick to get IE to do a max-width
property?
On Thursday 03 November 2005 10:19 am, Justin Reid wrote:
the best way to do this is to give IE a height value equal to the
minimum height that you want, in this case 300px; IE uses the height
value just like a min-height already, and if contents stretch beyond
it's height value then that container will still continue to stretch.
Then what you then need to do is override that height value for other
browsers, because the will not stretch the container's height for its
contents. for example:
.box
{
height: 300px; /* ie's min-height equivalent */
min-height: 300px;
}
/* this uses the first child selector that IE doesn't understand to
remove height restrictions */
htmlbody .box
{
height: auto;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-height and IE
Jay Loden wrote: I don't suppose there's a similar trick to get IE to do a max-width property? On Thursday 03 November 2005 10:19 am, Justin Reid wrote: [..] These are some methods to achieve min-max width in IE. http://www.svendtofte.com/code/max_width_in_ie/ http://www.gunlaug.no/homesite/main_8_2.html http://www.doxdesk.com/software/js/minmax.html Best, ~dL __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] min-height and IE
Good morning,
I am struggling with the following code:
div id=messageCentre
h2/h2
dl
dt/dt
dd/dd
dt/dt
dd/dd
dt/dt
dd/dd
/dl
/div
where
#messageCentre{
width:470px;
border: 1px solid #2b4295;
margin-bottom: 35px;
background-image: url(/Images/messageCentre.gif) bottom left
no-repeat;
min-height: 300px;
}
The number of dtdd combinations is variable and my image is 172 x 258.
I want the div to always stay large enough for the graphic. I can get it
to work in Firefox but not IE. Any suggestions for something to force IE
into line? I also tried putting the graphic on the page instead of a
background image but using postion: absolute meant that as the div got
larger the image didn't move. I want the image to sit on the bottom
border.
Any help will be most appreciated!
Thanks,
Juli
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-height and IE
Juli Waddell wrote:
I am struggling with the following code:
#messageCentre{
width:470px;
(some more styles)
min-height: 300px;
}
Add (at the bottom of stylesheet) :
@media all {
* html #messageCentre{height: 300px;}
}
...and IE/win will act as if it was served min-height.
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-height and IE
#messageCentre{
width:470px;
border: 1px solid #2b4295;
margin-bottom: 35px;
background-image: url(/Images/messageCentre.gif) bottom left
no-repeat;
min-height: 300px;
}
The number of dtdd combinations is variable and my image is 172 x 258.
I want the div to always stay large enough for the graphic. I can get it
to work in Firefox but not IE. Any suggestions for something to force IE
into line?
IE Win up to version 6 doesn't recognise min-height, but thinks height
is min-height. Add in a rule (with the comments before and after):
/* Fix IE Win, hide from IE Mac \*/
* html #messageCentre {
height: 300px;
}
/* end hiding */
The first comment makes sure IE on the Macintosh doesn't see the next
rule; the * html makes sure only IE up to 6 applies the rule; and the
final comment lets IE Mac see whatever comes after. Have a look in the
list wiki under Tan hack and star-html hack for more info.
HTH,
Nick.
--
Nick Fitzsimons
http://www.nickfitz.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-height issues: please help!\
Tuesday, September 20, 2005, 1:22:47 AM, John wrote: Home Page: http://www.bol.ucla.edu/ Right panel looks fine in Firefox. Not so in IE. It's fine, you just need it to /look/ like the right panel extends to the bottom. http://www.alistapart.com/articles/fauxcolumns/ will fix you up. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] min-height issues: please help!\
I haven't gotten any sleep for a couple days trying to solve this problem and I'm under (now behind) deadline, so I'll keep it brief. I've already tried the mezzoblue solution and that seemed to just make it worse, which would indicate a syntax problem on my part. I'd rather start at baseline and go from there so here goes: I've been working on a site reconceptualization... baby steps as I'm having to manage up word. Reviewed all my work in Firefox. Home Page: http://www.bol.ucla.edu/ Right panel looks fine in Firefox. Not so in IE. Here's the include for the right panel, everything looks OK here: http://www.bol.ucla.edu/inc/rightpanel.html Here's the stylesheet: http://www.bol.ucla.edu/css/cssmain/main_main.css From everything I've read, The min-height attribute is the culprit, but all of the fixes I've tried haven't worked, so I'm stuck. I need the right panel to fill to the footer, and I need it to expand to accomodate different heights. I'm really stuck here and I could really use some help. I'm going to sleep: hopefully the gods will smile down on me, or at least my inbox. Thanks in advance. - John __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
