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/
