Yet another IE css problem -

Everything is peachy in firefox, but a bit messed up in IE

Page 1 of 1

4 Replies - 2056 Views - Last Post: 11 February 2008 - 08:16 AM

#1 Cruciamentum   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 08-February 08

Yet another IE css problem -

Post icon  Posted 08 February 2008 - 12:39 PM

Hey all, i apologize if this is a super dumb problem, but I can't seem to figure it out. Putting together a landing page for my company: http://fidelitydebt....andingpage1.htm and of course it works fine in firefox, yet messes up in IE. I'm fairly new to all this, so i'm sure my site code is a big mess. Biggest problem is the allignment in IE, and then of course one of my javas wont run at all (When you click 'first name' in the form) Any help would be greatly appreciated. Thanks

style sheet:
html {
	font: 1em Arial, Helvetica, sans-serif;
	margin: 0px;
	padding: 0px;
	}

body
{ 
background-image:url('a2.jpg');
background-repeat:repeat-x;
}
/*pop up*/
#pa {
	font-family: Arial,sans-serif;
	background: #FFF;
	text-align: center;
	padding: 10px;
	border: 2px solid #666;
	position: absolute;
	z-index: 100000;
}

#pa .pa_close {
	padding: 0;
	margin: 0;
	position: absolute;
	top: 5px;
	right: 5px;
}

#pa a img {
	border: none;
	text-decoration: none;
}



html:
<!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>
<link rel="stylesheet" type="text/css"
href="landingpage1.css" />
<script language=Javascript src="javascript/mootools-release-1.11.js" type=text/javascript></SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fidelity Debt Solutions</title>
<script src="javascript/prototype.js" type="text/javascript"></script>
<script src="javascript/scriptaculous.js" type="text/javascript"></script>
<script src="javascript/effects.js" type="text/javascript"></script>
<script type="text/javascript" src="javascript/ad.js"></script>
<link rel="stylesheet" type="text/css" href="javascript/ad.css" />
</head>
<body>
<div id="advert" style="position:absolute; z-index:10; left:40%; top:23%; display:none " >
<img src="landing2popup.jpg" width="200" height="160" border="0" alt="Landing Popup" title="Landing Popup" />
</div>
<div id="pa">
		<div class="pa_close"><a href="java script:void(0)" onclick="hideAp()"></a></div>
		<p/>
		<a href="addLinkToMe" target="_new"><img src="foxpop.jpg" alt="special" border="0" /></a>
	</div>
<div id="content">

<table id="landing_page" width="785" height="610" border="0" cellpadding="0" cellspacing="0" align="center" style="padding-top:20px;">
	<form action="https://www.leadfetch.com/sub_leads_new.php?<?php echo $_SERVER['QUERY_STRING']; ?>" method="post" name="newLead" id="newLead" style="margin:0px;" onsubmit="return validateProsper()">
	<tr>
		<td colspan="3">
			<img src="images/landing_01.gif" alt="" width="785" height="163" border="0" usemap="#Map2"></td>
	</tr>
	<tr>
		<td>
			<img src="images/landing_02.gif" width="56" height="232" alt=""></td>
		<td style="background:#fff;width:237px; height:232px">
			  <input type="hidden" name="doHPhChk" value="Y" />
			  <input type="hidden" name="lead_src_type" value="" />
			  <input type="hidden" name="ownerid" value="50" />
			  <script language="javascript" src="https://www.leadfetch.com/hittracker.php?<?php echo $_SERVER['QUERY_STRING']; ?>"></script>
			<span class="general">First Name</span>
			<input class="black14" name="firstName" type="text" id="firstName" onclick="superFun(); return false;" size="15"><br><br />

			<span class="general">Last Name</span>
			<input name="lastName" type="text" id="lastName" size="15"  onclick="superFun(); return false;" class="black14" /><br><br />

			<span class="general">E-Mail</span>
			  <input name="email" type="text" id="email" size="15" class="black14" /><br><br />
			<span class="general">Phone:</span>
			 (
			  <input type="text" name="homePhone1" size="3" maxlength="3" class="black14" style="width:30px" />
			  )
			  <input type="text" name="homePhone2" size="3" maxlength="3" class="black14" style="width:30px" />
			  -<input type="text" name="homePhone3" size="4" maxlength="4"  class="black14" style="width:35px" /><br><br />
			<span class="general">State:</span>
			  <select name="state" size="1"  class="black14">
				<option value="0" selected="selected">- Select A State -</option>
				<option value="AK">AK</option>
				<option value="AL">AL</option>
				<option value="AR">AR</option>
				<option value="AZ">AZ</option>
				<option value="CA">CA</option>
				<option value="CO">CO</option>
				<option value="CT">CT</option>
				<option value="DC">DC</option>
				<option value="DE">DE</option>
				<option value="FL">FL</option>
				<option value="HI">HI</option>
				<option value="IA">IA</option>
				<option value="ID">ID</option>
				<option value="IL">IL</option>
				<option value="IN">IN</option>
				<option value="KY">KY</option>
				<option value="LA">LA</option>
				<option value="MA">MA</option>
				<option value="MD">MD</option>
				<option value="MI">MI</option>
				<option value="MN">MN</option>
				<option value="MO">MO</option>
				<option value="MT">MT</option>
				<option value="ND">ND</option>
				<option value="NE">NE</option>
				<option value="NH">NH</option>
				<option value="NJ">NJ</option>
				<option value="NM">NM</option>
				<option value="NV">NV</option>
				<option value="NY">NY</option>
				<option value="OH">OH</option>
				<option value="OK">OK</option>
				<option value="OR">OR</option>
				<option value="PA">PA</option>
				<option value="RI">RI</option>
				<option value="SD">SD</option>
				<option value="TN">TN</option>
				<option value="TX">TX</option>
				<option value="UT">UT</option>
				<option value="VT">VT</option>
				<option value="WA">WA</option>
				<option value="WI">WI</option>
				<option value="WY">WY</option>
			</select>
			<br><br />
			<span class="general">Unsecured Debt:</span>
			<input name="debt" type="text" class="black14" id="debt" value="$" size="8">
	  
									 
	<input type="hidden" name="aff_id" value="" />
	<input type="hidden" name="src" value="" />
	<input type="hidden" name="kw" value="" />
	<input type="hidden" name="redirectUrl" value="http://fidelitydebt.net/thankyou2.html" />
	<input type="hidden" name="recipient" value="" />
	<input type="hidden" name="subject" value="Fidelity Debt Lead Request" /></td>
		</td>
		<td>
			<img src="images/landing_04.gif" width="492" height="232" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="images/landing_05.gif" alt="" width="785" height="215" border="0" usemap="#Map"></td>
	</tr>
	</form>
</table>
<script>
function init() {
	startAp();
}

window.onload = init;

function superFun(){
	Effect.toggle('advert','blind');
}
</script>


<map name="Map" id="Map">
	<area shape="rect" coords="82,24,274,61" href="java script:void()" onclick="document.newLead.submit();" alt="Submit" title="Submit" />
	<area shape="rect" coords="87,133,277,184" href="http://www.fidelitydebtsolutions.com/debt-calculator.php?" />
</map>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2491100-3";
urchinTracker();
</script>
<!--YAHOO ANALYTICS-->
<script language="Javascript" type="text/javascript">
<!-- Yahoo! Inc.
window.ysm_customData = new Object();
window.ysm_customData.conversion = "transId=,currency=,amount=";
var ysm_accountid  = "12B8QTN3Q6QGKOS0U3QGUTUN2SK";
document.write("<SCR" + "IPT language='Javascript' type='text/javascript' " 
+ "SRC=//" + "srv1.wa.marketingsolutions.yahoo.com" + "/script/ScriptServlet" + "?aid=" + ysm_accountid 
+ "></SCR" + "IPT>");
// -->
</SCRIPT>
<map name="Map2" id="Map2">
<area shape="rect" coords="-10,10,113,114" href="http://www.fidelitydebtsolutions.com" /></map></body>
</html>


This post has been edited by Cruciamentum: 08 February 2008 - 01:14 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Yet another IE css problem -

#2 Martyr2   User is offline

  • Programming Theoretician
  • member icon

Reputation: 5290
  • View blog
  • Posts: 14,121
  • Joined: 18-April 07

Re: Yet another IE css problem -

Posted 08 February 2008 - 03:08 PM

Take a look at the size of your form. Reduce the space in between the elements a little and that should fix it. What is happening is that your form's space is causing it to expand the table cell it is in and when it does that, it expands the whole row giving you the gaps at the top and bottom. If you shrink the text and the space between the fields, you will put the cell back to its proper dimensions and you should see everything line up.

It works fine in Firefox because FF typically uses a slightly smaller font and a little less space. But if you hold the ctrl key and use your mouse wheel to increase the font, you will see the same effect happen in FF as well.

That should fix your general display issues.

Your second problem regarding the clicking of your firstname field is related to your Effect object in effects.js. The toggle function of that object is using code that has been known to be somewhat of a problem in scriptaculous. You can find discussions of it around the web. I would ask them if they have figured out a way around it. I have seen people elude to the idea of just needing to add a style tag inline etc.

But anyways, that should get you up and running in the right direction.

:)
Was This Post Helpful? 0
  • +
  • -

#3 Cruciamentum   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 08-February 08

Re: Yet another IE css problem -

Posted 08 February 2008 - 03:45 PM

View PostMartyr2, on 8 Feb, 2008 - 03:08 PM, said:

Take a look at the size of your form. Reduce the space in between the elements a little and that should fix it. What is happening is that your form's space is causing it to expand the table cell it is in and when it does that, it expands the whole row giving you the gaps at the top and bottom. If you shrink the text and the space between the fields, you will put the cell back to its proper dimensions and you should see everything line up.

It works fine in Firefox because FF typically uses a slightly smaller font and a little less space. But if you hold the ctrl key and use your mouse wheel to increase the font, you will see the same effect happen in FF as well.

That should fix your general display issues.

Your second problem regarding the clicking of your firstname field is related to your Effect object in effects.js. The toggle function of that object is using code that has been known to be somewhat of a problem in scriptaculous. You can find discussions of it around the web. I would ask them if they have figured out a way around it. I have seen people elude to the idea of just needing to add a style tag inline etc.

But anyways, that should get you up and running in the right direction.

:)


Thanks for the reply, and the great explanation :-) Making the font smaller doesn't seem to do anything for me. I'm not entirely sure what you mean by reducing the space between the elements. (Sorry for being a noob) I did get a response when I reduced the padding of the table as a whole, but didn't get it all the way perfect, still 2 cuts in the table, and of course it made FF look like craps. As far as the pop up js script is concerned, would you recommend anything else? my boss could give a care less about the site as a whole, but he has to have that pop up. (Since we'd rather have calls than forms filed) Again, thanks for taking the time to help :-) I've learned so much already.
Was This Post Helpful? 0
  • +
  • -

#4 Martyr2   User is offline

  • Programming Theoretician
  • member icon

Reputation: 5290
  • View blog
  • Posts: 14,121
  • Joined: 18-April 07

Re: Yet another IE css problem -

Posted 08 February 2008 - 04:01 PM

There is space in between the form fields that can be cut out. Also, the form tag itself adds space (an IE problem from long ago and never fixed). Play with the padding in and around the actual INPUT elements and try to get the form squished down.

:)
Was This Post Helpful? 0
  • +
  • -

#5 Cruciamentum   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 08-February 08

Re: Yet another IE css problem -

Posted 11 February 2008 - 08:16 AM

Finally got it fixed, all I had to do was take the padding out of the table and put it in the div instead. None of my java works in IE still, but at least it's all centered. Biggest problem now though, is my submit button for my lead form is not working in IE. Any ideas?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1