jacenta Posted July 18, 2006 Share Posted July 18, 2006 Hey,I have been looking EVERYWHERE for a solution and there seems to be none just quite yet.I've searched google and all sorts of help forums... and still zip, nothing.What I want to do is vertically-align the text in this example: http://www.tri-m.com/test.html in the middle of the white space. The problem though is that there is an unknown height of the whitespace because I want it to be that no matter what size you size the window, the content will always be vertically aligned... so I'm pretty stuck on how to do this.I'm needing the solution for this desperatly and I have been searching and trying everything for weeks. If anyone could help that would be VERY VERY apperciated.Thank you sooo much to everyone that tries this out.Once again here is the Example: http://www.tri-m.com/test.htmlHere is my code:[code] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Tri-M Systems INC.</title><style type="text/css">* {margin:0;padding:0;}html, body {height:100%;}body {color:#000;}#container-page {background:#fff;width:100%;min-height:100%; /* For Modern Browsers */height:auto !important; /* For Modern Browsers */height:100%; /* For IE */position:relative;text-align:left;margin:0 auto;}#container-head {background:#fff;}#header {background-color:#0000FF;min-width:830px;width:expression(document.body.clientWidth < 832 ? "830px" : "auto" );height:81px;position:relative;}#container-content {min-width:830px;width:expression(document.body.clientWidth < 832 ? "830px" : "auto" );text-align:center;position:relative;padding: 0 0 162px 0;}#container-content:after {height:0;clear:both;display:block;content:".";visibility:hidden;}#content-sec ul,#content-sec ul li {list-style: none none;}#container-foot{background-color:#ff0000;width:100%;min-width:830px;width:expression(document.body.clientWidth < 832 ? "830px" : "auto" );height:162px;position:absolute;bottom:0 !important;bottom:-1px; /* For Certain IE widths */}#foot {height:162px;}</style></head><body><div id="container-page"> <div id="container-head"> <div id="header"> </div><!-- END "header" --> </div><!-- END "container-head" --> <div id="container-content"> <center> <div id="box">VERTICAL ALIGN THIS IN WHITE SPACE</div> <!-- END "box" --> </center> </div><!-- END "container-content" --> <div id="container-foot"> <div id="foot"> </div><!-- END "foot" --> </div><!-- END "container-foot" --></div><!-- END "container-page" --></body></html> [/code]- Jacenta :'( Quote Link to comment Share on other sites More sharing options...
moberemk Posted July 18, 2006 Share Posted July 18, 2006 As far as I know? It should work with just the vertical-align attribute. But of course, it's never that easy, is it? And it isn't in this case either. As far as I know, (and I'll have to look this up to be sure) vertical-align: middle; doesn't work in IE, and from what I've seen, no other browsers. I'd love to be proven wrong on this though. Quote Link to comment Share on other sites More sharing options...
jacenta Posted July 18, 2006 Author Share Posted July 18, 2006 Exactly.... vertical-align is not supported in IE and for this... it cannot even work for FF because there is no exact specified height... soooo I am STUCK.I have tried tables... but than agian when I put height:100%... in IE... the white space becomes the actual 100% of the browser instead of the user's view point and in FF... the 100% does nothing.I have also tried line-height and display:table-cell solutions.. and still none. :SSOOO frusterating! :(- Jacenta Quote Link to comment Share on other sites More sharing options...
jacenta Posted July 19, 2006 Author Share Posted July 19, 2006 Does anyone else have any ideas? Quote Link to comment Share on other sites More sharing options...
nogray Posted July 20, 2006 Share Posted July 20, 2006 Height and CSS are not very friendly, and I think your task is almost impossible using divs but I am not sure.You can use some javascript to postion the box div when the page load, something like this will work[code]<script language="javascript"> function process_box(align){ var white_height = document.body.scrollHeight - document.getElementById('container-foot').scrollHeight - document.getElementById('container-head').scrollHeight; if (align=='middle') var h = parseInt((white_height/2) - (document.getElementById('box').scrollHeight / 2)); else if (align=='bottom') var h = white_height - document.getElementById('box').scrollHeight; else h = -1; if (h > 0) document.getElementById('box').style.marginTop = h+"px"; } window.onload=process_box('middle');</script>[/code]You can change the 'middle' to bottom if you want to align the box to the bottom. Quote Link to comment Share on other sites More sharing options...
jacenta Posted July 21, 2006 Author Share Posted July 21, 2006 Hey! Thanks for your help. :)I ended up putting all my content into the test.html that I showed you and this is what I have come up with:http://www.tri-m.com/index_footer_new.html. I can't seem to get the javascript to work though.Do you know what I am doing wrong?I even tried it in the simple http://www.tri-m.com/test.html and it won't work. :SIf this javascript does do the job that would be AWSOME!!!! :D- Jacenta Quote Link to comment Share on other sites More sharing options...
nogray Posted July 21, 2006 Share Posted July 21, 2006 just take this line out[code]window.onload=process_box('middle');[/code]and add the function to the body onload event[code]<body onload="swap(); process_box('middle');">[/code]and it should work. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.