Hello all,
I have yet another question pertaining to a problem I have for my World Review Group site.
The side windows I have brilliantly made into 3 slices and pieced together with CSS (stupid) is now displaying the end hanging off to the right side as I am putting in extra markup with the 2nd form for collecting e-mail addresses. When I am finding the right positioning for this 2nd form when it will be displayed in the center after the user originally enters their e-mail, the right window's end is chopped off the side. I tried the width of the container div, but that didn't seem to help. Maybe it has to do with the #rightside div.
This is the link to the screenshot of what I am seeing.
Markup:
styles:Code:<form id="emailbox" name="form1" method="post" action="?"> <div> <input type="text" name="go" id="go" value="your e-mail" onclick="input_focus(this)" onblur="input_reset(this)" maxlength="60"/> <input type="submit" value="Join" onclick="seeWhatHappened()" /> </div> </form> <div id="rightsideend"> </div> <!-- end side windows --> <div id="confirmform"> <form name="form2" id="submissionform" method="post" action="?"> <label for="confirmemail">Confirm your e-mail:<span>*</span></label> <input type="text" name="confirmemail" class="fixedwidth" value="" maxlength="60"/><br /> <label for="name">Enter your name:<span>*</span></label> <input type="text" name="name" class="fixedwidth" value="" maxlength="60" /><br /> <label for="age">Select your age range:</label> <select name="age" class="fixedwidth"> <option selected="selected">18–35</option> <option>36–55</option> <option>55+</option> <option>17 or younger</option> </select><br /> <label for="country">Select your country:<span>*</span></label> <select name="country" class="fixedwidth"> <option selected="selected">Select</option> <option>United States</option> <option>United Kingdom</option> <option>Canada</option> <option>Australia</option> <option>Russia</option> <option>Brazil</option> <option>Somewhere else</option> </select><br /> <input type="submit" value="Sign Me Up!" class="formsubmitbutton" onclick="checkEmail()"/> <input type="submit" value="Cancel" class="formsubmitbutton" onclick="backToHomePage()"/> </form> </div>
Code:@charset "utf-8"; /* Home Page CSS Document */ body{ background:url(bg2.jpg); background-position:top center; background-color:#999; margin:0 auto; overflow:hidden; font-family:Times "Times New Roman", Times, serif; } #container{ height:1000px; width:1360px; overflow:visible; margin:0 auto; position:relative; z-index:7; background:url("homepagebgwinter.gif") repeat scroll 0% 200px transparent; } #leftside{ position:absolute; top:405px; left:98px; width:auto; } #leftsidestart{ float:left; background:url("sidewindowstart.gif"); width:27px; height:250px; margin:0; } #leftsidebody{ margin:0 auto; float:left; background:url("sidewindowbody.gif") repeat-x; width:240px; height:250px; } #leftsideend{ float:left; background:url("sidewindowend.gif"); width:16px; height:250px; margin:0; } #middle{ width:626px; margin:0 auto; } #rightside{ width:auto; position:absolute; top:405px; left:980px; } #rightsidestart{ background:url("sidewindowstartright.gif"); float:left; width:27px; height:250px; } #rightsidebody{ background:url("sidewindowbodyright.gif") repeat-x; float:left; margin:0 auto; width:247px; height:250px; position:relative; } #rightsideend{ background:url("sidewindowendright.gif"); float:right; width:15px; height:250px; } h1{ height:206px; width:626px; position:relative; padding:0; margin:0; text-align:center; } /* mac hide */ h1{overflow:hidden;} /* end hide */ h1 span{ background:url("header.jpg"); position:absolute; left:0; top:0; display:block; height:206px; width:626px; } #body{ background-image:url(body.jpg); width:626px; text-align: center; margin:0 auto; } #footer{ background-image:url(footer.jpg); width:626px; height:30px; text-align: center; margin:0 auto; padding:0; } #welcomestatement{ display:block; background-color:#FF9; text-align:left; padding:3px 20px; border-bottom:2px inset #F8CB87; margin:auto; width:400px; position:relative; top:10px; /*for IE*/ filter:alpha(opacity=50); /*standard CSS3*/ opacity:0.5; } p#welcomestatement{ /*for IE*/ filter:alpha(opacity=100); /*standard CSS3*/ opacity:1; font-weight:bold; } .sideWindowHeaderText{ font-size:18px; color:#000; font-weight:bold; width:200px; padding:1px 0 0 5px; /*text shadow*/ text-shadow:0px 0px 6px #009, 2px 0px 12px #066; } #copytagatbottom{ font-size:12px; text-align:center; color:#000; display:block; background-color:#FFF; width:200px; margin:0 auto; padding:2px; padding-bottom:4px; border:1px dashed #6B6B6B; } #emailbox{ background:url("emailbox.gif") no-repeat scroll 50% 0 transparent; height:200px; width:156px; margin:0 0 0 8px; position:absolute; top:96%; } #go{width:80px; margin-top:165px; margin-left:12px;} #confirmform{ background:url("emailsubmission.gif") no-repeat scroll 50% 0 transparent; width:360px; height:200px; position:absolute; right:392px; top:130px; } #submissionform{ padding:60px 10px 0 10px; text-align:left; z-index:999; } .fixedwidth{width:150px; float:right;} #submissionform span{color:red;} .formsubmitbutton{margin-left:50px; margin-top:10px;} .sideWindowLinks li{ list-style:disc; padding:3px 3px 3px 0; width:auto; } .sideWindowLinks li a{ font-size:14px; font-weight:bold; color:#069; } .sideWindowLinks a:hover, .sideWindowLinks a:focus, .sideWindowLinks a:active{color:#09C; text-decoration:none;} body{ overflow:auto; }



Reply With Quote
Bookmarks