Jump to content
himynameismark

Textarea Ruins Footer Navigation

Recommended Posts

Hi. I have a website using a PHP require_once template that I created myself. I required the template file in my head, and it has functions to include the header, top navigation, and footer (which includes a smaller navigation menu as well). The whole website works like a charm, except for the footer navigation on the contact page. It works perfectly fine on all other pages, as well as when I comment out the textarea on the form. I have been studying and experimenting with HTML and CSS for some time now, and have never run into this problem. If I put a link immediately after the submit button, it works fine. But the navigation in the footer is rendered as text rather than links when my form has the textarea. Here is my HTML, pulled from View Source so as to show what each PHP function is doing, rather than having to post the PHP template file as well:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><!-- Title --><title>Brink Roofing Division</title> <!-- Meta Information --><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta name="author" content="Mark" /> <!-- Stylesheets --><link rel="stylesheet" type="text/css" href="css/style.css" /><link rel="stylesheet" type="text/css" href="css/formStyle.css" />   <!-- !IE7 Fix -->  <!--[if !IE7]>   <style type="text/css">	#container	 {	  display: table;	  height: 100%;	 }   </style>  <![endif]--></head><body><div id="container">  <div id="header">   <div class="content">	<a href='index.php'><img src='images/brinklogo.jpg' alt='Brink General Contractors' /></a>  	<ul id='header_nav' class='menu'>	<li><a href='index.php'>Home</a></li>	<li><a href='about.php'>About</a></li>	<li><a href='services.php'>Services</a></li>	<li><span class='current_page'>Contact</span></li>	</ul>   </div>  </div>   <div id="main">   <div class="content">	<!-- Form -->	<form method="post" action="">	 <!-- Name -->	 <div class="line">	  <div class="label">	   <label for="name">		Name:	   </label>	  </div>	  <div class="input">	   <input type="text" id="name" name="name" tabindex="1" />	  </div>	 </div>		 <!-- E-Mail -->	 <div class="line">	  <div class="label">	   <label for="email">		E-Mail:	   </label>	  </div>	  <div class="input">	   <input type="text" id="email" name="email" tabindex="2" />	  </div>	 </div>		 <!-- Subject -->	 <div class="line">	  <div class="label">	   <label for="subject">		Subject:	   </label>	  </div>	  <div class="input">	   <input type="text" id="subject" name="subject" tabindex="3" />	  </div>	 </div>		 <!-- Message -->	 <div class="line">	  <div class="label">	   <label for="message">		Message:	   </label>	  </div>	  <div class="input">	   <textarea id="message" name="message" tabindex="4"></textarea>	  </div>	 </div>		 <!-- Submit -->	 <div class="line">	  <div id="submit">	   <input type="submit" id="send" name="send" tabindex="5" value="Send" />	  </div>	 </div>	</form>   </div>  </div></div> <div id="footer">  <div class="content">   <span class='left'>© Brink General Contractors <br />Website by Mark Little</span>   <span class='right'>	<ul id='bottom_nav' class='menu'>	 <li><a href='index.php'>Home</a></li>	 <li>|</li>	 <li><a href='about.php'>About</a></li>	 <li>|</li>	 <li><a href='services.php'>Services</a></li>	 <li>|</li>	 <li><a href='contact.php'>Contact</a></li>	</ul>   </span>  </div></div></body></html>

And my main CSS file:

@charset "UTF-8";*{  margin: 0;  padding: 0;} html, body{  margin: 0;  padding: 0;  height: 100%;  background-color: #ffffff;  font-family: Tahoma, sans-serif;}/* Div */#container{  position: relative;  display: block;  margin: 0 auto;  min-height: 100%;  width: 100%;} #header{  position: relative;  display: block;  margin: 0 0 -136px 0;  height: 136px;  border-bottom: 2px solid #0c71b7;  background-color: #ffffff;  z-index: 2;} #main{  position: relative;  display: block;  padding: 150px 0 80px 0;  z-index: 1;} #footer{  position: relative;  display: block;  margin: -60px auto 0;  height: 60px;  width: 100%;  background-color: #0c71b7;} .content{  position: relative;  display: block;  margin: 0 auto;  width: 970px;  overflow: auto;  padding: 0 5px;  height: 100%;} #footer .content div  {   position: relative;   display: inline-block;   width: 250px;   height: auto;   margin: 10px 0 0 0;  } #footer .left  {   float: left;  } #footer .right  {   float: right;  } /* Navigation */ul.menu{  position: relative;  display: inline;  margin: 0;  padding: 0;  float: right;  list-style-type: none;} ul.menu li{  position: relative;  display: inline;  margin: 0 5px 0 0;  padding: 0;  float: left;} ul.menu li:last-child{  margin: 0;} ul.menu li a{  position: relative;  display: block;  margin: 0;  padding: 0;  width: 100%;  text-decoration: none;  color: black;} /* Header Nav */ul#header_nav  {   position: absolute;   bottom: 0;   right: 5px;  } ul#header_nav li, ul#header_nav li a, ul#header_nav li span  {   width: 100px;   background-color: #0c71b7;   border-top-right-radius: 5px;   border-top-left-radius: 5px;  } ul#header_nav li span  {   display: block;   background-color: #000000;  } img{  border: none;} /* Text */ul#header_nav li, ul#header_nav li a, ul#header_nav span{  text-align: center;  text-decoration: none;  color: #ffffff;  font-weight: bold;} #footer, #footer a{  font-size: 12px;  color: #ffffff;} #footer a:hover{  text-decoration: underline;}

And my form CSS file:

@charset "UTF-8";form{  position: relative;  display: inline;  float: left;  width: 490px;  height: auto;}/* Div */.line{  position: relative;  display: block;  width: 490px;  height: auto;  overflow: auto;  margin: 0;  padding: 15px 0 0 0;} .line:first-child{  padding: 0;} .line .label{  position: relative;  display: inline;  margin: 0;  padding: 0;  width: 60px;  height: auto;  float: left;  clear: left;  text-align: right;} .line .input{  position: relative;  display: inline;  margin: 0;  padding: 0 0 0 10px;  width: 420px;  height: auto;  float: left;  clear: right;}/* Input */input[type="text"]{  position: relative;  display: block;  width: 200px;  height: 20px;  border: solid 2px #0c71b7;  border-radius: 5px;  -moz-border-radius: 5px;} textarea{  position: relative;  display: block;  min-width: 400px;  max-width: 400px;  width: 400px;  min-height: 250px;  max-height: 250px;  height: 250px;  border: solid 2px #0c71b7;  border-radius: 5px;  -moz-border-radius: 5px;} /* Text */label{  font-size: 14px;} input[type="text"], textarea{  font-size: 12px;  font-family: Tahoma, Geneva, "sans-serif";  padding: 3px 5px 3px 5px;} input[type="text"]:focus, textarea:focus{  border: solid 2px #999999;} input[type="submit"]{  position: relative;  display: block;  width: 90px;  height: 30px;  float: right;  margin: 0 5px 0 0;  font-weight: bold;  background-color: #0c71b7;  color: #ffffff;  border: 1px solid #0c71b7;  border-radius: 5px;  -moz-border-radius: 5px;} input[type="submit"]:hover{  background-color: #000000;} input[type="submit"]:active{  background-color: #999999;}

Any help would be greatly appreciated! I have tried putting a line break after the textarea. That was the only kind of answer I found on Google. I have also tried to put the form in a fieldset, thinking that may work. Nothing seems to work except for eliminating the textarea, which isn't exactly logical. Thanks,Mark

Edited by himynameismark

Share this post


Link to post
Share on other sites

did you try validating your code? maybe you have an unclosed <div> or other tag somewhere when including the <textarea>

Share this post


Link to post
Share on other sites

I have validated both my HTML and CSS. My HTML passes with no warnings or errors. When I validate my formStyle.css file as CSS3, the only errors are vendor extensions for the border-radius (for older Mozilla and Webkit based browsers). My style.css file validates as CSS3, with only warnings stating that the color and background color are the same in multiple parts, like when I have the blue background behind the header navigation and the blue footer with white text, and a white background for the rest of the page. I have figured out that removing any type of dimensions from the textarea in the form stylesheet seems to do the trick, but it looks hideous when I do that. I tried correcting that by inputting values for rows and cols in the HTML. I have them as rows="" cols="" currently, as they are required attributes according to the HTML validator. When I do this, it has the same effect as having dimensions set in the CSS file. Leaving it as default rows and cols just looks ugly... Any idea why adding dimensions would mess up footer navigation? If I insert links directly in the content div, they work. Any links in my footer div fail with this though.

Share this post


Link to post
Share on other sites

I've just tested this and it works fine, no problems with footer navigation at all browsers FF, IE7 -9, chrome, opera, the other validation warning which you did not mention was the inserting of block element UL into inline element span

   <span class='right'>        <ul id='bottom_nav' class='menu'>         <li><a href='index.php'>Home</a></li>         <li>|</li>         <li><a href='about.php'>About</a></li>         <li>|</li>         <li><a href='services.php'>Services</a></li>         <li>|</li>         <li><a href='contact.php'>Contact</a></li>        </ul>   </span>

Share this post


Link to post
Share on other sites

Yeah, I forgot about that warning. Since posting this here, I have changed the span tags to div tags. Have you tried to hover over all the links and make sure they work? At first glance, everything seems to work fine. I just tested in FF, IE9, Safari, and Opera. Somehow IE9 was the only browser it worked in. If it comes down to it, I may have to post how I actually have the codes set up (with my PHP include and functions). I took out the dimension styles on my CSS, and in the <textarea> element, switched the cols attribute to "62" and rows is still "". When I put a number in rows, the links break. When I leave rows blank, the links work. When I have height and width declared in my CSS, the links break.

Share this post


Link to post
Share on other sites

All the footer links show their respective url, and underline when hovered over,with the problem you are having I've only known this to happen when you have a position absolute element with transparent background or image somewhere that is overlapping the anchor elements.

Share this post


Link to post
Share on other sites

Wow, such a simple fix was giving me a massive headache! Thanks for that explanation. I didn't even think to add z-index to the footer... Apparently the padding on the main div once it was long enough to where I had to scroll to see the full footer made it overlap the footer, rendering my links unclickable.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...