Form won't work when embedded in page [Archive] - Web Design & Web Development Forum: HTML, CSS, JavaScript, PHP

behvin

02 Mar 2010, 12:15 PM

I created a form for my website using FormSite.com. The submit button for my form won't work when embedded into my page. It will work when I make the form pop up in a separate window. I think it must have something to do with the css for the page interfering with the form's css. The css for the page and the form is below. I can post the html too, it was just too many characters. Here is the live page as it is: http://www.ncrising.info/register.html

css for page:

<style type="text/css" media="all">

body {
background: #fdd4bd; }

#content img {
position: absolute;
z-index: 1;
border: none; }

#nav li {
position: absolute;
z-index: 5;
margin-top: 382px;
display: inline;
list-style: none; }

#nav a {
z-index: 5;
text-decoration: none; }

#nav li.tab1 {
position: absolute;
margin-left: 70px; }

#nav li.tab2 {
position: absolute;
margin-left: 270px; }

#nav li.tab3 {
position: absolute;
margin-left: 545px; }

#nav li.tab4 {
position: absolute;
margin-left: 760px; }

#splatter {
margin-top: -70px;
margin-left: 515px;
position: absolute;
z-index: 4; }

#form {
position: absolute;
margin-top: 510px; }

#form.rollover a:hover {
background: url('images/formheadinghover.png') no-repeat; }

#footer {
position: absolute;
z-index: 5;
margin-top: 700px; }

</style>

</head>

<body>



<div id="form" class="rollover">

<a href="#" onclick="window.open('http://fs9.formsite.com/behvin/form722026319/index.html','Form', 'toolbar=no,width=600,height=400,left=20,top=20,screenX=20,screenY=20,status=no,scrollbars=yes,resiz able=yes');return false"><img src="images/formheading.png" width="430" height="131" alt="NC Rising Registration Form" /></a>

</div>



</body>

</html>

Form full html & css:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<base href="http://fs9.formsite.com/behvin/" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<title>NC Rising Registration Form</title>
<link rel="stylesheet" type="text/css" media="all" href="/include/form/screen5.css" />
<link rel="stylesheet" type="text/css" media="print" href="/include/form/print5.css" />
<style type="text/css" media="all">
body{
background: #FDD4BD;
}

.form_table{
width: auto;
margin-left: 0;
margin-right: auto;
border: 2px solid #000000;
background: #FDD4BD;
font-family: Memphis Light, Lucida Grande,Tahoma,Arial,sans-serif;
font-size: 12px;
color: #000000;
overflow: hidden;
}

.form_table a{
color: #0000FF;
}

.outside a{
color: #0000FF;
}

.form_table a:visited{
color: #0000FF;
}

.outside a:visited{
color: #0000FF;
}

.form_shadow_top{
display: block;
}

.form_shadow_bottom{
display: block;
}

.segment_header{
margin: 1px;
padding: 22px 0 18px 0;
color: #000000;
background: #FDD4BD;
width: auto;
background-repeat: repeat;
}

.q{
padding: 5px;
margin-bottom: 5px;
margin-left: 5px;
float: left;
display: block;
}

.q .question{
font-weight: bold;
}

.q .left_question_first{
width: 15em;
}

.required .icon{
background-image: none;
background-position: left;
background-repeat: no-repeat;
font-size: 13px;
padding-left: 14px;
}

.q .text_field{
border: 1px solid #FDD4BD;
color: #333333;
margin: 1px 0;
padding: 2px 1px;
background: #FFFFFF url(/images/forms/field_bg.png) top left;
}

.q .file_upload{
background: #F4F4F4;
border: 1px solid #FDD4BD;
color: #333333;
margin-top: 1px;
}

.q .file_upload_button{
margin-top: 2px;
border-color: #FDD4BD;
clear: left;
}

.q .file_upload_button:hover{
border-color: #444444;
}

.q .inline_grid td{
padding: 5px;
vertical-align: baseline;
}

.q .drop_down{
background: #F4F4F4;
border: 1px solid #FDD4BD;
color: #333333;
margin: 1px 0;
padding: 1px;
}

.q .matrix th{
color: #FFFFFF;
background: #FDD4BD;
padding: 5px;
font-weight: bold;
text-align: center;
vertical-align: bottom;
}

.q .matrix td{
padding: 5px;
text-align: center;
white-space: nowrap;
height: 26px;
border-bottom: 1px solid #FFC6AC;
border-top: 1px solid #FFC6AC;
}

.q .matrix td.question{
border-right: 1px solid #FFC6AC;
font-weight: normal;
}

.q .matrix .multi_scale_sub th{
font-weight: normal;
border-top: 1px solid #FFC6AC !important;
background: #FDD4BD;
}

.q .matrix .multi_scale_break{
border-right: 1px solid #FFC6AC;
}

.q .matrix_row_dark td{
color: #000000;
background: #FDD4BD;
}

.q .matrix_row_dark td.question{
color: #000000;
background: #FDD4BD;
}

.q .matrix_row_light td{
color: #000000;
background: #FDD4BD;
}

.q .matrix_row_light td.question{
color: #000000;
background: #FDD4BD;
}

.q .rating_ranking td{
padding: 5px;
}

.q .scroller{
border: 1px solid #000000;
}

.highlight{
background: #aaaaaa;
}

tr.highlight td{
background: #aaaaaa !important;
}

.outside{
color: #000000;
font-family: Memphis Light, Lucida Grande,Tahoma,Arial,sans-serif;
font-size: 12px;
}

.outside_container{
width: auto;
padding: 1em 0;
margin-left: 0;
margin-right: auto;
text-align: center;
color: #000000;
font-family: Memphis Light, Lucida Grande,Tahoma,Arial,sans-serif;
font-size: 12px;
}

.outside_container .submit_button{
color: #000000;
background: url(/images/forms/gradients/white_short.png);
border-style: solid;
border-width: 1px;
border-color: #000000;
}

.outside_container .submit_button:hover{
border-color: #444444;
}

.outside_container .progress_bar{
background: #000000;
margin: 0;
}

</style>

</body>

</html>