title: Can't find which element is covering my input fields on a webpage
body: <p>I'm a little new to css, and getting browser to cooperate on layout is a little hard for me. I got a format that I thought worked, but when I use it for the contact form I realize that something is covering over my input fields so that I can't enter text into them, but I can't figure out what. <a href="http://jsfiddle.net/zadrs/" rel="nofollow">This is a JSfiddle with all of my html and css</a> and any suggestion is welcome.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="header"&gt;
              &lt;h1&gt;MultiDimensional Imaging&lt;br&gt;
              &lt;span class="catchphrase"&gt;Give better ultrasound service, make thousands more.&lt;/span&gt;&lt;/h1&gt;
          &lt;p class="stamp"&gt;OB/GYNS ONLY&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="nav"&gt;
          &lt;ul class="menu"&gt;
              &lt;li&gt;&lt;a href="http://mdifl.com"&gt;Home&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://mdifl.com/how/"&gt;How it works&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://mdifl.com/pricing/"&gt;Pricing&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://mdifl.com/about/"&gt;About Us&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://mdifl.com/contact/"&gt;Contact&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="content"&gt;
          &lt;div class="floatingimage"&gt;&lt;/div&gt;
          &lt;div class="copy"&gt;
              &lt;form name="contact_us" method="post" action="http://mdifl.com/contact/"&gt;
                  &lt;p&gt;What's your name?&lt;/p&gt;
                  &lt;input name="name" type="text" maxlength="40"&gt;
                  &lt;p&gt;What's your phone number?&lt;/p&gt;
                  &lt;input name="phonenumber" type="text" maxlength="40"&gt;
                  &lt;p&gt;What's your email?&lt;/p&gt;
                  &lt;input name="email" type="text" maxlength="40"&gt;
                  &lt;p&gt;What message would you like to send us?&lt;/p&gt;
                  &lt;textarea name="message" cols="40" rows="10"&gt;&lt;/textarea&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="footer"&gt; &lt;a href="legal.php"&gt;Legal&lt;/a&gt;|&lt;a href="privacy.php"&gt;Privacy Policy&lt;/a&gt;|&lt;a href="http://www.sonosmile.com"&gt;3D Ultrasound Miami&lt;/a&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>html {
      height:100%;
  }
  body {
      width:1250px;
      margin-left:auto;
      margin-right:auto;
      background-color:#CCC;
      background:-webkit-gradient(linear, left top, left bottom, from(#666666), to(#FFFFFF)) fixed;
      background: -moz-linear-gradient(top, #666, #FFF) fixed;
      /* for firefox 3.6+ */
      display:block;
  }
  h1 {
      font-family:"Courier New", Courier, monospace;
      font-size:40px;
      font-weight:bold;
  }
  h2 {
      font-size:25px;
      font-weight:bold;
  }
  h3 {
      font-size:24px;
      font-weight:bold;
  }
  h4 {
      position:relative;
      margin-bottom:-80px;
      padding:20px;
      font-size:20px;
      font-weight:bold;
      font-style:italic;
      text-align:center;
      width:380px;
      background-color:#AAC1D9;
      -moz-border-radius: 20px;
      border-radius: 20px;
      -moz-box-shadow: 4px 5px 5px 0px #999;
      -webkit-box-shadow: 4px 5px 5px 0px #999;
      box-shadow: 4px 5px 5px 0px #999;
  }
  .catchphrase {
      font-style:italic;
      font-family:"Times New Roman", Times, serif;
      font-size:23px;
  }
  .stamp {
      margin-left:83%;
      padding:0px;
      font-family:"Times New Roman", Times, serif;
      color:#F00;
      font-size:24px;
      font-weight:bold;
      font-style:oblique;
      transform:rotate(10deg);
      -ms-transform:rotate(10deg);
      /* IE 9 */
      -webkit-transform:rotate(10deg);
      /* Safari and Chrome */
      -moz-transform:rotate(10deg);
      /*mozilla*/
      position:relative;
      top:-15px;
      width:200px;
      border:solid;
      border-color:#F00;
  }
  input {
      z-index:10;
  }
  .floatingimage {
      position:relative;
      left:-250px;
      top:-150px;
      width:450px;
      height:542px;
      background-image:url("http://mdifl.com/img/volusoni.png");
      z-index:-1;
  }
  .header {
      background-image:url("http://mdifl.com/img/metaltexture.jpg");
      text-align:center;
      margin-top:100px;
      width:600px;
      height:130px;
      padding:7px;
      padding-right:25px;
      margin-left:auto;
      margin-right:auto;
      -moz-border-radius: 20px;
      border-radius: 20px;
      -moz-box-shadow: 4px 5px 5px 0px #999;
      -webkit-box-shadow: 4px 5px 5px 0px #999;
      box-shadow: 4px 5px 5px 0px #999;
  }
  .nav {
      margin-top:-20px;
      height:0px;
      margin-right:auto;
      margin-left:auto;
      width:630px;
  }
  :root .menu li a:hover {
      color:#00F \0/IE9;
  }
  /* IE9 */
  
  /* internet explorer sucks monkey balls.*/
   .menu {
      /* Affects the UL element */
      overflow: hidden;
      display: inline-block;
      border-radius: 4px;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
  }
  .menu li {
      /* Specifying a fallback color and we define CSS3 gradients for the major browsers: */
      background-color: #f0f0f0;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), color-stop(0.5, #f0f0f0), color-stop(0.51, #e6e6e6));
      background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
      background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
      background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
      background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
      border-right: 1px solid rgba(9, 9, 9, 0.125);
      /* Adding a 1px inset highlight for a more polished efect: */
      box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
      -moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
      -webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
      position:relative;
      float: left;
      list-style: none;
  }
  .menu li:after {
      /* This creates a pseudo element inslide each LI */
      content:'.';
      text-indent:-9999px;
      overflow:hidden;
      position:absolute;
      width:100%;
      height:100%;
      top:0;
      left:0;
      z-index:1;
      opacity:0;
      /* Gradients! */
      background-image:-webkit-gradient(linear, left top, right top, from(rgba(168, 168, 168, 0.5)), color-stop(0.5, rgba(168, 168, 168, 0)), to(rgba(168, 168, 168, 0.5)));
      background-image:-moz-linear-gradient(left, rgba(168, 168, 168, 0.5), rgba(168, 168, 168, 0) 50%, rgba(168, 168, 168, 0.5));
      background-image:-o-linear-gradient(left, rgba(168, 168, 168, 0.5), rgba(168, 168, 168, 0) 50%, rgba(168, 168, 168, 0.5));
      background-image:-ms-linear-gradient(left, rgba(168, 168, 168, 0.5), rgba(168, 168, 168, 0) 50%, rgba(168, 168, 168, 0.5));
      background-image:linear-gradient(left, rgba(168, 168, 168, 0.5), rgba(168, 168, 168, 0) 50%, rgba(168, 168, 168, 0.5));
      /* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */
      box-shadow:-1px 0 0 #a3a3a3, -2px 0 0 #fff, 1px 0 0 #a3a3a3, 2px 0 0 #fff;
      -moz-box-shadow:-1px 0 0 #a3a3a3, -2px 0 0 #fff, 1px 0 0 #a3a3a3, 2px 0 0 #fff;
      -webkit-box-shadow:-1px 0 0 #a3a3a3, -2px 0 0 #fff, 1px 0 0 #a3a3a3, 2px 0 0 #fff;
      /* This will create a smooth transition for the opacity property */
      -moz-transition:0.25s all;
      -webkit-transition:0.25s all;
      -o-transition:0.25s all;
      transition:0.25s all;
  }
  /* Treating the first LI and li:after elements separately */
   .menu li:first-child {
      border-radius: 4px 0 0 4px;
  }
  .menu li:first-child:after, .menu li.selected:first-child:after {
      box-shadow:1px 0 0 #a3a3a3, 2px 0 0 #fff;
      -moz-box-shadow:1px 0 0 #a3a3a3, 2px 0 0 #fff;
      -webkit-box-shadow:1px 0 0 #a3a3a3, 2px 0 0 #fff;
      border-radius:4px 0 0 4px;
  }
  .menu li:last-child {
      border-radius: 0 4px 4px 0;
  }
  /* Treating the last LI and li:after elements separately */
   .menu li:last-child:after, .menu li.selected:last-child:after {
      box-shadow:-1px 0 0 #a3a3a3, -2px 0 0 #fff;
      -moz-box-shadow:-1px 0 0 #a3a3a3, -2px 0 0 #fff;
      -webkit-box-shadow:-1px 0 0 #a3a3a3, -2px 0 0 #fff;
      border-radius:0 4px 4px 0;
  }
  .menu li:hover:after, .menu li.selected:after, .menu li:target:after {
      /* This property triggers the CSS3 transition */
      opacity:1;
  }
  .menu:hover li.selected:after, .menu:hover li:target:after {
      /* Hides the targeted li when we are hovering on the UL */
      opacity:0;
  }
  .menu li.selected:hover:after, .menu li:target:hover:after {
      opacity:1 !important;
  }
  /* Styling the anchor elements */
   .menu li a {
      color: #5d5d5d;
      display: inline-block;
      font: 20px/1 Lobster, Arial, sans-serif;
      padding: 12px 12px 14px;
      position: relative;
      text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
      z-index:2;
      text-decoration:none !important;
      white-space:nowrap;
  }
  .content {
      width:800px;
      height:750px;
      position:relative;
      top:-75px;
      margin-left:auto;
      margin-right:auto;
      background-color:#FFF;
      -moz-border-radius: 20px;
      border-radius: 20px;
      z-index:-1;
  }
  .copy {
      display:inline;
      padding-left:20px;
      padding-right:20px;
      width:500px;
      position:absolute;
      top:125px;
      left:200px;
      background-color:#AAC1D9;
      -moz-border-radius: 15px;
      border-radius: 15px;
      -moz-box-shadow: 4px 5px 5px 0px #999;
      -webkit-box-shadow: 4px 5px 5px 0px #999;
      box-shadow: 4px 5px 5px 0px #999;
  }
  .copy p {
      font-size:18px;
      font-weight:bold;
  }
  .copy li {
      font-size:18px;
      padding:10px;
      font-weight:100;
  }
  .photocontainer {
      position:relative;
      top:-80px;
      left:30px;
      width:300px;
      margin-right:10%;
      margin-left:auto;
  }
  .image1 {
      background-image:url("http://mdifl.com/img/2D-ultrasound-profile.jpg");
      position:absolute;
      top:0px;
      left:0px;
      height:194px;
      width:250px;
      animation:image1move 9s infinite;
      -webkit-animation:image1move 9s infinite;
  }
  @keyframes image1move {
      0% {
          z-index:1;
          top:0px;
          left:0px;
      }
      33% {
          z-index:2;
          top:10px;
          left:20px;
      }
      66% {
          z-index:3;
          top:20px;
          left:40px;
      }
      100% {
          z-index:1;
          top:0px;
          left:0px;
      }
  }
  @-webkit-keyframes image1move
  /* Safari and Chrome */
   {
      0% {
          z-index:1;
          top:0px;
          left:0px;
      }
      33% {
          z-index:2;
          top:10px;
          left:20px;
      }
      66% {
          z-index:3;
          top:20px;
          left:40px;
      }
      100% {
          z-index:1;
          top:0px;
          left:0px;
      }
  }
  .image2 {
      z-index:3;
      background-image:url("http://mdifl.com/img/3D-ultrasound-face.jpg");
      position: absolute;
      top:0px;
      left:0px;
      height:194px;
      width:250px;
      animation:image2move 9s infinite;
      -webkit-animation:image2move 9s infinite;
  }
  @keyframes image2move {
      0% {
          z-index:2;
          top:10px;
          left:20px;
      }
      33% {
          z-index:3;
          top:20px;
          left:40px;
      }
      66% {
          z-index:1;
          top:0px;
          left:0px;
      }
      100% {
          z-index:2;
          top:10px;
          left:20px;
      }
  }
  @-webkit-keyframes image2move
  /* Safari and Chrome */
   {
      0% {
          z-index:2;
          top:10px;
          left:20px;
      }
      33% {
          z-index:3;
          top:20px;
          left:40px;
      }
      66% {
          z-index:1;
          top:0px;
          left:0px;
      }
      100% {
          z-index:2;
          top:10px;
          left:20px;
      }
  }
  .image3 {
      background-image:url("http://mdifl.com/img/2D-ultrasound-color-doppler.jpg");
      position: absolute;
      top:0px;
      left:0px;
      height:194px;
      width:250px;
      animation:image3move 9s infinite;
      -webkit-animation:image3move 9s infinite;
  }
  @keyframes image3move {
      0% {
          z-index:3;
          top:20px;
          left:40px;
      }
      33% {
          z-index:1;
          top:0px;
          left:0px;
      }
      66% {
          z-index:2;
          top:10px;
          left:20px;
      }
      100% {
          z-index:3;
          top:20px;
          left:40px;
      }
  }
  @-webkit-keyframes image3move
  /* Safari and Chrome */
   {
      0% {
          z-index:3;
          top:20px;
          left:40px;
      }
      33% {
          z-index:1;
          top:0px;
          left:0px;
      }
      66% {
          z-index:2;
          top:10px;
          left:20px;
      }
      100% {
          z-index:3;
          top:20px;
          left:40px;
      }
  }
  .footer {
      width:100%;
      margin-top:-50px;
      margin-left:auto;
      margin-right:auto;
      text-align:center;
  }
  .footer a {
      padding-right:10px;
      padding-left:10px;
      text-decoration:none;
      color:#666;
  }
  :root .footer a:hover {
      color:#00F \0/IE9;
  }
  /* IE9 */
  
  /* internet explorer sucks monkey balls.*/
   .footer a:hover {
      background-color:#CCC;
      -moz-border-radius: 5px;
      border-radius: 5px;
  }
  </code></pre>