Cause of form discrepency? 2

jlockley · Jul 20, 2009

In the following form the first several text boxes appear yellow with beveled edges. The rest are flat. I keep going over it, and I can't find where I change styles here or add a border. ??? Can anyone see what I am missing? It all seems pretty straight forward to me, but editing was never my strong suit.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<!--
Design by Schweig Germany
-->
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Registration</title>
<meta name="Register, Submit resume, Newsletter."/>
<meta name="keywords" content="Chef newsletter, Chef career, register, job list."/>
<meta name="description" content="Career tools for chefs"/> 
<meta name="googlebot" content="norarchive"/>
<link href="tiptest.css" rel="stylesheet" type="text/css"/>

<style type="text/css">
.style2 {
	
	border-bottom: 1px solid #C0C0C0;
	background-color: 
}
.style3 {
	background-color: #C0C0C0;
}
.style4 {
	text-align: left;
	background-color: #C0C0C0;
}
.style5 {
	font-family: "Trebuchet MS";
	font-weight: bold;
	font-size: large;
	text-align: right;
}
.style6 {
	margin-left: 0px;
}
.style7 {
	font-size: small;
}
</style>

</head>

<body style="background-color: #C0C0C0">

<div id="logo">
				
<h1>Career Tools
</h1>
	<h2>Register / sign in for alerts and newsletter.</h2>						 
</div>

<div id="wrapper">

<div id="sidebar">
		<div id="menu">


			<ul>			
				<li><a accesskey="1" href="[URL unfurl="true"]http://www.xxxxx/index.html">Home[/URL]
				</a></li>

				<li><a accesskey="2" href="[URL unfurl="true"]http://xxxxxx.com/resources.html">[/URL]					Career Resources 
				</a></li>
				<li>
				<a accesskey="3" 	
href="[URL unfurl="true"]http://www.xxxxxxxxx/positions.html">Positions</a>[/URL]				
				<a accesskey="4"
href="mailto:xxxxxxxxx">contact</a></li>

	</ul>

	</div>

 
	 

	</div>
	<div id="content">
	<div id="main" style="background-color: #C0C0C0">
<form method="post" action="FullForm.php" name="FullForm">
	<table style="width: 792px; height: 553px" cellspacing="5" class="style2">
		<tr>
			<td style="width: 623px" class="style5" valign="top">First Name</td>
			<td style="width: 1184px; height: 31px;" class="style4">
			<input name="First" type="text" size="50" tabindex="1" /></td>
			</tr>
		<tr>
			<td style="width: 623px" class="style5" valign="top">Last Name</td>
			<td style="width: 1184px" class="style4">
			<input name="Last_Name" type="text" size="50" tabindex="2" /></td>
		</tr>
		<tr>
			<td style="width: 623px" class="style5" valign="top">Email </td>
			<td style="width: 1184px" class="style4">
			<input name="Mail" type="text" size="50" tabindex="3" /></td>
		</tr>
		<tr>
			<td style="width: 623px; height: 30px;" class="style5" valign="top">Phone</td>
			<td style="width: 1184px; height: 30px;" class="style4">
			<input name="Phone" type="text" size="50" tabindex="4" /></td>
		</tr>
		<tr>
			<td style="width: 623px; height: 30px;" class="style5" valign="top">City</td>
			<td style="width: 1184px; height: 30px;" class="style4">
			<input name="City" type="text" size="50" tabindex="5" /></td>
		</tr>
		<tr>
			<td style="width: 623px; height: 30px;" class="style5" valign="top">State</td>
			<td style="width: 1184px; height: 30px;" class="style4">
			<input name="State" type="text" size="50" tabindex="6" /></td>
		</tr>
		<tr>
			<td style="width: 623px; height: 30px;" class="style5" valign="top">Zip</td>
			<td style="width: 1184px; height: 30px;" class="style4">
			<input name="Zip" type="text" size="50" tabindex="7" /></td>
		</tr>
		<tr>
			<td style="width: 623px; height: 30px;" class="style5" valign="top">Current position/title</td>
			<td style="width: 1184px; height: 30px;" class="style4">
			<input name="Position_Now" type="text" size="50" tabindex="8" /></td>
		</tr>
		<tr>
			<td style="width: 623px" class="style5" valign="top">Current Employer</td>
			<td style="width: 1184px" class="style4">
			<input name="Employer" type="text" size="50" tabindex="9" /></td>
		</tr>
		<tr>
			<td style="width: 623px; height: 30px" class="style5" valign="top">Employer type 
			<span class="style7"><br />
			(restaurant, 
			hotel, Club, etc)</span></td>
			<td style="width: 1184px" class="style4">
			<input name="Type" type="text" size="50" tabindex="10" /></td>
		</tr>
		<tr>
			<td style="width: 623px" class="style5" valign="top">Desired 
			location</td>
			<td style="width: 1184px" class="style4">
			<input name="Geography" type="text" size="50" tabindex="11" /></td>
		</tr>
		<tr>
			<td style="width: 623px" class="style5" valign="top">Training / education</td>
			<td style="width: 1184px" class="style4">
			<input name="Training" type="text" size="50" tabindex="12" /></td>
		</tr>
		<tr>
			<td style="width: 623px; height: 53px;" class="style5" valign="top">Culinary Specialty (Asian, comfort, etc)</td>
			<td style="width: 1184px; height: 53px;">
			<input name="Culinary" type="text" size="50" tabindex="13" /></td>
		</tr>
		<tr>
			<td style="width: 623px; height: 31px;" class="style5" valign="top">Particular Skills</td>
			<td style="width: 1184px"  class="style4">
			<input name="Skills" type="text" size="50" tabindex="15" /></td>
		</tr>
		<tr>
			<td style="width: 623px" class="style5" >Upload resume</td>
			<td style="width: 1184px" >
			<input name="Resume" type="file" size="50"   tabindex="17" class="style6" style="width: 304px; height: 24px;" /></td>
		</tr>
		<tr>
			<td style="width: 623px; height: 20px; padding-left: 240;" class="style5">Comments</td>
			
		</tr>
	</table>
	<table>
	
<td class="style3"> <textarea name="Comments" style="width: 548px; height: 135px; margin-left: 120px
" class="style5" tabindex="18"></textarea>	</td></table>

	<table style="width: 100%; float: right;" align="center" class="style3">
		<tr>
			<td style="width: 715px">&nbsp;</td>
		</tr>
		<tr>
			<td class="style6" style="width: 715px">Please put me on your mailing list to receive 
			postion updates, market reports, career tips and more </td>
		</tr>
		<tr>
			<td class="style6" style="width: 715px">
			<input name="Mailing_List" type="button" value="Yes, Please!" tabindex="19" /></td>
		</tr>
		<tr>
			<td class="style7" style="width: 715px"; align="center"; margin-left: 40
			>
			<input name="Submit1" type="submit" value="submit" tabindex="20" style="width: 57px"  />
			<input name="Reset1" type="reset" value="reset" style="width: 57px; " class="style5" /></td>
			<td>&nbsp;</td>
		</tr>
	</table>

</form>

 
<p>Return to Main Page</p>

<p></p>




</div>

</div>
<div id="footer">
<br></br> <p/> 
</div>

</div>
</body>

</html>

Vragabond · Jul 21, 2009

There's one potential reason for this issue. You have Google Toolbar installed, which marks input fields that can be pre-filled with that style.

If it is not that, then we cannot help. You have a linked stylesheet, which probably defines the look of the input boxes, but we cannot see the stylesheet to let you know why some are styled differently. Also, we have no idea what you mean by 'several' and that is something we would need to know if we were trying to find out the cause for different styling.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

jlockley · Jul 21, 2009

Actually, the style sheet determines the container in which this is to be placed. The styles are fixed in this code.

All of the text entry spaces, furthermore, are assigned the same style. I will override this with a distinct style in the main style sheet (included below) or an included separate css just for the forms. I am just a bit puzzled by this.

/* Edited with EditCSS */
/**** Style sheets whose contents could be loaded were ****/
/**** imported instead. Rule order may be incorrect ****/
/**** as a result. ****/
@import "chrome://skype_ff_toolbar_win/content/injection_graph.css";

/**** LINK-tag style sheet default.css ****/

/* Design by Schweig*/

{
margin: 0;
padding: 0;
}

body {
background: #FFFEF5 url('/images/img01.gif');
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #657383;
}

h3 {
color: #258383c;
}

h2 {
color: #258383c;
}

h1 {
color: #258383c;
}

h1 {
}

h2 {
margin-bottom: 1em;
text-transform: uppercase;
font-size: 1.2em;
}

h3 {
margin-bottom: 1.5em;
text-transform: uppercase;
font-size: .8em;
}

ol {
margin-bottom: 1.5em;
}

ul {
margin-bottom: 1.5em;
}

blockquote {
margin-bottom: 1.5em;
}

p {
margin-bottom: 1.5em;
}

p {
}

blockquote {
margin-left: 2em;
padding-left: 1em;
border-left: 2px solid #F08F02;
font-style: italic;
}

ol {
margin-left: 3em;
}

ul {
margin-left: 3em;
}

ul {
}

ul li {
}

ol {
}

ol li {
}

code {
}

pre {
}

pre {
}

code {
}

a:link {
color: #F08F02;
}

a:hover {
text-decoration: none;
}

a:visited {
}

img {
}

.image-left {
float: left;
margin-right: 1em;
}

.image-right {
float: right;
margin-left: 1em;
}

select {
}

textarea {
}

input {
}

input {
}

textarea {
}

select {
}
/*problem*/
/* Header */

#header {
height: 247px;
padding: 0 0 0 330px;
background: url('images/Photo.jpg') no-repeat;
}

/* logo and picture height are both 247. Removes gap */

#logo {
height: 247px;
padding: 1px 0 0 40px;
background: url('images/banner.jpg') no-repeat;
text-transform: lowercase;
}

#logo h1 {
float: left;
letter-spacing: -.1em;
font-style: italic;
font-size: 4em;
color: #003333
}

#logo h1 a {
color: #003333;
}

#logo h2 {
float: left;
letter-spacing: -.05em;
font-style: italic;
font-size: 1em;
color: 003333
}

#logo a {
text-decoration: none;

}

/* Wrapper */

#wrapper {
margin-right: 100px;
background: url('/images/img05.jpg') repeat-y 300px 0;
}

/* Sidebar - find width */

#sidebar {
Float: left;
width: 330px;

}

/* Content. Not sidebar. Main Text. Padding brings bars flush to graphic. Do not adjust */

#content {
margin-left: 390px;
padding: 30px;

}

/* Sidebar on other temp - missing here*/

#sidebar { }
#Sidebar h2 {
display: none;
}

#Sidebar ul {
margin-left: 0px;
list-style: none;
}
/ * ----- */

/* Menu */

#menu {
}

#menu h2 {
display: none;
}
/* this code only impacts thet text and not the buttons */
#menu ul {
margin: 1px;
list-style: none;
padding-left: 1px;
}

#menu li {
display: inline;
}

#menu a {
display: block;
height: 60px;
padding: 1px 0 0 50px;
background: url('images/button2.jpg') repeat-x;
text-decoration: none;
font-size: 1.4em;
font-style: italic;
color: #003333;
}

#menu a:hover {
color: #333366;
}

/* comment - move 15 px to left */

#comment {
padding: 30px;

}

#comment blockquote {
margin-left: 15;
}

/* Welcome */

#welcome {
}

/* Footer */

#footer {
padding: 60px 30px;
background: url('/images/img06.gif');
color: #ADB07C
}

#footer hr {
display: none;
}

#footer p {
margin: 0;
font-size: .8em;
}

#footer a {
color: #ADB07C
}

/**** LINK-tag style sheet injection_graph.css ****/

/* Non-http; imported above. */

Vragabond · Jul 21, 2009

I'm sorry, do you have a link to this page? There's still a lot that's unclear:

1. Are you using any toolbars in the browser? Google toolbar is known to put a border and yellow background on fields it can auto populate. Does this happen in every browser?
2. How many and which inputs get the styling?
3. You mention there's a stylesheet that controls the form elements but you do not share it with us? Since the problem is in the form styling, seeing that stylesheet would be beneficial.
4. You mention some additional styles, where you override default stylings. Is this for form elements or not? If former, then we need to see that too.

Really, the only thing that might help would be seeing this page in action.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

jlockley · Jul 21, 2009

right now it is still on desktop. I have tried it with both IE and Firefox. I need to work on it a bit before it goes up, but your hunch makes sense. Google can populate a lot of the address fields, but when it comes to the next field, current position, then the job descriptions, it could not. I am going to work with that a bit. It will take me a bit to robot proof the script and put it up, then I will link it.

Thanks. I think you are probably right.

ChrisHunt · Jul 22, 2009

As Vrag says, putting a yellow background on some form fields is a "feature" of Google Toolbar. One that they don't tell you about, leading to much confusion and not a few posts on this forum.

If you have this toolbar (or any others for that matter) try disabling it and see if it solves your problem.

If it doesn't, try installing the Firebug plug-in for Firefox. One of its many functions is to tell you which CSS rules are being applied to any given element.

Finally, if you still can't track it down, try creating a simple page, with just one or two input elements on it an minimal styling/markup. Add features one by one until the problem occurs. It's hard to tell the wood from the trees when you're working with a mass of CSS and HTML, cutting it down to a minimal amount of code mkes things clearer. It makes it easier for us too!

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

jlockley · Jul 22, 2009

Terrific idea, that. I find the Web Developer invaluable. Thanks.

I have seen the yellow form spaces in forms I have filled out and assumed it meant required field. This, too, is good to know.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Cause of form discrepency? 2

jlockley

Technical User

Vragabond

Programmer

jlockley

Technical User

Vragabond

Programmer

jlockley

Technical User

ChrisHunt

Programmer

jlockley

Technical User

Similar threads

Part and Inventory Search

Sponsor