PDA

View Full Version : CSS & Registration form help


behvin
28 Jan 2010, 05:15 PM
my registration form submit button is not working. When you press enter, you can submit the form, but you can't actually press submit and when scrolled over, the cursor doesn't turn into a hand, it stays an arrow.

I created the form with formsite.com. I think my CSS for my page is somehow getting in the way of formsite's code, but I can't figure out why.

Here is the page in question: http://www.ncrising.info/register.html

Also, I'm trying to match the background color of the page with the background color of the images on the page. I've changed the background color of the images using GIMP and Pixlr.com to match the page background-color: #fdd4bd. When I test the file in the browser using Firefox, the background colors match. But, when I put the files online, somehow the browser renders the background color of the images as #ffc6ac. These colors are not close enough to not notice, there is an obvious difference. What would be causing this?

Here is the HTML & CSS for the page: Thanks for any help! I can also post the full html and CSS for the form if that helps.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>NC Rising - Register</title>

<meta name="created" content="2010-01-25" />

<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: 356px;
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; }

#box {
position: absolute;
background: #fdd4bd;
margin-top: -40px;
width: 1175px;
height: 60px; }

#form {
position: absolute;
margin-top: 520px;
margin-left: 20px; }


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

</style>

</head>




<body>



<!--This page created by Nicole Harris on 01/25/2010.-->






<!--Start Content Box-->

<div id="content">

<img src="images/registerpage.png" width="1000" height="520" alt="NC Rising Homepage" />

<!--End Content Box-->





<!--Start Navigation-->

<div id="nav">

<ul>

<li class="tab1"><a href="mockup.html"><img src="images/ncrisingnavtab1.png" width="60" height="20" alt="Home" /></a></li>

<li class="tab2"><a href="workshops.html"><img src="images/ncrisingnavtab2.png" width="125" height="20" alt="Workshops/Panels" /></a></li>

<li class="tab3"><a href="register.html"><img src="images/ncrisingnavtab3.png" width="75" height="20" alt="Register" /></a></li>

<li class="tab4"><a href="contactus.html"><img src="images/ncrisingnavtab4.png" width="90" height="20" alt="Contact Us" /></a></li>

</ul>

</div>

<!--End Navigation-->




<!--Start Bottom Graphic-->

<div id="footer">

<img src="images/bottomgraphic.png" width="1000" height="287" alt="bottom graphic" />

</div>

<!--End Bottom Graphic-->

</div>

<!--End Content-->



<!--Start Splatter image Here-->

<div id="splatter">

<img src="images/splatter.png" width="640" height="490" alt="Paint Splatter" />

</div>

<!--End Splatter Image Here-->







<!--Start Registration Form-->

<div id="form">

<script type="text/javascript" id="AJAXForm" src="http://fs9.formsite.com/form_app/FormSite?EParam=8c8wJxzKVbqYFLv6uGJRlipvKh0nslvAPKf4pvoJBI8GalU2hnd2biTSSK3%2FEHsSdZJ1aOpoHs8n%0ATvW aumDWwg%3D%3D&EmbedAllPages=Yes&IncludeContainerCSS=Yes&actionMethod=http"></script>
<noscript><p><a href="http://fs9.formsite.com/behvin/form393418907/index.html">Click here to complete: NC Rising Registration Form</a></p></noscript>
<!-- Notes:
Change EmbedAllPages=No in above link to keep only the first page of a multipage form embedded.
Change IncludeContainerCSS=No in above link to exclude CSS that controls width, colors, fonts for your form. This will cause your form to inherit these styles from your page.
-->




<!--Start Cover Box Here-->

<div id="box">

</div>

<!--End Cover Box Here-->




</div>

<!--End Registration Form-->






</body>

</html>