On 1/24/07, phillip vaughan <[EMAIL PROTECTED]> wrote:
>
> hello,
> i am new to web design and trying to perfect the trick of getting
> the page to display the full height of the browser. i have been 90%
> successful thanks to this forum.
>
> in http://www.infinitywebdesign.org/ronnie/csstest1.html the border
> is cut off if you open the page in ie6 or 7 but only if you dont have
> the browser opened at maximum height. if you open the page in a
> minimized browser and scroll down the css styled borders are cut off.
>
> in http://www.infinitywebdesign.org/ronnie/csstest2.html the height is
> stretched out past the bottom of the browser even when there is no
> content there. if i have the browser opened to max size, it shouldnt
> show the scrollbar indicating there is more content when there isnt.
>
> thanks for any assistance
>
> --
> Phillip Vaughan
> Infinity Web Design
> www.infinitywebdesign.org
> (760) 861-2681
> ______________________________________________________________________
> 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/
First off, you might want to look over your css body attribute styles. You
have an extra semi-colon mixed in there that could potentially mess up some
stuff, or at least make it look unprofessional.
Secondly, I have encountered this problem myself. It seems to be a case of
the browsers not taking the top and bottom border width's into account when
calculating the body height, and then adding them on after adjusting the div
height, creating heights that are actually over 100% in size. I've figured
out a work around for the problem, but it is a bit messy. I've searched
endlessly for other solutions but have yet to find one, but hopefully there
is one out there. In the meantime however I'll let you in on my method of
fixing the problem.
Since adding a top and bottom border to the div just over size it, what you
can do instead to simulate the border is to add in div's within the main
div. Basically you just make them have 100% width and then the height that
you would like the border width to be. relatively position then to the top
and bottom, and set the appropriate background-color that you would like.
The only downfall to this fix is that it only supports solid colored borders
unless you create custom background-images for the div to blend in with
other styles of borders.
An example of this in CSS code is as follows:
div #topborder { width: 100%; height: 2px; background-color: red;
position:relative; top: 0; }
div #main { height: 100%; border: 2px solid red; border-top: 0px;
border-bottom: 0px; }
div #bottomborder { width: 100%; height: 2px; background-color: red;
position:relative; bottom: 0; }
Then just use the following HTML to implement it:
<div id="main>
<div id="topborder"></div>
Content here
<div id="bottomborder"></div>
</div>
Of course make sure you set left and right padding to 0 as well to avoid any
space between the "border" divs and the main div.
So like I said, it's a pretty messy solution when you'd think it would work
fine in the first place, but it's all I have to offer right now. Hope that
helps a bit.
Mattu
______________________________________________________________________
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/
