Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Oct 2011
    Posts
    4
    Member #
    29559
    Hi,

    I am having a CSS issue that is ruining my form page. My website is primarily designed to generate leads so this problem is a major, major issue for me.

    The issue is that the first text box on my form is appearing properly, but the other text boxes end up getting pushed down. It's a maddening issue and I have tried everything (clear:left, clear:right, clear:both, etc) without avail.

    The issue is that there are two css columns in a container. The navigation CSS column on the left is pushing down the contents of the form css div on the right. Both divs are inside of a container div. Does anyone have any ideas about why this might be happening?

    The web page is http://www.lawmoye.com/my_contact.php

    A friend of mine set up the PHP for it. The interesting thing is that he basically put a "clear:both" after each text box. If you remove the "clear:both" after each text box, the text boxes all run into each other. All of the other pages on the site are live and work together perfectly. The only (major) issue remaining is the form page.

    The net effect of all of this is that it makes the form page look like crap. It's pretty frustrating.

    I have posted the code from the PHP page here:

    The CSS code is in a separate CSS file and it says:

    .clear {
    clear:both;

    <?php

    if($_POST['consub']){
    if(trim($_POST['first_name'])=='') $msg ='You must enter a First Name to contact us.';
    if(trim($_POST['email'])=='') $msg ='You must enter an Email Address or we won&#39;t be able to contact you.';
    if(trim($_POST['message'])=='') $msg ='You must enter a message to contact us.';
    if(!$msg){
    foreach($_POST as $k=>$v){
    $_POST[$k]=mysql_real_escape_string(trim($v));
    }

    $name = $_POST['first_name'].' '.$_POST['last_name'];
    $email = $_POST['email'];
    $address = $_POST['address'].' '.$_POST['city'].', '.$_POST['state'].' '.$_POST['zip'];
    $message = $_POST['message'];
    $mailmsg = "LawMoye Contact Form Submission:\n\n".
    "Submitted By: ".$name."\n".
    "Email Address: ".$email."\n".
    "Address: \n".$address."\n\n".
    "Message:\n".$message."\n\n";

    }
    }
    $clear='<div class="clear"></div>';
    if($msg) $msg = '<div class="errorbox" style="width:250px;">'.$msg.'</div>';
    $contactform='<div id="contactdisplay">
    <form action="" method="post" id="conform">
    '.($msg?$msg:'Fill out the form to contact our staff.<br />').'
    <div class="c_title">First Name:</div><input class="c_txt" type="text" size="25" name="first_name" value="'.$_POST['first_name'].'" />'.$clear.'
    <div class="c_title">Last Name:</div><input class="c_txt" type="text" size="25" name="last_name" value="'.$_POST['last_name'].'" />'.$clear.'

    The rest of the text boxes look exactly like the Last Name text box above.

    Then it ends with the following:

    Message:<br />
    <textarea name="message" rows="4" cols="40"></textarea><br />
    <input type="submit" name="consub" value="Submit" />
    </form>
    '.$clear.'
    </div>';

    echo $contactform;

    ?>

    I know that there's something wrong with clearing the divs. The content area is obviously pushing down everything that follows the first clear. Basically, the div on the right is being pushed down by the content on the left. If you click the slider on the left side of the navigation menu, you will find that the content in the form moves up and down when the navigation moves up and down. I have cleared everything in every way possible and now I'm just stuck...

    Any help would be greatly appreciated. I contacted my friend for help but he just started a new job and has been tough to catch...

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Only thing that catches my attention right off...'you are using a strict doc type, and trying to use inline styling for the clears.

    Try changing your doc type to transitional ( inline CSS styles are not supported for strict doc types ), or define your form elements in the CSS file and clear them there. Probably would be cleaner and behave better if you did the latter.

  4. #3
    Junior Member
    Join Date
    Oct 2011
    Posts
    4
    Member #
    29559
    Quote Originally Posted by Webzarus, post: 221416
    Only thing that catches my attention right off...'you are using a strict doc type, and trying to use inline styling for the clears.

    Try changing your doc type to transitional ( inline CSS styles are not supported for strict doc types ), or define your form elements in the CSS file and clear them there. Probably would be cleaner and behave better if you did the latter.
    I moved the CSS language over to a CSS file and it didn't seem to make any difference. I found it a bit odd that my friend used a clear div after every single text box. It seemed like overkill. Yet I tried to use a <br /> and it didn't create a new line.

    I will try to change it to a transitional doc type. I never thought about that before. I don't know much about doc types so I will look it up.

    Thanks for that!!!

  5. #4
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Looking at your CSS, none of the form elements were defined, so I don't know how you would apply the clear to the form elements without them being defined.

    The clear both is pretty much the same as a br but used in CSS to reset any floating elements and keep from affecting the next element.

    But with a strict doc type, the inline element of clear is ignored, therefore pretty useless. Using the br should suffice without having to recode everything.

  6. #5
    Junior Member
    Join Date
    Oct 2011
    Posts
    4
    Member #
    29559
    Quote Originally Posted by Webzarus, post: 221420
    Looking at your CSS, none of the form elements were defined, so I don't know how you would apply the clear to the form elements without them being defined.

    The clear both is pretty much the same as a br but used in CSS to reset any floating elements and keep from affecting the next element.

    But with a strict doc type, the inline element of clear is ignored, therefore pretty useless. Using the br should suffice without having to recode everything.
    I changed to a transitional doc type. It didn't seem to change the appearance of it for some reason. I also added the <br /> afterwards but that didn't seem to help.

    BTW, thanks for mentioning the strict doc type tip. I had set up all the pages as strict doctype and now I changed them to transitional.

    Also, a quick side question -- is there a good reason to use strict? It seems that you would always want to use transitional...

  7. #6
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Using a strict doc type will tell most browsers not to go into "quirk mode", no matter what.

    Quirk mode is generally slower, and each browser engine handles and displays code differently in quirk mode.

    By using strict you tell the browser to display as coded, but you really need to make sure your code validates before moving to strict mode.

    Only about 1% of designers will get 100% of their code to validate in strict mode, but if youre a CSS purist, then that is usually the goal.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:33 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com