dsonesuk Posted November 10, 2011 Share Posted November 10, 2011 It does not have to be the outermost parent container, just the one that will surround the wrapper and the shadow image elements containers. Link to comment Share on other sites More sharing options...
khaos337 Posted November 10, 2011 Author Share Posted November 10, 2011 Could you give me a quick code example? Link to comment Share on other sites More sharing options...
dsonesuk Posted November 10, 2011 Share Posted November 10, 2011 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Sean's Practice</title><link href="site.css" type="text/css" rel="stylesheet"><style type="text/css">html, body{ background: url(http://www.seanspractice.com/new/images/background.jpg) center top; margin: 0px; height: 100%; position: relative; z-index:1; } div.pageshadow{ position: relative; margin: 0px auto; /*background: url(images/shadow-template.png) top no-repeat;*/ height: 100%; /* width: 900px; overflow: visible;*/ z-index:1; overflow-x:hidden; min-width:900px;} #left_shadow, #rgt_shadow {position:absolute; width:71px; height:362px; } #left_shadow {left:-71px; background:url(left.png) no-repeat 0 0;}#rgt_shadow {right:-71px; background:url(right.png) no-repeat 0 0;} div.wrapper{ position: relative; width: 900px; min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */ } div.footer, div.push{ text-align: center; width: 900px; height: 100px; /* .push must be the same height as .footer */ } div.footer{ margin: 0px auto;} </style> </head><body> <div class="pageshadow"> <!--<img src="http://www.seanspractice.com/new/images/shadow-template.png" style="position: absolute; left: -150px;" />--> <div class="wrapper"> <div id="left_shadow"> </div> <div id="rgt_shadow"> </div> <img src="http://www.seanspractice.com/new/images/bamboo.png" style="position: absolute; left: 0px;" alt=""> <div class="push"> </div> </div> <div class="footer"> Home | Bio | My Services | Contact | New Patients <p>© 2011 SeansPractice.com</p> </div> </div> </body></html> Link to comment Share on other sites More sharing options...
khaos337 Posted November 11, 2011 Author Share Posted November 11, 2011 That works perfectly! Thanks again for all your help! Link to comment Share on other sites More sharing options...
khaos337 Posted November 14, 2011 Author Share Posted November 14, 2011 Ok, so everything was working perfectly, until i started doing some cross browser testing and found out that the overflow-x property does not work properly in IE8 or earlier. In those browsers it prevents the page from scrolling on the y axis as well which is a problem. Any thoughts? Link to comment Share on other sites More sharing options...
dsonesuk Posted November 14, 2011 Share Posted November 14, 2011 Works perfectly fine in IE7/8 for me! Link to comment Share on other sites More sharing options...
khaos337 Posted November 14, 2011 Author Share Posted November 14, 2011 Hmmm.... It even says on the w3schools css reference that it doesn't work properly, under browser support: http://www.w3schools.com/cssref/css3_pr_overflow-x.asp If you say its working for you though I'll keep testing. Link to comment Share on other sites More sharing options...
khaos337 Posted November 14, 2011 Author Share Posted November 14, 2011 here is the page with all css formatting taken out except the html, body, and page_shadow. Does this scroll for you in IE7/8?? www.seanspractice.com/new/intake.php Link to comment Share on other sites More sharing options...
dsonesuk Posted November 14, 2011 Share Posted November 14, 2011 replace height:100%; for body,html with min-height:100%; Link to comment Share on other sites More sharing options...
khaos337 Posted November 14, 2011 Author Share Posted November 14, 2011 That fixes the scroll, but breaks the sticky footer Link to comment Share on other sites More sharing options...
dsonesuk Posted November 14, 2011 Share Posted November 14, 2011 Not any More <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html><head><title>Sean's Practice</title><link href="http://www.seanspractice.com/new/site.css" type="text/css" rel="stylesheet"> <style type="text/css">html, body {height:100%;} html {overflow-y:scroll;} /* make scrollbar on right always show and so prevent jumping of page left to right, when content goes from small to larger than browser viewport window */ div.wrapper {min-height:100%; height:100%; width:auto; }.pageshadow {padding-bottom:116px;}/* by height of footer */ .footer {margin-top: -116px !important;}/* by height of footer */div.wrapper_inner { /*height: auto !important;*/ margin-bottom: -100px; margin-left: auto; margin-right: auto; margin-top: 0; /*min-height: 100%;*/ position: relative; width: 900px;} </style> </head><body><div class="wrapper"> <div class="pageshadow"> <div class="wrapper_inner"> <div id="left_shadow"> </div> <div id="rgt_shadow"> </div> <div class="header"> <img src="http://www.seanspractice.com/new/images/bamboo.png" style="position: absolute; left: 0px; top: 0px;" /> <img src="http://www.seanspractice.com/new/images/sean.png" style="position: absolute; right: 0px; top: 0px;" /> <img src="http://www.seanspractice.com/new/images/heading.png" style="position: absolute; left: 100px; top: 90px;" /> <img src="http://www.seanspractice.com/new/images/accupuncture.png" style="position: absolute; left: 525px; top: 90px;" /> <div style="position: absolute; left: 70px; top: 155px;"> <ul class="nav"> <li class="nav"><a class="nav" href="index.php">Home</a></li> <li class="nav"><a class="nav" href="bio.php">Bio</a></li> <li class="nav"><a class="nav" href="services.php">My Services</a></li> <li class="nav"><a class="nav" href="contact.php">Contact</a></li> <li class="nav"><a class="nav" href="intake.php">New Patients</a></li> </ul> </div> </div> <div class="content"> <h4><u>Questionnaire</u></h4> <p>Please fill out and submit the intake form before your first appointment.</p> <p>Office Hours: Monday through Saturday, 9:30 AM - 5:30 PM</p> <p>Fees: $75 (Treatment usually lasts 1-1.5 hrs) <a href="javascript:void(null);" onClick="document.getElementById('myform').style.display=='none' ? document.getElementById('myform').style.display='block' : document.getElementById('myform').style.display='none';">Hide Form</a></p> <form action="" method="post" id="myform"> <fieldset> <legend style="font-weight:bold; text-decoration:underline;">Intake Form</legend> <h3>General Information</h3> <div class="prelim"> <label for="date">Date: </label><input name="date" id="date" type="text"/> <br/> <label for="name">Name: </label><input name="name" id="name" type="text"/> <br/> <label for="address">Address: </label><input name="address" id="address" type="text"/> <br/> <label for="address2">Address: </label><input name="address2" id="address2" type="text"/> <br/> <label for="city">City: </label><input name="city" id="city" type="text"/> <br/> <label for="state">State: </label><input name="state" id="state" type="text"/> <br/> <label for="zip">Zip: </label><input name="zip" id="zip" type="text"/> <br/> <label for="age">Age: </label><input name="age" id="age" type="text"/> <br/> <label for="hphone">Home Phone: </label><input name="hphone" id="hphone" type="text"/> <br/> <label for="bphone">Business Phone: </label><input name="bphone" id="bphone" type="text"/> <br/> <label for="occupation">Occupation: </label><input name="occupation" id="occupation" type="text"/> <br/> <label for="referral">Referred By: </label><input name="referral" id="referral" type="text"/> <br/> <label for="email">Email: </label><input name="email" id="email" type="text"/> </div> <hr/> <h3>Medical History</h3> <div id="medical"> <label for="complaints">What are your health complaints at this time?</label> <br/> <textarea name="complaints" id="complaints"></textarea> <p>Incicate other accidents, surgeries, scars, hospitalizations, traumatic events of any kind etc. that you have had:</p> <div style="float: left;"> <label class="tl" for="trauma1">1. </label><input class="widetext" name="trauma1" id="trauma1" type="text"/><br/> <label class="tl" for="trauma2">2. </label><input class="widetext" name="trauma2" id="trauma2" type="text"/><br/> <label class="tl" for="trauma3">3. </label><input class="widetext" name="trauma3" id="trauma3" type="text"/><br/> </div> <div style="float: left;"> <label class="da" for="trauma1d">Date or Age: </label><input name="trauma1d" id="trauma1d" type="text"/><br/> <label class="da" for="trauma2d">Date or Age: </label><input name="trauma2d" id="trauma2d" type="text"/><br/> <label class="da" for="trauma3d">Date or Age: </label><input name="trauma3d" id="trauma3d" type="text"/><br/> </div> <br style="clear:both;" /> <p> <label for="otherproblems">What other health problems have you had?</label> <br/> <textarea name="otherproblems" id="otherproblems"></textarea> </p> <p>Have you ever had or do you have a communicable disease?</p> <div style="float:left; width:200px;"> <span> </span><br/> <label for="mono">Mono:</label><br/> <label for="hiv">HIV:</label><br/> <label for="tb">Tuberculosis:</label><br/> <label for="hep">Hepatitis <label for="a">A</label><input name="a" id="a" type="checkbox"/> <label for="b">B</label><input name="b" id="b" type="checkbox"/> <label for="c">C</label><input name="c" id="c" type="checkbox"/> :</label><br/> </div> <div style="float:left; width:50px; text-align:center;"> <span>Yes</span><br/> <input name="mono" id="mono" type="radio" value="yes"/><br/> <input name="hiv" id="hiv" type="radio" value="yes"/><br/> <input name="tb" id="tb" type="radio" value="yes"/><br/> <input name="hep" id="hep" type="radio" value="yes"/><br/> </div> <div style="float:left; width:50px; text-align:center;"> <span>No</span><br/> <input name="mono" id="mono" type="radio" value="no"/><br/> <input name="hiv" id="hiv" type="radio" value="no"/><br/> <input name="tb" id="tb" type="radio" value="no"/><br/> <input name="hep" id="hep" type="radio" value="no"/><br/> </div> <br style="clear:both"/> <label for="othercommunicable">Other: </label><input class="widetext" name="othercommunicable" id="othercommunicable" type="text"/> </div> <hr/> <h3>Please check all that apply:</h3> <label for="appetite">Lack of appetite</label><input type="checkbox" name="appetite" id="appetite" /> <label for="constapation">Constapation</label><input type="checkbox" name="constapation" id="constapation" /> <label for="nausea">Nausea</label><input type="checkbox" name="nausea" id="nausea" /> <label for="hemorrhoids">hemorrhoids</label><input type="checkbox" name="hemorrhoids" id="hemorrhoids" /> <label for="bloating">Bloating</label><input type="checkbox" name="bloating" id="bloating" /> <label for="insomnia">Insomnia, difficulty sleeping</label><input type="checkbox" name="insomnia" id="insomnia" /> <label for="sweating">Excessive sweating</label><input type="checkbox" name="sweating" id="sweating" /> <label for="palpitations">Heart palpitations</label><input type="checkbox" name="palpitations" id="palpitations" /> <label for="allergies">Allergies</label><input type="checkbox" name="allergies" id="allergies" /> <label for="nightmares">Nightmares</label><input type="checkbox" name="nightmares" id="nightmares" /> <label for="hayfever">Hay fever</label><input type="checkbox" name="hayfever" id="hayfever" /> <label for="mentalrestless">Mentally restless</label><input type="checkbox" name="mentalrestless" id="mentalrestless" /> <label for="weatherchanges">Intolerance to weather changes</label><input type="checkbox" name="weatherchanges" id="weatherchanges" /> <label for="chestpains">Chest pains/tight chest</label><input type="checkbox" name="chestpains" id="chestpains" /> <label for="lowback">Low back pain</label><input type="checkbox" name="lowback" id="lowback" /> <label for="memory">Memory problems</label><input type="checkbox" name="memory" id="memory" /> <label for="knee">Knee problems</label><input type="checkbox" name="knee" id="knee" /> <label for="eye">Eye problems</label><input type="checkbox" name="eye" id="eye" /> <label for="weakness">Weakness in back or legs</label><input type="checkbox" name="weakness" id="weakness" /> <label for="jaundice">Jaunidce (yellowish eyes or skin)</label><input type="checkbox" name="jaundice" id="jaundice" /> <label for="hearing">Hearing impairment</label><input type="checkbox" name="hearing" id="hearing" /> <label for="digestion">Difficulty digesting oily foods</label><input type="checkbox" name="digestion" id="digestion" /> <label for="ringing">Ringing in ears</label><input type="checkbox" name="ringing" id="ringing" /> <label for="gallstones">Gall stones</label><input type="checkbox" name="gallstones" id="gallstones" /> <label for="kidneystones">Kidney stones</label><input type="checkbox" name="kidneystones" id="kidneystones" /> <label for="stool">Light colored stool</label><input type="checkbox" name="stool" id="stool" /> <label for="hairloss">Hair loss</label><input type="checkbox" name="hairloss" id="hairloss" /> <label for="nails">Soft, brittle nails</label><input type="checkbox" name="nails" id="nails" /> <label for="urinary">Urinary problems</label><input type="checkbox" name="urinary" id="urinary" /> <label for="angered">Easily angered or agitated</label><input type="checkbox" name="angered" id="angered" /> <label for="sexdrive">Decreased ###### drive</label><input type="checkbox" name="sexdrive" id="sexdrive" /> <label for="spasms">Spasms or twitching of muscles</label><input type="checkbox" name="spasms" id="spasms" /> <label for="genital">Cold or pain in genital area</label><input type="checkbox" name="genital" id="genital" /> <label for="fatigue">Fatigue</label><input type="checkbox" name="fatigue" id="fatigue" /> <label for="burning">Burning ######</label><input type="checkbox" name="burning" id="burning" /> <label for="retention">Water retention</label><input type="checkbox" name="retention" id="retention" /> <label for="painful">Painful ######</label><input type="checkbox" name="painful" id="painful" /> <label for="blood">Blood in stool</label><input type="checkbox" name="blood" id="blood" /> <label for="faint">Tendency to faint easily</label><input type="checkbox" name="faint" id="faint" /> <label for="cholesterol">High cholesterol</label><input type="checkbox" name="cholesterol" id="cholesterol" /> <label for="highblood">High blood pressure</label><input type="checkbox" name="highblood" id="highblood" /> <label for="lowblood">Low blood pressure</label><input type="checkbox" name="lowblood" id="lowblood" /> <label for="dizziness">Dizziness</label><input type="checkbox" name="dizziness" id="dizziness" /> <label for="antibiotics">Recent use of antibiotics</label><input type="checkbox" name="antibiotics" id="antibiotics" /> <label for="abdominal">Abdominal pain</label><input type="checkbox" name="abdominal" id="abdominal" /> <label for="headaches">Headaches</label><input type="checkbox" name="headaches" id="headaches" /> <br/> <hr/> <h3>FOR WOMEN:</h3> <p>How often do you experience the following?</p> <span>Never</span><span>Sometimes</span><span>Often</span> <br/> <label for="premenstrual">Premenstrual pain or discomfort</label><input type="radio" id="premenstrual" name="premenstrual" value="never" /><input type="radio" id="premenstrual" name="premenstrual" value="sometimes" /><input type="radio" id="premenstrual" name="premenstrual" value="often" /> <br/> <label for="menstrual">Menstrual pain or discomfort</label><input type="radio" id="menstrual" name="menstrual" value="never" /><input type="radio" id="menstrual" name="menstrual" value="sometimes" /><input type="radio" id="menstrual" name="menstrual" value="often" /> <br/> <label for="breast">Breast swelling or pain</label><input type="radio" id="breast" name="breast" value="never" /><input type="radio" id="breast" name="breast" value="sometimes" /><input type="radio" id="breast" name="breast" value="often" /> <br/> <label for="irregular">Irregular menstrual cycle</label><input type="radio" id="irregular" name="irregular" value="never" /><input type="radio" id="irregular" name="irregular" value="sometimes" /><input type="radio" id="irregular" name="irregular" value="often" /> <br/> <label for="bloating">Bloating</label><input type="radio" id="bloating" name="bloating" value="never" /><input type="radio" id="bloating" name="bloating" value="sometimes" /><input type="radio" id="bloating" name="bloating" value="often" /> <br/> <span>Yes</span><span>No</span> <br/> <label for="pregnant">Are you pregnant</label><input type="radio" id="pregnant" name="pregnant" value="yes" /><input type="radio" id="pregnant" name="pregnant" value="no" /> <br/> <label for="everpregnant">Have you ever been pregnant</label><input type="radio" id="everpregnant" name="everpregnant" value="yes" /><input type="radio" id="everpregnant" name="everpregnant" value="no" /> <br/> <label>If so, how many births?</label><input type="text" id="numbirths" name="numbirths" /> <br/> <label for="abortion">Have you ever had an abortion</label><input type="radio" id="abortion" name="abortion" value="yes" /><input type="radio" id="abortion" name="abortion" value="no" /> <br/> <label for="gynoexam">When was your last gynecological examination?</label><input name="gynoexam" id="gynoexam" type="text" /> <br/> <label for="gynoresult">Results:</label><textarea name="gynoresult" id="gynoresult"></textarea> <br/> <label for="cycle">Where are you in your cycle?</label><input name="cycle" id="cycle" type="text" /> <br/> <label for="cyclelength">What is the lenght of your cycle?</label><input name="cyclelength" id="cyclelength" type="text" /> <br/> <label for="bloodcolor">What color is the blood?</label><input name="bloodcolor" id="bloodcolor" type="text" /> <br/> <label for="menseslength">How many days do your menses last?</label><input name="menseslength" id="menseslength" type="text" /> <br/> <hr/> <h3>FOR MEN:</h3> <span>Yes</span><span>No</span> <br/> <label for="prostate">Do you have prostate problems?</label><input type="radio" id="prostate" name="prostate" value="yes" /><input type="radio" id="prostate" name="prostate" value="no" /> <br/> <label for="impotence">Do you experience impotence?</label><input type="radio" id="impotence" name="impotence" value="yes" /><input type="radio" id="impotence" name="impotence" value="no" /> <br/> <label for="ejaculation">Premature ejaculation?</label><input type="radio" id="ejaculation" name="ejaculation" value="yes" /><input type="radio" id="ejaculation" name="ejaculation" value="no" /> <h3>ARE THERE ANY OTHER PROBLEMS OR SYMPTOMS THAT YOU FEEL ARE IMPORTANT WHICH WERE NOT COVERED BY THIS QUESTIONNAIRE?</h3> <textarea name="anythingelse" id="anythingelse"></textarea> </fieldset> </form> </div></div> <div class="push"> </div> </div> </div> <div class="footer"> <p> <hr/> <p>Home | Bio | My Services | Contact | New Patients</p> <p>© 2011 SeansPractice.com</p> </p> </div> </body></html> Link to comment Share on other sites More sharing options...
khaos337 Posted November 17, 2011 Author Share Posted November 17, 2011 Thanks again!! Really really really appreciate the effort! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.