Solved

How to display html text box as blue square, and also, indented with yellow background?

Posted on 2007-04-11
8
635 Views
Last Modified: 2010-04-09
How do I display a text box so the box is indented in.  On the code below the first two text boxes are indented in(under last Name); however, the other text boxes show up as a blue square and are not indented in.  The code is on the same page, and the text boxes are displayed differently.  What causes one text box to come out as a blue square with no indentation, and the other two to come out as a square with indentation and a yellow background.

<form>      
<table>      
<tr>
<td>      
Last Name:
</td>
<td> <!-- The next two lines come out indented with a yellow background on the text box -->
<input type="text" name="firstname">
<input type="text" name="lastname">
</td>
</tr>
<tr>
<td>      
Company:
</td>
<td><!-- The next line comes out as a blue box with no indentation -->
<input type="text" name="company">
</td>
</tr>
<tr>
<td align="right">      
Unique Identifier:
</td>
<td> ><!-- The next line comes out as a blue box with no indentation -->
<input type="text" name="uniqueidentifier">
</td>
</tr>
<tr>
<td>&nbsp;</td>      
<td>&nbsp;</td>      
</tr>      
<tr>
<td>
</td>
<td>            
<input type="submit" value="Advance Search">
</td>
</tr>
</table>
</form>
0
Comment
Question by:swansonplace
  • 3
  • 3
  • 2
8 Comments
 
LVL 3

Expert Comment

by:dmagliola
ID: 18891785
Can you send us the complete HTML for the page, with the CSS file(s) involved?
With the code you sent, there is no reason for any of the boxes to be either yellow, blue, or different from one another.
0
 
LVL 8

Expert Comment

by:jawahar_prasad
ID: 18891912
it is the property of the browser(or any toolbars like google, yahoo etc., installed in your browser)

The common text boxes like email, firstname, lastname etc., will be highlighted in yellow background... you can try changing the name of the text boxes to avoid it...
0
 

Author Comment

by:swansonplace
ID: 18891949
Below is a copy of the full page: No css and no includes

<%Option Explicit%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>

<body bgcolor="white">

<form>      
<table>      
<tr>
<td>      
Last Name:
</td>
<td>      
<input type="text" name="firstname">      
<input type="text" name="lastname">
</td>
</tr>
<tr>
<td>      
Company:
</td>
<td>
<input type="text" name="company">
</td>
</tr>

<tr>
<td>&nbsp;</td>      
<td>&nbsp;</td>      
</tr>      
<tr>
<td>
</td>
<td>            
<input type="submit" value="Advance Search">
</td>
</tr>
</table>
</form>
</body>
</html>
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 3

Expert Comment

by:dmagliola
ID: 18892085
Then I like jawahar's explanation, because I don't see any reason for the boxes not to be white like in normal unstyled HTML.
0
 

Author Comment

by:swansonplace
ID: 18892098
I have made changes to the page, and somehow the labels first name, last name, and zip are causing the text box formats to change.  This example is different from above, but it's the exact same concept.

Notice how the label does not say "First Name" it says "irst Name".  Is there anything I can do about this?

<form>      
<table>      
<tr>
<td>      
irst name:
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>      
ast name:
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td align="right">      
ip:
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>&nbsp;</td>      
<td>&nbsp;</td>      
</tr>      
<tr>
<td>
</td>
<td>            
<input type="submit" value="Search">
</td>
</tr>
</table>
</form>

<form action="searchadvance.asp">
<table align=center>
<tr>
<td>                  
<input type="submit" value="Advance Search">
</td>
</tr>
</table>
</form>      
0
 
LVL 3

Accepted Solution

by:
dmagliola earned 250 total points
ID: 18892107
Well, if it IS a toolbar component doing this, then this should only happen in your machine or in machine's of people with that toolbar.
Not much you can normally do, but I don't think you should worry about it.

If you need to test locally without this happening, try using a different browser (ie. Firefox, or Opera)
0
 
LVL 8

Assisted Solution

by:jawahar_prasad
jawahar_prasad earned 250 total points
ID: 18896720
It is not the problem with your code...
Just try going to google.com/adsense... You can notice the userid text box in yellow color( Sorry if it doesnt ;-)  )..  It normally occurs.. even if you apply CSS, it will be yellow color only...
0
 

Author Comment

by:swansonplace
ID: 18924420
Thank you for the help.  I am glad my code is okay.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
login jsp example 24 62
Can't find PHP files on account that has WordPress 3 38
Outlook opens HTML email as text 4 29
How to create a textarea which saves text in HTML 8 44
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

766 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