I am going crazy over this stupid contact page, it won’t work with the proper CSS but will work with an improper CSS.
Ok this is what it should look like:
Site: http://www.orangestonephotography.com/test/run/out.php
Code: http://silver163.pastebin.com/m1c533d06
But here is the working version:
Site: http://www.orangestonephotography.com/test/run/out2.php
Code: http://silver163.pastebin.com/m3e0fb194
Here are the three CSS files I been using:
Error.css: http://silver163.pastebin.com/m61d1321d
Style.css: http://silver163.pastebin.com/md163d2c
Style_CF.css: http://silver163.pastebin.com/m5c56032c
Please help! I am going crazy here trying to figure this out.
I ran quick validaion check on your site and over 30 errors are showing.
Try using Firefox for development and installing the following addon which instantly validates your HTML code.
http://users.skynet.be/mgueury/mozilla/new_upgrade.html
Also try this link:
http://validator.w3.org/
and this link:
http://jigsaw.w3.org/css-validator/validator.html.en
.
tried that but doesn’t help 
I have spent some more time with your site and it is not easy to try and eliminate the validation errors without removing some conflicting code. I used the HTML validator to remove all error and also the built-in Tidy facility to make the source more readable.
out.php
<!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" xml:lang="en" lang="en">
<!-- html class="cufon-active cufon-ready" xmlns="http://www.w3.org/1999/xhtml" -->
<head>
<title>
Contact Us - NAS Corporation
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/style_cf.css">
<link rel="stylesheet" type="text/css" href="css/navigation.css">
<link rel="stylesheet" type="text/css" href="css/error.css">
<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css" media="screen">
<script type="text/javascript" src="js/jquery-1.3.2.min.js">
</script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js">
</script>
<script type="text/javascript" src="js/jquery.easing.1.1.1.js">
</script>
<script type="text/javascript" src="js/contact/validation.js">
</script><!-- <2script type="text/javascript" src="js/jquery.validate.js"></script> -->
<script type="text/javascript" src="js/ddsmoothmenu.js">
</script>
<script type="text/javascript" src="js/script.js">
</script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js">
</script>
<script type="text/javascript" src="js/cufon.js">
</script>
<style type="text/css">
.cufon{text-indent:0!important;}
@media screen,projection
{
.cufon{display:inline!important;display:inline-block!important;position:relative!important;vertical-align:middle!important;font-size:1px!important;line-height:1px!important;}cufon cufontext{display:inline-block!important;width:0!important;height:0!important;overflow:hidden!important;text-indent:-10000in!important;}
.cufon canvas{position:relative!important;}
}
@media print{cufon{padding:0!important;}
.cufon .canvas{display:none!important;}}
</style>
<script type="text/javascript" src="js/Anivers_400.font.js">
</script>
<!--[if IE 6]>
<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen" /></style>
<script type='text/javascript' src='js/dd_belated_png.js'></script>
<script>DD_belatedPNG.fix('.png,.icon,#slider_con,a.read_more,#sub_menu li a,blockquote');</script>
<![endif]-->
</head>
<body>
<!-- containers -->
<div id="con">
<!-- header -->
<div id="header">
<!-- logo -->
<div id="logo">
<a href="index.html" title=""><img src="images/logo.png" alt="" class="png"></a>
</div><!-- /logo -->
<!-- header right -->
<div id="header_right">
<!-- header links -->
<div class="top_links">
<a href="index.html" title="">Home</a> | <a href="index.html" title="">Career</a> | <a href="index.html" title="">Contact Us</a>
</div><!-- / header links -->
<!-- header slogan -->
<div class="top_slogan"></div><!-- /header slogan -->
</div><!-- /header right -->
</div><!-- /header -->
<div id="con0_sub">
<div id="con01_sub">
<!-- navigation -->
<div id="navigation">
<div id="dropdown_menu" class="dropdown">
<ul>
<li>
<a href="index.html">HOME</a>
</li>
<li style="z-index: 100;">
<a href="about_us.html">ABOUT US</a>
<ul style="display: none; top: 69px; visibility: visible;">
<li>
<a href="about_us.html">Sub Page</a>
</li>
<li>
<a href="products.html">Product List Page</a>
</li>
<li>
<a href="product_detail.html">Product Deteails Page</a>
</li>
<li>
<a href="portfolio.html">Portfolio</a>
</li>
<li>
<a href="blog.html">Company Blog</a>
</li>
<li>
<a href="contact_us.html">Contact Us Page</a>
</li>
<li style="z-index: 99;">
<a href="#">Second Level Dropdown</a> <!-- Second level dropdown menu -->
<ul style="display: none; top: 0px; visibility: visible;">
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a href="#">Dolor sit amet</a>
</li>
<li>
<a href="#">Consectetur Adipiscing</a>
</li>
</ul><!-- / Second level dropdown menu -->
</li>
</ul>
</li>
<li style="z-index: 98;">
<a href="products.html">OUR PRODUCTS</a>
<ul style="display: none; top: 69px; visibility: visible;">
<li>
<a href="products.html">Product List Page</a>
</li>
<li>
<a href="product_detail.html">Product Deteails Page</a>
</li>
</ul>
</li>
<li>
<a href="portfolio.html">PORTFOLIO</a>
</li>
<li>
<a href="blog.html">COMPANY BLOG</a>
</li>
<li>
<a href="contact_us.html" class="active">CONTACT US</a>
</li>
</ul>
</div>
</div><!-- / navigation -->
<!-- sub page header-->
<div id="sub_page_header">
<div class="left">
<!-- Page navigation-->
<div id="sub_nav">
You are here: <a href="index.html">Home</a> Contact Us
</div><!-- /Page navigation-->
</div>
<div class="right"></div>
</div><!-- /sub page header-->
<div class="sub_page">
<div class="page_left content">
<h3>
ERROR HERE <!--
<cufon
style="width: 95px; height: 20px;" alt="CONTACT " class="cufon cufon-canvas"><canvas style="width: 114px; height: 23px; top: -3px; left: -2px;" height="23" width="114"></canvas><cufontext>CONTACT </cufontext></cufon><cufon style="width: 55px; height: 20px;" alt="FORM" class="cufon cufon-canvas"><canvas style="width: 62px; height: 23px; top: -3px; left: -2px;" height="23" width="62"></canvas><cufontext>FORM</cufontext>
</cufon>
-->
</h3><!-- Start of PHP Contact -->
<?if( isset($_POST['send']) && (!validateName($_POST['name']) || !validateEmail($_POST['email']) || !validatePasswords($_POST['pass1'], $_POST['phone']) || !validateMessage($_POST['message']) ) ):?>
<div class="error">
<ul>
<?if(!validateName($_POST['name'])):?>
<li>
<strong>Invalid Name:</strong> We want names with more than 3 letters!
</li><?endif?>
<?if(!validateEmail($_POST['email'])):?>
<li>
<strong>Invalid E-mail:</strong> Stop cowboy! Type a valid e-mail please :P
</li><?endif?>
<?if(!validateHuman($_POST['human'])):?>
<li>
<strong>You Aren't a Human!</strong> Passwords doesn't match or are invalid!
</li><?endif?>
<?if(!validateMessage($_POST['message'])):?>
<li>
<strong>Ivalid message:</strong> Type a message with at least with 10 letters
</li><?endif?>
</ul>
</div><?elseif(isset($_POST['send'])):?>
<div class="error valid">
<ul>
<li>
<strong>Congratulations!</strong> All fields are OK ;)
</li>
</ul>
</div><?endif?>
<div id="contact_form">
<form method="post" id="customForm" action="">
<ul>
<li>
<label for="name">Name</label> <input id="name" name="name" type="text"> <span id="nameInfo">What's your name?</span>
</li>
<li>
<label for="email">Your Email: (*)</label> <input id="email" name="email" value="" class="required" type="text"> <span id="emailInfo">Valid E-mail please, you will
need it to log in!</span>
</li>
<li>
<label for="phone">Phone Number: (*)</label> <input id="phone" name="phone" value="" class="required" type="text"> <span id="phoneInfo">Enter Your Phone
Number</span>
</li>
<li>
<label for="human">Are you Human?</label> <input id="human" name="human" value="" type="text"> <span id="humanInfo">At least 5 characters: letters, numbers and
'_'</span>
</li>
<li>
<label for="message">Your message: (*)</label>
<textarea id="message" name="message" rows="8" cols="40" class="required">
</textarea>
</li>
<li>
<input class="button" value="Send" type="submit">
</li>
</ul>
</form>
</div>
</div><!-- /contact form -->
</div><!-- /page left -->
<!-- page right-->
<div class="page_right">
<!-- box -->
<div class="box middle">
<div class="textarea">
<!-- box title-->
<h2>
ERROR HERE <!--
<cufon style="width: 80px; height: 19px;" alt="Contact " class="cufon cufon-canvas"><canvas style="width: 97px; height: 22px; top: -2px; left: -2px;" height="22" width="97"></canvas><cufontext>Contact </cufontext></cufon><cufon style="width: 25px; height: 19px;" alt="Us" class="cufon cufon-canvas"><canvas style="width: 38px; height: 22px; top: -2px; left: -2px;" height="22" width="38"></canvas><cufontext>Us</cufontext></cufon>
-->
</h2><!-- text-->
<b>Address:</b> Lorem Ipsum Dolor Sit<br>
<b>Phone:</b> +1 123 123 1233<br>
<b>Fax:</b> +1 123 123 1233<br>
<b>E-Mail:</b> info@companyname.com
</div>
</div><!-- /box -->
<!-- box -->
<div class="box middle">
<div class="textarea">
<!-- box title-->
<h2>
ERROR HERE <!--
<cufon style="width: 69px; height: 19px;" alt="Google " class="cufon cufon-canvas"><canvas style="width: 86px; height: 22px; top: -2px; left: -2px;" height="22" width="86"></canvas><cufontext>Google </cufontext></cufon><cufon style="width: 39px; height: 19px;" alt="Map" class="cufon cufon-canvas"><canvas style="width: 51px; height: 22px; top: -2px; left: -2px;" height="22" width="51"></canvas><cufontext>Map</cufontext></cufon>
-->
</h2><!-- text-->
<div class="clear_space_h"></div><!--
<iframe>
marginheight="2"
marginwidth="2"
src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=new+york&sll=52.908902,-58.491211&sspn=13.219771,39.506836&ie=UTF8&hq=&hnear=New+York&ll=40.714216,-74.005966&spn=0.065057,0.089264&z=12&iwloc=A&output=embed" width="260" frameborder="0" height="250" scrolling="no">
</iframe>
-->
<br>
<small><a href=
"http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=new+york&sll=52.908902,-58.491211&sspn=13.219771,39.506836&ie=UTF8&hq=&hnear=New+York&ll=40.714216,-74.005966&spn=0.065057,0.089264&z=12&iwloc=A"
style="color: rgb(0, 0, 255); text-align: left;">View Larger Map</a></small>
</div>
</div><!-- /box -->
</div><!-- page right-->
<div class="clear_space_h"></div>
</div>
</div>
<div class="clear_space"></div><!-- / containers -->
<!-- footer -->
<div id="footer">
<!-- left row -->
<div class="footer_row list">
<!-- row title-->
<h4 class="footer_title">
ERROR HERE <!--
<cufon style="width: 50px; height: 16px;" alt="Latest " class="cufon cufon-canvas"><canvas style="width: 64px; height: 18px; top: -2px; left: -2px;" height="18" width="64"></canvas><cufontext>Latest </cufontext></cufon><cufon style="width: 40px; height: 16px;" alt="News" class="cufon cufon-canvas"><canvas style="width: 52px; height: 18px; top: -2px; left: -2px;" height="18" width="52"></canvas><cufontext>News</cufontext>
</cufon>
-->
</h4>
<ul>
<li>
<a href="#" title="">Lorem ipsum dolor sit</a>
</li>
<li>
<a href="#" title="">Lorem ipsum dolor sit amet</a>
</li>
<li>
<a href="#" title="">Lorem ipsum dolor sit</a>
</li>
</ul>
</div><!-- / left row -->
<!-- middle row -->
<div class="footer_row list">
<!-- row title-->
<h4 class="footer_title">
ERROR HERE <!--
<cufon style="width: 75px; height: 16px;" alt="Important " class="cufon cufon-canvas"><canvas style="width: 90px; height: 18px; top: -2px; left: -2px;" height="18" width="90"></canvas><cufontext>Important </cufontext></cufon><cufon style="width: 37px; height: 16px;" alt="Links" class="cufon cufon-canvas"><canvas style="width: 49px; height: 18px; top: -2px; left: -2px;" height="18" width="49"></canvas><cufontext>Links</cufontext>
</cufon>
-->
</h4>
<ul>
<li>
<a href="#" title="">Lorem ipsum dolor sit</a>
</li>
<li>
<a href="#" title="">Lorem ipsum dolor sit amet</a>
</li>
<li>
<a href="#" title="">Lorem ipsum dolor sit</a>
</li>
</ul>
</div><!-- / middle row -->
<!-- right row -->
<div class="footer_row contact">
<!-- row title-->
<h4 class="footer_title">
ERROR HERE <!--
<cufon style="width: 62px; height: 16px;" alt="Contact " class="cufon cufon-canvas"><canvas style="width: 77px; height: 18px; top: -2px; left: -2px;" height="18" width="77"></canvas><cufontext>Contact </cufontext></cufon><cufon style="width: 19px; height: 16px;" alt="Us" class="cufon cufon-canvas"><canvas style="width: 31px; height: 18px; top: -2px; left: -2px;" height="18" width="31"></canvas><cufontext>Us</cufontext>
</cufon>
-->
</h4>
<ul>
<li>Phone: 90 111 111 11 11<br>
Address: Lorem ipsum dolor sit amet elit<br>
Email: company@company.com
</li>
</ul><!-- social media icons -->
<ul class="social_icons">
<li>
<a href="#" title=""><img src="images/social_media/twitter.png" alt=""></a>
</li>
<li>
<a href="#" title=""><img src="images/social_media/flickr.png" alt=""></a>
</li>
<li>
<a href="#" title=""><img src="images/social_media/facebook.png" alt=""></a>
</li>
<li>
<a href="#" title=""><img src="images/social_media/rss.png" alt=""></a>
</li>
</ul><!-- / social media icons -->
</div><!-- / right row -->
<div class="clear_space_h"></div><br>
</div><!-- /footer -->
<div style="opacity: 0; height: 1122px; display: none;" class="pp_overlay"></div>
<div class="pp_pic_holder">
<div class="pp_top">
<div class="pp_left"></div>
<div class="pp_middle"></div>
<div class="pp_right"></div>
</div>
<div class="pp_content">
<a href="#" class="pp_expand" title="Expand the image">Expand</a>
<div class="pp_loaderIcon"></div>
<div style="margin-left: 20px;" class="pp_hoverContainer">
<a class="pp_next" href="#">next</a> <a class="pp_previous" href="#">previous</a>
</div>
<div id="pp_full_res"></div>
<div class="pp_details clearfix">
<a class="pp_close" href="#">Close</a>
<p class="pp_description"></p>
<div class="pp_nav">
<a href="#" class="pp_arrow_previous">Previous</a>
<p class="currentTextHolder">
0/0
</p><a href="#" class="pp_arrow_next">Next</a>
</div>
</div>
</div>
<div class="pp_bottom">
<div class="pp_left"></div>
<div class="pp_middle"></div>
<div class="pp_right"></div>
</div>
</div>
<div class="ppt"></div>
</div>
</body>
</html>
.
Maybe try this template modular approach to sort your problems.
Split and save your source code into separate modules and have your out.php include the modules.
Start with no modules included and ensure that you have no validation errors.
Gradually introduce/un-rem a module, eliminate all validation errors then move on to the next until all the modules are included.
template: modular-out.php
<?php include ''_doctype'; ?>
<head>
<title>Title goes here</title>
<?php /* include '_header'; */ ?>
<style type='text/css'>
div {border:dotted 0px #f00}
</style>
</head>
<body>
<div id='container'>
<?php /* include '_logo'; */ ?>
<?php /* include '_menu_top'; */ ?>
<div id='menu_left'>
<?php /* include '_menu_left'; */ ?>
</div>
<div id='center_block'>
<?php /* include '_center_block'; */ ?>
</div>
<div id='menu_right'>
<?php /* include '_menu_right'; */ ?>
</div>
<div id='footer'>
<?php /* include '_footer'; */ ?>
</div>
</div><?php /* container */ ?>
</body>
</html>
.