IE Won't Display WEB FORM Correctly - URGENT HELP HELP HELP!

Discussion in 'HTML & Website Design' started by barwick83, Oct 8, 2010.

0
  1. #1
    Hi there,

    New to the forum (nice to meet you all). I'm not a heavy coder by any means, more of a design guy, however I can't for the life of me fix the way the form is viewed in IE. In Chrome and Firefox it views correctly.

    Please view page in IE for reivew: http://www.socialbungy.com/jobs
    Also view in Chrome and Firefox to see how I'd like it to be viewed (sort of). I just need it to float correctly in IE.

    My client wants to view ASAP. PLEASE PLEASE help.
    I'm sure it's something small i'm missing.

    <!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" />
<meta name="google-site-verification" content="w4xOYcZIr9mAzpsgtyAw1NuLp2yKIsRaRPE9L1bw5NA"/>
<title>Jobs | SocialBungy.com</title>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>
<link href="jobs.css" rel="stylesheet" type="text/css" />
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="../SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
a:link {
	color: #58469B;
}
a:visited {
	color: #134371;
}
a:hover {
	color: #134371;
}
a:active {
	color: #134371;
}
</style>
<script type="text/javascript">
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
	Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
</script>
<link href="../SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css" />
</head>

<body class= "Contact">
<div id="banner">
  <div id="logo"><img src="../images/logo_03.gif" alt="SocialBungy.com" width="360" height="62" onclick="MM_showHideLayers('phone_button','','show')" /></div>
  <div id="phone_button"><img src="../images/phone_button_03.gif" alt="Call Today!" width="167" height="24" /></div>
  <div id="adblastic"><img src="../images/adblastic_03.gif" alt="An AdBlastic Company" width="130" height="75" /></div>
  <ul id="Bungy_menu" class="MenuBarHorizontal">
    <li><a href="/packages">PACKAGES</a></li>
    <li><a href="/howwehelp">HOW WE HELP</a></li>
    <li><a href="/contact">CONTACT</a></li>
    <li><a href="/jobs">JOBS</a></li>
    <li><a href="http://www.GoSoSocial.com">BLOG</a></li>
  </ul>
  <div id="home_icon"><a href="../" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','../images/home_icon_hover_05.gif',1)"><img src="../images/home_icon_05.gif" alt="Home Page" name="Home" width="17" height="16" border="0" id="Home" /></a></div>
</div>
<div id="job_banner">
  <div id="Banner_text_job">
    <p><strong>Are you looking for a fun and exciting job in Social Media? If so, <span style="color: #58469A">SocialBungy</span> is hiring!</strong></p>
    <p><strong>We're currently looking for savvy <span style="color: #58469A">Regional Social Media Manager's</span> across North America.<br />
      If you have an entrepreneurial spirit, outgoing personality, and love for all things Social Media,<br />
      we urge you to apply. <span style="color: #58469A">No Direct Experience Required.</span></strong></p>
  </div>
</div>
<div id="jobs_center_column">
  <div id="job_app_text">JOB APPLICATION</div>
  <div id="what_we_need_list">
    <p style="text-decoration: underline; font-weight: bold">What We Need From You:</p>
    <ul>
      <li>An understanding of the Social Media universe including FaceBook, Twitter, YouTube, Flickr, StumbleUpon, Delicious, Blogging, and a handful of others.</li>
      <li>A <span style="font-weight: bold">strong</span> sales background, shadowed by an <span style="font-weight: bold">entrepreneurial personality</span>.</li>
      <li>The ability to jump from the creative side of marketing to the analytical side, able to	demonstrate why your ideas are analytically sound.</li>
      <li>Excellent <span style="font-weight: bold">verbal</span> and <span style="font-weight: bold">written communication skills</span> and an ability to work individually on a project.</li>
      <li>Brings to the position <span style="font-weight: bold">outstanding organizational skills</span> and the ability to handle multiple projects simultaneously while meeting reporting deadlines.</li>
      <li>Familiar with SalesForce or another CRM solution is an asset.</li>
    </ul>
  </div>
  <div id="lightbulb_graphic"><img src="../images/lightbulb_jobs_page_03.gif" width="152" height="147" alt="Light Bright!" /></div>
  <div id="job_form_submit">
    <form action="../gdform.php" method="post" enctype="multipart/form-data" name="form1" id="form1">
      
      <span id="sprytextfield1"><img src="../images/name_button_contactform_03.gif" alt="Name" name="name_button" width="105" height="37" id="name_button" />
      <input type="text" name="name_field1" id="name_field1" />
      <span class="textfieldRequiredMsg"></span></span>           
<span id="sprytextfield2"><img src="../images/state_button_03.gif" alt="State" name="state_button" width="105" height="37" id="state_button" />
      <input type="text" name="state_field1" id="state_field1" />
      <span class="textfieldRequiredMsg"></span></span>      
<span id="sprytextfield3"><img src="../images/address_button_03.gif" alt="Address" name="address_button" width="105" height="37" id="address_button" />
      <input type="text" name="address_field1" id="address_field1" />
      <span class="textfieldRequiredMsg"></span></span>
<span id="sprytextfield4"><img src="../images/postal_button_03.gif" alt="Postal" name="postal_button" width="105" height="37" id="postal_button" />
      <input type="text" name="postal_field1" id="postal_field1" />
      <span class="textfieldRequiredMsg"></span></span>
<span id="sprytextfield5"><img src="../images/suite_button_03.gif" alt="Suite" name="suite_button" width="105" height="37" id="suite_button" />
      <input type="text" name="suite_field1" id="suite_field1" />
      <span class="textfieldRequiredMsg"></span></span>
<span id="sprytextfield6"><img src="../images/phone_button1_03.gif" alt="Phone" name="phone_button1" width="105" height="37" id="phone_button1" />
      <input type="text" name="phone_field1" id="phone_field1" />
      <span class="textfieldRequiredMsg"></span></span>
<span id="sprytextfield7"><img src="../images/city_button_03.gif" alt="City" name="city_button" width="105" height="37" id="city_button" />
      <input type="text" name="city_field1" id="city_field1" />
      <span class="textfieldRequiredMsg"></span></span>
<span id="sprytextfield8"><img src="../images/email_button_contactform_03.gif" alt="Email" name="email_button" width="105" height="37" id="email_button" />
      <input type="text" name="email_field1" id="email_field1" />
      <br />
      <span class="textfieldRequiredMsg"></span></span>
      <p></p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p><span id="sprytextarea1">
        <label for="question1_textarea">1. What makes you think you’d be a superb Social Media Manager?</label>
        <br />
        <br />
        <textarea name="question1_textarea" id="question1_textarea" cols="45" rows="5"></textarea>
        <span class="textareaRequiredMsg">A value is required.</span></span></p>
      <span id="sprytextarea2">
      <label for="question2_textarea">2. For this position, we require an individual that’s extremely entrepreneurial and sales oriented, <br />
        is that you? If so, please elaborate.</label>
      <br />
      <br />
      <textarea name="question2_textarea" id="question2_textarea" cols="45" rows="5"></textarea>
      <span class="textareaRequiredMsg">A value is required.</span></span>
      <p><span class="upload_resume_text">UPLOAD RESUME</span>
        <input type="file" name="resume_upload" id="resume_upload" />
      </p>
      <p>
        <input type="submit" name="submit_job_form:" id="submit_job_form:" value="Submit" />
      </p>
    </form>
  </div>
</div>
<div id="footer"></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("Bungy_menu", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1");
var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2");
var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3");
var sprytextfield4 = new Spry.Widget.ValidationTextField("sprytextfield4");
var sprytextfield5 = new Spry.Widget.ValidationTextField("sprytextfield5");
var sprytextfield6 = new Spry.Widget.ValidationTextField("sprytextfield6");
var sprytextfield7 = new Spry.Widget.ValidationTextField("sprytextfield7");
var sprytextfield8 = new Spry.Widget.ValidationTextField("sprytextfield8");
var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1");
var sprytextarea2 = new Spry.Widget.ValidationTextarea("sprytextarea2");
</script>
</body>
</html>
    Code (markup):
    @charset "utf-8";
/* CSS Document */

#job_form_submit {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #58469A;
	position: absolute;
	width: 782px;
	height: 40px;
	left: 107px;
	top: 333px;
}
#sprytextfield1 {
	padding-right: 30px;
	float:  left;
	width: 376px;
	height: 37px;
}
#name_field1 {
	display:block;
	border: hidden;
	width: 271px;
	height: 37px;
	background-image: url(../images/text_form_BG_contact_03.gif);
	background-repeat: no-repeat;
	background-color:transparent;
	line-height: 37px !important;
	color: #666;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	text-indent: 10px;
	font-weight:bold;
}
#name_button {
	width: 105px;
	height: 37px;
	float: left;
}
#sprytextfield2 {
	float:  right;
	padding-right: ;
	width: 376px;
	height: 37px;
}
#state_field1 {
	display:block;
	border: hidden;
	width: 271px;
	height: 37px;
	background-image: url(../images/text_form_BG_contact_03.gif);
	background-repeat: no-repeat;
	background-color:transparent;
	line-height: 37px !important;
	color: #666;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	text-indent: 10px;
	font-weight:bold;
}
#state_button {
	width: 105px;
	height: 37px;
	float: left;
}
#sprytextfield3 {
	float: left;
	padding-right: 30px;
	width: 376px;
	height: 37px;
}
#address_field1 {
	display:block;
	border: hidden;
	width: 271px;
	height: 37px;
	background-image: url(../images/text_form_BG_contact_03.gif);
	background-repeat: no-repeat;
	background-color:transparent;
	line-height: 37px !important;
	color: #666;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	text-indent: 10px;
	font-weight:bold;
}
#address_button {
	width: 105px;
	height: 37px;
	float: left;
}
#sprytextfield4 {
	float:  right;
	padding-right: ;
	width: 376px;
	height: 37px;
}
#postal_field1 {
	display:block;
	border: hidden;
	width: 271px;
	height: 37px;
	background-image: url(../images/text_form_BG_contact_03.gif);
	background-repeat: no-repeat;
	background-color:transparent;
	line-height: 37px !important;
	color: #666;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	text-indent: 10px;
	font-weight:bold;
}
#postal_button {
	width: 105px;
	height: 37px;
	float: left;
}
#sprytextfield5 {
	float: left;
	padding-right: 30px;
	width: 376px;
	height: 37px;
}
#suite_field1 {
	display:block;
	border: hidden;
	width: 271px;
	height: 37px;
	background-image: url(../images/text_form_BG_contact_03.gif);
	background-repeat: no-repeat;
	background-color:transparent;
	line-height: 37px !important;
	color: #666;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	text-indent: 10px;
	font-weight:bold;
}
#suite_button {
	width: 105px;
	height: 37px;
	float: left;
}
#sprytextfield6 {
	float:  right;
	padding-right: ;
	width: 376px;
	height: 37px;
}
#phone_field1 {
	display:block;
	border: hidden;
	width: 271px;
	height: 37px;
	background-image: url(../images/text_form_BG_contact_03.gif);
	background-repeat: no-repeat;
	background-color:transparent;
	line-height: 37px !important;
	color: #666;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	text-indent: 10px;
	font-weight:bold;
}
#phone_button1 {
	width: 105px;
	height: 37px;
	float: left;
}
#sprytextfield7 {
	float:left;
	padding-right: 30px;
	width: 376px;
	height: 37px;
}
#city_field1 {
	display:block;
	border: hidden;
	width: 271px;
	height: 37px;
	background-image: url(../images/text_form_BG_contact_03.gif);
	background-repeat: no-repeat;
	background-color:transparent;
	line-height: 37px !important;
	color: #666;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	text-indent: 10px;
	font-weight:bold;
}
#city_button {
	width: 105px;
	height: 37px;
	float: left;
}
#sprytextfield8 {
	float:  right;
	padding-right: ;
	width: 376px;
	height: 37px;
}
#email_field1 {
	display:block;
	border: hidden;
	width: 271px;
	height: 37px;
	background-image: url(../images/text_form_BG_contact_03.gif);
	background-repeat: no-repeat;
	background-color:transparent;
	line-height: 37px !important;
	color: #666;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	text-indent: 10px;
	font-weight:bold;
}
#email_button {
	width:105px;
	height:37px;
	float:left;
}
/*THIS REMOVES THE SCROLL BAR FROM TEXT AREA*/ 
textarea {
	overflow:auto !important;
}
#question1_textarea {
	display:block;
	border: hidden;
	width: 783px;
	height: 166px;
	background-image:  url(../images/text_area_background_03.gif);
	background-repeat: no-repeat;
	background-color:transparent;
	color: #666;
	font:  Arial;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	text-indent: 10px;
}
#question2_textarea {
	display:block;
	border: hidden;
	width: 783px;
	height: 166px;
	background-image:  url(../images/text_area_background_03.gif);
	background-repeat: no-repeat;
	background-color:transparent;
	color: #666;
	font:  Arial;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	text-indent: 10px;
}
#resume_upload {
	display:block;
	width: 783px;
	height: 36px;
	border: hidden;
		
}
.upload_resume_text {
	padding-right: 20px;
	font-size:20px;	
}Share |       

barwick83 
View Public Profile 
Send a private message to barwick83 
Find all posts by barwick83 
Add barwick83 to Your Contacts
    Code (markup):
    Please help.

    Cheers,
    Mike :cool:
     
    barwick83, Oct 8, 2010 IP
  2. Droidman86

    Droidman86 Member

    Messages:
    76
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    43
    #2
    I found these validation errors on the css file which belongs to the input fields which are messed up in IE.

     
    Last edited: Oct 8, 2010
    Droidman86, Oct 8, 2010 IP
  3. barwick83

    barwick83 Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hmm, how do I fix it? Not familiar with a "Parse Error".

    Any suggestions?
     
    barwick83, Oct 8, 2010 IP
  4. Droidman86

    Droidman86 Member

    Messages:
    76
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    43
    #4
    I tested it with the changes and I believe this will fix the problem: Add the following code to the CSS file.

    
* {
margin: 0;
border: 0;
padding: 0;
}
    Code (markup):
     
    Droidman86, Oct 8, 2010 IP
  5. barwick83

    barwick83 Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    that appears to work, when I assign it to each field.
    Thanks a bunch!
     
    barwick83, Oct 8, 2010 IP
  6. Droidman86

    Droidman86 Member

    Messages:
    76
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    43
    #6
    No problem, glad it worked!
    However I don't think it's necessary to assign it to each field, just putting it on top of css should do the work.
     
    Droidman86, Oct 8, 2010 IP
  7. barwick83

    barwick83 Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    tried that, but it caused conflict with other html on the page. Had no choice but to assign it to each.
     
    barwick83, Oct 8, 2010 IP
  8. Droidman86

    Droidman86 Member

    Messages:
    76
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    43
    #8
    oh ok, well good luck :)
     
    Droidman86, Oct 8, 2010 IP