Tue, 2013-02-19 16:04
See web page at www.efficertain.com/mortgageinvestor1.php
The text in the 'footerbox' div (red border) seems to be wrapping prematurely, maybe either following the 'credbox' div (green border) or maybe due to floating around the 'requestbox' div
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <?php $filename = basename($_SERVER['PHP_SELF']); ?> <html> <head> <style media="all" title="mystyles" type="text/css"> body { background-color: #fff2e5; color: #000000; font-family: Verdana, Geneva, Arial, sans-serif; font-size: small; } h1 { font-size: extra large; font-style: italic; text-align: center; } .quotation { font-style: italics; font-size: larger; font-color: #00007e; font-family: freestyle script, monotype corsiva, cursive; margin-top: 0em; margin-bottom: 0em; } .signature { margin-top: 0em; margin-bottom: 0em; font-style: italics; font-color: #00007e; font-family: freestyle script, monotype corsiva, cursive; text-align: right; font-size: 150%; } #canvas { background-color: #CDF3FF; position: relative; height: 1300px; width: 700px; margin: auto; padding: 2px 10px 2px 10px;} #titlebox { } #contentzonebox { background-color: #CDF3FF; background-image: url("images/grandparentsgrandchildren.jpg"); background-repeat: no-repeat; font-size: large; height: 1125px; border: 1px solid black; padding: 10px; } #footerbox { height: 50px; border: 1px solid red; padding: 10px; } #relevantimagebox { margin: 3px 3px auto auto; width: 170px; height: 180px; position: relative; right: 3px; } #solutionbox { width: 300px; position: relative; top: -200px; padding: 0px 10px 0px 10px; background-color: #ffffff; opacity:0.4; border-radius: 15px; border: 0px solid black; } #wiifmbox { background-color: #ffffff; width: 400px; position: relative; top: 50px; border: 1px solid #b899c8; border-radius: 15px; box-shadow: 10px 10px 5px #888888; } #requestbox { position: relative; font-size: small; bottom: 615px; float: right; width: 200px; height: 365px; padding: 2px 3px 2px 15px; margin: 0px 3px 3px 3px; background-color: #fff2e5; border: 1px solid #fff2e5; border-radius: 15px } #credbox { width: 444px; position: relative; top: 70px; border: 1px solid green; padding: 0px 5px 0px 5px;} </style> </head> <body> <div id='canvas'> <div id='titlebox'><h1>Private Mortgage Lender Deal Zone</h1></div> <div id='contentzonebox'> <div id='relevantimagebox'><image src="images/house.jpg"></div> <div id='solutionbox'> <p>Work your money <strong><u>smarter</strong></u> as a private mortgage lender!</p> <p>Lend at 7-15% interest!</p> <p>Find opportunities here</p> </div><!--solutionbox--> <div id='wiifmbox'> <ul> <li style="list-style-image: url(images/listmarker.jpg); margin-bottom:10px">Enjoy <strong><u>peace of mind</strong></u> through property-secured investing in private mortgages</li> <li style="list-style-image: url(images/listmarker.jpg); margin-bottom:10px">Achieve your <strong><u>retirement goals</strong></u> with wealth building profits that capture the power of compounding</li> <li style="list-style-image: url(images/listmarker.jpg); margin-bottom:10px">Become the banker and choose the mortgages that are <strong><u>right for you</strong></u> to finance on a no-obligation basis</li> <li style="list-style-image: url(images/listmarker.jpg)">Earn <strong><u>monthly cash flow</strong></u> from your investments</li> </ul> </div><!--wiifmbox--> <div id='credbox'> <p class='quotation'>"We just completed our first private mortgage a couple of months ago and it felt great to see those monthly interest payments start rolling in."</br> <div class='signature'>B.C. in Guelph, ON</div></p> <p class='quotation'>"I've been investing like this for 3 years now have really gotten the hang of it."</br> <div class='signature'>M.L. in Owen Sound, ON</div></p> <p class='quotation'>"This sounds like a lot better return than we can get with GICs and we are just looking for our first private mortgage to finance."</br> <div class='signature'>B.F. in Wiarton, ON</div></p> </div><!--credbox--> <div id='requestbox'> <p>Apply <strong><u>now</strong></u> for a<br> <strong><u>free</strong></u> phone consultation<br> on how private mortgage investing is <strong><u>right for you</u></strong> <script src='scripts/sfm_moveable_popup.js' type='text/javascript'></script> <script src='scripts/sfm-png-fix.js' type='text/javascript'></script> <link rel='stylesheet' type='text/css' href='style/Callback.css'/> <form id='Callback' method='post' action='callback_processor.php' accept-charset='UTF-8'> <div id='Callback_errorloc' class='error_strings' style='width: 476px; text-align: left'></div> <div id='Callback_outer_div' style='width: 476px; height: 27px;'> <div id='Callback_inner_div' style='position:relative;'> <input type='hidden' name='sfm_form_submitted' value='yes' /> <input type='hidden' name='page' value= '<?php echo $filename ?>' /> <input type='hidden' name='nextpage' value= '<?php echo $absolute_page_address ?>' /> <div id='Name_container'> Name<br> <input type='text' name='name' id='Name' value='' size='20' class='sfm_textbox'/> </div> <div id='Phone_container'> Phone number<br> <input type='text' name='phone' id='Phone' value='' size='20' class='sfm_textbox'/> </div> <div id='When_container'> Best time to call<br> <input type='text' name='when' id='When' value='' size='20' class='sfm_textbox'/> </div> <div id='Submit_container'> <input type='image' name='Submit' id='Callback_Submit_img' src='images/Callback-Submit-1.jpg' alt='submit'/> </div> </div><!--Callback_inner_div--> </div><!--Callback_outer_div--> </form> <script type='text/javascript'> // <![CDATA[ sfm_fix_png("Callback_Submit_img","images/spacer.gif"); if(document.sfm_after_load != undefined){document.sfm_after_load();} // ]]> </script> <script type='text/javascript'> // <![CDATA[ var CallbackValidator = new Validator("Callback"); CallbackValidator.EnableOnPageErrorDisplay(); CallbackValidator.SetMessageDisplayPos("right"); CallbackValidator.EnableMsgsTogether(); CallbackValidator.addValidation("Name","req","Please fill in Name"); CallbackValidator.addValidation("Phone","req","Please fill in Name"); CallbackValidator.addValidation("Phone","regexp=(?:[\\(][0-9]{3}[\\)]|[0-9]{3})[-. ]?[0-9]{3}[-. ]?[0-9]{4}$","Please enter a valid input for Phone"); CallbackValidator.addValidation("When","req","Please fill in When to call"); // ]]> </script> </div><!--requestbox--> </div><!--contentzonebox--> <div id='footerbox'> <p>Efficertain Corp. in association with Broker # Privacy Policy Contact Us Copyright 2012 Efficertain</p> </div><!--footerbox--> </div><!--canvas--> </body> </html>
Wed, 2013-02-20 04:27
#1
Hi Paul, You should change
Hi Paul,
You should change your doctype to one that is standards compliant, so that modern browsers will render correctly.
Try <!DOCTYPE HTML>
the html5 doctype.
Then try and remove the height values from #canvas and #contentzonebox.
They are going to cause you problems.
Thu, 2013-02-21 04:05
#2
Fixed, albiet with an
Fixed, albiet with an unglamourous widespread use of absolute positioning.
Thu, 2013-02-21 04:31
#3
Position property?
If you think you fixed your problem by using absolute position, you've got two problems.
cheers,
gary