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:
<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>
styles:
@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;
}