mark110384 Posted July 23, 2008 Share Posted July 23, 2008 I currently have a table that opens over the document that adds a tint that is intiated when the user hits a button. The table only covers the part of the screen that is visible to the user and if the user scrolls down it leaves a thick white space the coding I'm using is as follows. .tint { filter:alpha(opacity=55); opacity:.55; position: absolute; width: 100%; height: 100%; min-height: 100%; top: 0px; left: 0px; background-color:#63A5E1; } body { margin:0px; width: 100%; height: 100%; } #loginbox { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; visibility: hidden; } .tint is the class for the table that will expand over the page. Any suggestions would be appreciated. Quote Link to comment https://forums.phpfreaks.com/topic/116175-help-table-to-fill-the-whole-page/ Share on other sites More sharing options...
haku Posted July 23, 2008 Share Posted July 23, 2008 suggestion: Dont use tables. Quote Link to comment https://forums.phpfreaks.com/topic/116175-help-table-to-fill-the-whole-page/#findComment-597498 Share on other sites More sharing options...
mark110384 Posted July 23, 2008 Author Share Posted July 23, 2008 How would I achieve what I want to do without tables? Quote Link to comment https://forums.phpfreaks.com/topic/116175-help-table-to-fill-the-whole-page/#findComment-597505 Share on other sites More sharing options...
haku Posted July 23, 2008 Share Posted July 23, 2008 How are you triggering the .tint? With javascript? Use a div instead of a table. Create one class or id with all the attributes of the .tint class that you have, but set the position to fixed instead of absolute. Then create another class/id with display set to none. Apply the second class/id to the div upon load, and then change the class with javascript when the trigger is clicked. Quote Link to comment https://forums.phpfreaks.com/topic/116175-help-table-to-fill-the-whole-page/#findComment-597587 Share on other sites More sharing options...
mark110384 Posted July 23, 2008 Author Share Posted July 23, 2008 Yeah, I used a div as shown bellow <div id="loginbox"> <table class="tint"> <tr> <td width></td> </tr> </table> <table class="logintable"> <tr> <td width="210" height="70"> <td width="30"><a href="javascript://" onMouseUp= "close_it()"><img src="closebutton.JPG" border="0"</a></td> </tr> </table> </div> Turns out that setting it to fixed instead of absoloute has corrected the problem. Thanks again Haku. Quote Link to comment https://forums.phpfreaks.com/topic/116175-help-table-to-fill-the-whole-page/#findComment-597614 Share on other sites More sharing options...
mark110384 Posted July 23, 2008 Author Share Posted July 23, 2008 Hmmm IE does not like that at all, for some reason there is a large white space at the bottom of the site I think it has something to do with where the <div> is placed the bottom of the coding. My coding is as follows <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Lilley and Gillie</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <Script Language="JavaScript"> <!-- Script courtesy of http://www.web-source.net - Your Guide to Professional Web Site Design and Development function load() { var load = window.open('legal_information.html','','scrollbars=yes,menubar=no,height=600,width=800,resizable=yes,toolbar=no,location=no,status=no'); } // --> </Script> <style> .navi_text:link {color:#666666; text-decoration:none;} .navi_text:visited {color:#666666; text-decoration:none;} .navi_text:active {color:#666666; text-decoration:none;} .navi_text:hover {color:#63A5E1; text-decoration:underline;} .textbg { background-image: url(text_bg.bmp); } .logintable { position: absolute; width: 30%; height: 200; top: 40%; left: 35%; background-color:#666666; } .tint { filter:alpha(opacity=55); opacity:.55; position: absolute; width: 100%; height: 100%; min-height: 100%; top: 0px; left: 0px; background-color:#63A5E1; } body { margin:0px; width: 100%; height: 100%; } #loginbox { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; visibility: hidden; } </style> <script language="javascript"> function openlogin() { document.all.loginbox.style.visibility = "visible"; } function close_it() { document.all.loginbox.style.visibility = "hidden"; } </script> </head> <body> <!--Contains Flash banner and Navigation--> <table width="64%" height="100" border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td height="2"></td> </tr> <tr> <td><param name="wmode" value="transparent"> <embed src="banner04.swf" height="170" width="100%" wmode="transparent" /></td> </tr> <tr> <td height="4"></td> </tr> </table> <table width="64%" border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td><param name="wmode" value="transparent"> <embed src="menu02.swf" height="52" width="100%" wmode="transparent" /></td> </tr> <tr> <td height="20"></td> </tr> </table> <!--Main Content of page--> <!-- Main table comtents content table--> <table width="65%" border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td width="51%" height="677"> <table width="98%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="214"> <!--table contains project info--> <table width="69%" border="0" cellpadding="0" cellspacing="0" class="textbg"> <tr> <td width="40%" height="208"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="5%" height="150"> </td> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="40%" height="150"><font face="Lucida Sans" size="3" color="#666666"> <strong>DNTM SETS SAIL</strong> <p></p></b> </font> <img src="tanker.jpg"/></td> <td> <p> </p> <p><font size="1" face="Lucida Sans" color="#666666"><font size="2" color="#000000"><br> </font>The DNTM has successfully been installed on over 50 BP vessels. The DNTM by Lilley and Gillie enables the mariner onboard a vessel to view and print up to date corrections and tracings...</font> <br><param name="wmode" value="transparent"> <embed src="more_info.swf" height="26" width="85" wmode="transparent" /></td> </tr> </table></td> <td width="5%"></td> </tr> </table></td> </tr> <tr> <td height="21"><img src="bottomtext.bmp" align="absbottom" border="0"/></td> </tr> </table></td> </tr> <tr> <td height="21"></td> </tr> <!--New potion of the site--> <tr> <td height="300"> <table width="100%" border="0" cellpadding="0" cellspacing="0" class="textbg"> <tr> <td width="5%" height="48"> </td> <td width="95%"><font face="Lucida Sans" size="3" color="#666666"><b>NEWS</b></font></td> </tr> <tr> <td> </td> <td height="261"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="13%" height="125"><img src="news_image.bmp" width = "50%"/></td> <td width="71%"><font face="Lucida sans" size="1" color="#666666">30/07/2008 - <font face="Lucida sans" size="1" color="#000000">Lilley & Gillie wins major contract to supply Navmaster ECDIS systems to 20 tankers operated by Overseas Shipholding Group, Inc.</font> OSG Ship Management (UK) Ltd has decided to fit ECDIS systems on board 20 of its tankers following shipboard trials and a competitive bidding process. The turnkey contract to supply and install these systems has been placed with Lilley & Gillie as agents... <font color="#333333"><b>More</b></font></font></td> <td width="16%"></td> </tr> <tr> <td width="13%" height="125"><img src="news_image.bmp" width="50%"/></td> <td width="71%"><font face="Lucida sans" size="1" color="#666666">10/07/2008 - <font face="Lucida sans" size="1" color="#000000">Lilley & Gillie and DPM to market the Meteo Consult Ship Performance Optimisation System.</font> Lilley & Gillie and DPM, two of the world's largest international Admiralty chart agents, have teamed up with leading weather company Meteo Consult to provide state of the art weather forecasting data to their customers worldwide. All three companies are renowned for the highest levels of quality... <font color="#333333"><b>More</b></font></font></td> <td width="16%"><font face="Lucida sans" size="1" color="#666666"> </font></td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td height="21"><img src="bottomtext.bmp" align="absbottom" border="0"/></td> </tr> <tr> <td height="31"></td> </tr> </table></td> <td width="2%"></td> <td width="52%"> <table width="100%" border="0" cellpadding="0" cellspacing="0" class="textbg"> <tr> <td width="2%" height="573"><table width="93%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="5%" height="34"> </td> <td width="77%"><font face="lucida sans" size="3" color="#666666"><b>WELCOME</b></font></td> </tr> <tr> <td height="508"> </td> <td><table width="97%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><font face="lucida sans" size="1" color="#666666">The Content of the page here</font></td> </tr> <tr> <td height="475"> </td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td width="2%" height="32"><img src="bottomtext.bmp"/></td> </tr> <tr> <td height="32" bgcolor="#FFFFFF"></td> </tr> </table></td> </tr> </table> <!-- Links amnd legal information--> <table width="64%" border="0" align="center" bgcolor="#DADADA"> <tr> <td height="29"><table width="82%" height="25" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#DADADA"> <tr> <td width="3%"></td> <td width="12%"></td> <td width="4%" height="2"></td> <td width="20%"></td> <td width="5%"></td> <td width="14%"></td> <td width="5%"></td> </tr> <tr> <td > </td> <td ><font face="lucida sans" color="#666666" size="2"><a class="navi_text" href="web3.htm"><b>HOME</b></font></a></td> <td height="23" ><img src="dot.png"/></td> <td bgcolor="#DADADA"><font face="lucida sans" color="#666666" size="2"><a class="navi_text"><b>INFORMATION</b></font></a></td> <td height="23" ><img src="dot.png"/></td> <td bgcolor="#DADADA"><font face="lucida sans" color="#666666" size="2"><a class="navi_text" href="services.html"><b>SERVICES</b></font></a></td> <td height="23" ><img src="dot.png"/></td> <td width="15%" bgcolor="#DADADA"><font face="lucida sans" color="#666666" size="2"><a class="navi_text"><b>PRODUCTS</b></font></a></td> <td width="4%" height="23" ><img src="dot.png"/></td> <td width="18%" bgcolor="#DADADA"><font face="lucida sans" color="#666666" size="2"><a class="navi_text"><b>CONTACT US</b></font></a></td> </tr> </table></td> </tr> <tr> <td height="31"><table width="75%" border="0" align="center" bgcolor="#DADADA"> <tr> <td width="74%" align="center"><font face="lucida sans" size="1" color="#666666">Copyright © Lilley and Gillie - <a class="navi_text" href="javascript:load()">Legal Information</a></font></td> </tr> </table></td> </tr> </table> <div id="loginbox"> <table class="tint"> <tr> <td width></td> </tr> </table> <table class="logintable"> <tr> <td width="210" height="70"> <td width="30"><a href="javascript://" onMouseUp= "close_it()"><img src="closebutton.JPG" border="0"</a></td> </tr> </table> </div> </body> </html> Thanks Quote Link to comment https://forums.phpfreaks.com/topic/116175-help-table-to-fill-the-whole-page/#findComment-597622 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.