?
Solved

CSS Problem in HTML Forms

Posted on 2008-11-10
3
Medium Priority
?
554 Views
Last Modified: 2013-12-08
I created a html form. The code snippet is included below.  But I get different display in Firefox and IE, I use FF 2.0.17 and IE7

I designed this form using MS WebExpression 2

1. In Firefox 2.0.17 the design is not WYSIWIG, whereas in IE7 I get it as such I created.


Please Help. I need the display as seen in IE7 Screenshot should also be in Firefox

How to correct it?
<!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 content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Add Your Affiliate Network or Affiliate Program</title>
<style type="text/css">
.style1 {
	text-align: justify;
	color: #99CCFF;
}
.style2 {
	color: #99CCFF;
}
.style3 {
	margin-left: 0px;
}
.style4 {
	color: #FFFFCC;
}
.style5 {
	margin-bottom: 0px;
}
.style6 {
	font-family: "Trebuchet MS";
	font-size: small;
}
.style7 {
	text-align: center;
}
</style>
</head>
 
<body>
 
<form method="post" style="max-width: 780px; max-height: inherit; color: #99ccff;">
	<div class="style1">
				
			
	<fieldset float="left" name="Group1" style="width: 370px; color: #99CCFF;">
	<legend class="style2"><strong>Company Details</strong></legend>
	<label id="Label1"><br />
	Network Category: </label>
	<select name="Category" style="width: auto" title="Category">
	<option value="CPA">CPA</option>
	<option value="Ads">Ads</option>
	<option value="PPC">PPC</option>
	<option value="Work at Home">Work at Home</option>
	<option value="Adults">Adults</option>
	</select><br />
	<br />
	Company Name:&nbsp;&nbsp;&nbsp;&nbsp;
	<input name="Name" tabindex="2" type="text" /><br />
	<br />
	Web Site URL:&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
	<input name="URL" type="text" value="http://" /><label id="Label2"><br />
	Established Year:&nbsp;&nbsp;&nbsp;
	<input name="Year" style="width: auto" type="text" /><br />
	<br />
	Affiliate Manager:&nbsp;&nbsp;
	<input name="Manager" style="width: auto" type="text" /><br />
	Email Address:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<input name="email" style="width: auto" type="text" /><br />
	Telephone:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<input name="phone" style="width: auto" type="text" /><br />
	<br />
	Support:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<select multiple="multiple" name="support" style="width: 137px">
	<option value="Web Support">Web Support</option>
	<option value="Live Chat">Live Chat</option>
	<option value="Email">Email</option>
	<option value="IM">IM</option>
	</select><br />
	</label><br />
	Global Acceptance of Publishers: Yes<input name="ga1" type="radio" value="1" /> 
	No<input name="ga1" type="radio" value="2" /><br />
	<br />
	</fieldset>
	<fieldset class="style1" float="right" name="Group2" style="width: 380px; color: #99ccff;">
	<legend class="style2"><strong>Program Description</strong></legend>
	<br />
	Add Your Description Here. Limited To 2000 Characters.<br />
	<br />
	<textarea name="desc" style="width: 371px; height: 186px"></textarea><br />
	<br />
	UploadYour Web Site Logo, if available<br />
	<input name="image1" tabindex="1" type="file" /> <br />
	<br />
	Upload Your Web Site Index Page/Landing Page/ DashBoard Screeshots<br />
	<input name="image2" tabindex="1" type="file" /></fieldset><br />
	<br />
	<fieldset name="Group1">
	<legend class="style2"><strong>Program Details</strong></legend>
	Ads Type: CPA<input name="at1" type="checkbox" value="at1" />CPL<input name="at2" type="checkbox" value="at2" />CPC<input name="at3" type="checkbox" value="at3" />CPS<input name="at4" type="checkbox" value="at4" />CPO<input name="at5" style="width: 28px" type="checkbox" value="at5" /><br />
	No. of Ads Available: 
	<input name="Text20" style="width: 79px" type="text" /><br />
	<br />
	<fieldset name="Group1">
	<legend class="style2"><strong>Program Commission Details</strong></legend>
	<span class="style4">Details of minimum base commission and maximum base commission that can be 
	earned when an Affiliate or Publisher joins your Affiliate Network and 
	promotes (in dollars and in percentage):</span><br />
	Minimum&nbsp; Base Commission: Flat<input name="bc1" style="width: 65px" type="text" value="$" /> 
	Percentage<input name="bc2" style="width: 65px" type="text" /><br />
	Maximum Base Commission: Flat<input name="bc3" style="width: 65px" type="text" value="$" /> 
	Percentage<input name="bc4" style="width: 65px" type="text" /><br />
	Specify Signup Bonuses, if any:&nbsp;&nbsp;
	<input name="bc5" style="width: 65px" type="text" value="$" /> <br />
	Specify Additional Rewards to Super Affiliates, if any:&nbsp;&nbsp;
	<input name="bc6" style="width: 350px" type="text" /> </fieldset></fieldset><br /><br />
	<fieldset name="Group1">
	<legend class="style2"><strong>Referral Levels</strong></legend>
	Tier-I<input name="t1" type="checkbox" value="t1" />&nbsp;&nbsp;&nbsp; Tier-II<input name="t2" type="checkbox" value="t2" />&nbsp;&nbsp;&nbsp; 
	No Referrals<input name="t3" type="checkbox" value="t3" /><br />
	If Different, Please Specify:<input name="t4" style="width: 182px" type="text" value="t4" /><br />
	<br />
	<fieldset name="Group1">
	<legend class="style2"><strong>Referral Earnings</strong></legend>
	Lifetime Commissions: Yes<input name="lc1" type="radio" checked="checked" value="1" /> No<input name="lc1" type="radio" class="style5" value="2" /><br />
	Flat Rate or Percentage : Flat<input name="fr1" type="radio" value="1" /> 
	Percentage<input name="fr1" type="radio" value="2" /><br />
	Referral Earnings:<br />
	Flat Rate:<input name="fr2" style="width: 67px" type="text" value="$" /> 
	Tier-I:<input name="fr3" style="width: 67px" type="text" value="%" /> 
	Tier-II:<input name="fr4" style="width: 66px" type="text" value="%" /><br />
	<br />
	</fieldset></fieldset><br /><br />
	<fieldset name="Group1">
	<legend class="style2"><strong>Payment Details</strong></legend>
	Payment Threshold (Minimum Commissions To Earn Before Receiving Payment): 
	<input name="pd1" style="width: 79px" type="text" value="$" /><br />
	Maximum Payment Allowed in a Payment Period:<input name="pd2" style="width: 79px" type="text" value="$" /><br />
	Payment Frequency ( Payouts Period):<br />
	(Multi Select as Applicable to your Program)<br />
	<select multiple="multiple" name="pd3" style="width: 173px">
	<option value="Daily">Daily</option>
	<option value="Weekly">Weekly</option>
	<option value="Fortnightly">Fortnighly</option>
	<option value="Monthly">Monthly</option>
	<option value="Net-7">Net-7</option>
	<option value="Net-15">Net-15</option>
	<option value="Net-30">Net-30</option>
	<option>Net-45</option>
	</select><br />
	<br />
	<fieldset name="Group1">
	<legend class="style2"><strong>Payment Method (Payouts Mode)</strong></legend>
	Check:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<input name="pm1" type="checkbox" value="1" />&nbsp;&nbsp;&nbsp; ACH:&nbsp;&nbsp;&nbsp;
	<input name="pm4" type="checkbox" value="4" /><br />
	Wire Transfer: <input name="pm2" type="checkbox" value="2" />&nbsp;&nbsp;&nbsp; 
	Paypal:&nbsp; <input name="pm5" type="checkbox" value="5" /><br />
	Direct Deposit:<input name="pm3" type="checkbox" value="3" />&nbsp;&nbsp;&nbsp; 
	Others:&nbsp; <input name="pm6" type="checkbox" value="6" /> Specify Payout 
	Modes, if chosen Others:<input name="pm7" style="width: 295px" type="text" /></fieldset></fieldset><br /><br />
	<fieldset name="Group1">
	<legend class="style2"><strong>Program Tracking</strong></legend>
	Tracking Software:<input name="tr1" style="width: 182px" type="text" /><br />
	IP Tracking:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Yes<input name="tr2" type="radio" value="1" /> No<input name="tr1" type="radio" value="2" /><br />
	Cookie Tracking: Yes<input name="tr2" type="radio" value="1" /> No<input name="tr2" type="radio" value="2" /> 
	If Yes, Cookie Duration:<input name="tr3" style="width: 60px" type="text" value="Days" /><br />
	<br />
	<fieldset name="Group1">
	<legend class="style2"><strong>Conversion/Statistics</strong></legend>
	Real Time Statistics: Yes<input name="cs1" type="radio" value="1" /> No<input name="cs1" type="radio" value="2" /><br />
	Deep Linking:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Yes<input name="cs2" type="radio" value="1" /> No<input name="cs2" type="radio" value="2" /><br />
	Conversion Rate : High<input name="cs3" type="radio" value="1" /> 
	Medium<input name="cs3" type="radio" value="2" />Low<input name="cs3" type="radio" value="3" /><br />
	Average Conversion Rate:<input class="style3" name="acr" style="width: 91px" type="text" value="Specify %age" /><br />
	</fieldset></fieldset>
	<br /><br />
	<fieldset name="Group1">
	<legend class="style2"><strong>Traffic Details</strong></legend>
	Traffic Allowed For Promotions (Please Check Applicable Traffic Modes):<br />
	<select multiple="multiple" name="tr1" style="width: 142px">
	<option value="Email">Email</option>
	<option value="Organic">Organic</option>
	<option value="PPC">PPC</option>
	<option value="Contextual Advertising">Contextual Advertising</option>
	<option value="Ad Networks">Ad Networks</option>
	<option value="Lead Batch Uploads">Lead Batch Uploads</option>
	<option value="Hosted Co-Reg">Hosted Co-Reg</option>
	<option value="Non-Hosted Co-Reg">Non-Hosted Co-Reg</option>
	<option value="Blog/Forum Postings">Blog/Forum Postings</option>
	<option value="PopUps">PopUps</option>
	<option value="SEO">SEO</option>
	</select> If Other Modes of Traffic are allowed, Please Specify:<input name="tr2" style="width: 212px" type="text" /><br />
	
	<fieldset name="Group1">
	<legend class="style2"><strong>Incentivized Traffic</strong></legend>
		Whether Traffic Can Be Incentivized:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
	Yes<input name="tr3" type="radio" value="1" /> No<input name="tr3" type="radio" value="2" /><br />
	Whether Traffic From Adult Sites Allowed: Yes<input name="tr4" type="radio" value="1" /> No<input name="tr4" type="radio" value="2" /><br />
		</fieldset><br /><br />
	
<fieldset name="Group1">
	<legend class="style2"><strong>Most Important Program Details</strong></legend>
		<strong>How Does Your Program Be Advantageous To Publishers/Affiliates?</strong>(Stand 
		Out From Other Affiliate Programs):<br />
		Pros-1<br />
	<input name="pro1" style="width: 543px" type="text" /><br />
	Pros-2<br />
	<input name="pro2" style="width: 543px" type="text" /><br />
	Pros-3<br />
	<input name="pro3" style="width: 543px" type="text" /><br />
	Pros-4<br />
	<input name="pro4" style="width: 543px" type="text" /><br />
	<br />
	<strong>Which Do You Think Require Improvisation in Your Program When 
	Compared To Your Competitors?</strong><br />
	Cons-1<br />
	<input name="con1" style="width: 543px" type="text" /><br />
	Cons-2<br />
	<input name="con2" style="width: 543px" type="text" /><br />
	Cons-3<br />
	<input name="con3" style="width: 543px" type="text" /><br />
	Cons-4<br />
	<input name="con4" style="width: 543px" type="text" /><br />
	<br />
	
	</fieldset>	
	<fieldset><label id="Label3"><em><span class="style6"><strong>Please ensure 
	before submission that you have provided all the required and relevant 
	information about your web site. This will be helpful for reviewing your 
	Program and publishing here. We at AffiliateProgramMarketings.com, 
	appreciate your submission. However, If the content of your program is found 
	inappropriate, in whatsoever possibility, at our sole discretion, we hold 
	the right not to publish your program.<br />
	</strong></span><br />
	</em></label>
	<div class="style7">
	<input name="Submit1" type="submit" value="submit" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input name="Reset1" type="reset" value="reset" /></fieldset>
</div>
</div>
</form>
 
</body>
 
</html>

Open in new window

ff2017sc.PNG
ie7sc.PNG
0
Comment
Question by:skindu26
2 Comments
 
LVL 43

Accepted Solution

by:
David S. earned 700 total points
ID: 22925123
IE is displaying your code incorrectly. Are you aware that your page contains XHTML errors? The first step in debugging should always be making sure that your code is valid.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

For one thing "float" is a CSS property, not an XHTML attribute. IE should be ignoring it, but it isn't.

You've misused the <label> element. In one of them you nested several form controls. That is very bad. Each form control should have its own <label>.
0
 

Assisted Solution

by:jmoreno8238
jmoreno8238 earned 700 total points
ID: 22925513
That looks like a CSS repositionning problem.
Try specifying the position of the fieldsets directly by using left and top.
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
Suggested Courses
Course of the Month16 days, 1 hour left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question