Couple of css input form problems

[atad6]

hi,
currently i'm trying to make a styled form for a search box on my site. I attached a picture of what I'm trying to make it look like below. I manage to get the input box styled by using a background image. When I put the code together I can't get the input box to align with the submit button. The submit button doesn't break the line but rather pushes the input box slightly lower. I fixed the problem by using a table, but I would like to solve it without. Here's the code so far:

	.search{
  background-image:url('search3.gif');
  border: none;
  width: 188px;
  height: 35px;
  color: #7cb8e6;
  font-size: 9pt;
  background-repeat:no-repeat;
  padding-left:20px;
  margin: 0;
  }

 <input type="text" name="search" class="search">
<input type="image" src="go.gif" >

I was also wondering if there is anyway to disable the highlighted border safari gives the input box when it's clicked. Since my custom input box has rounded corners it makes the input box look bad when selected.

Any help would be greatly appreciated, thanks!

 

[angelwatt]

Do you have any CSS applied to the Go button? Looks to be margin / padding issue. Might be helpful to see the HTML code that is going around the input tags as well as other CSS you have. Form elements often have default margins and padding that can get in the way.

The horizontal spacing between the two pieces results in the tags being on separate lines. HTML adds a space when a new line is started (more or less). You can avoid this by having the tags on the same line or doing something like the following,

<input type="text" name="search" class="search"
/><input type="image" src="go.gif" />

You should also use the alt attribute on the type="image" tag so that some text will be shown in case the image can't load and for accessibility purposes. It may be helpful if you attach the images you're making use of so we can try out solutions with your resources.

Added:
The Safari highlighted border thing, fix with,

input:focus {
 outline: none;
}

Also just came up with a solution for the other problem,

.search {
...
 vertical-align: top;
...
}

I didn't see this at first because it didn't happen in Firefox. As a note for you though, in Firefox the search box aligns the text to the top of the search box, whereas Safari aligns to middle. You'll want to work out a solution for this. One solution is to add padding to the top and reduce the height by the same amount (e.g. padding-top: 9px; height: 26px; ).

As a comment I think the text color for the search box is too light. It's very hard for me to read. I recommend darkening it up a little. Doing so will match the surrounding color better perceptually (yes I know it's all the same blue, but not to the eye since the text is "emptier").

 

[atad6]

Thank you so much! Sorry my description was a bit vague. Now I just have to figure out how to get the colors right since my ICC profiles in photoshop are all messed up :/

 

[atad6]

also, i guess this may be a silly question, but why does the textbox need to be vertically aligned. i haven't run into this problem any other time, so i guess i was just wondering why it behaves like this

 

[angelwatt]

also, i guess this may be a silly question, but why does the textbox need to be vertically aligned. i haven't run into this problem any other time, so i guess i was just wondering why it behaves like this

Well I only tried the code in Firefox, Opera and Safari, and Opera and Safari had your issue. Firefox didn't need the vertical alignment. Browsers are just different in their defaults. Might be a bug too.

 

[ChicoWeb]

Ive found the best way to do it properly is use floats. Vertical alignments doesn't always work. I'll give you the example from my site.
HTML

      <form action="#">
        <input class="input" type="text" name="username" value="username" onfocus="clearText(this)" />
        <input class="input" type="text" name="password" value="password" onfocus="clearText(this)" />
        <button name="searchButton" value="login" type="submit">login</button>

      </form>

CSS

#login {
	position: absolute;
	top: 31px;
	left: 567px;
	height: 30px;
	}

#login form {
	margin: 0;
	padding: 0;
	height: 26px;
	float: left;
	}

#login form .input {
	margin: 0 10px 0 0;
	padding: 4px 8px;
	width: 147px;
	height: 17px;
	font-size: 12px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	border: 0;
	float: left;
	color: #8f8f8f;
	background-color: #d9d9d9;
	border: 1px solid #acacac;
	}

.input {
	padding: 4px 8px;
	font-size: 12px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	border: 0;
	color: #333333;
	background-color: #f1f1f1;
	border: 1px solid #cccccc;
	}

 

[SrWebDeveloper]

Please see below.

 

[SrWebDeveloper]

The previous answers here were excellent, such as absolute positioning and other CSS, DIV tricks. However, I'd just like to point out a simple and elegant solution that is cross browser compatible and is a best practice for any HTML form design where you want elements to align properly:

Please look closely at this simple example to demonstrate the principle:

<table cellpadding='4' cellspacing='0'>
<form method="post" action="scriptname.ext">
  <tr>
     <td align='left' valign='middle'>UserName:</td>
     <td align='left' valign='middle'><input type='text' name='username'></td>
     <td align='left' valign='middle'>Password:</td>
     <td align='left' valign='middle'><input type='text' name='password'></td>
     <td align='left' valign='middle'><input type='submit' value='Login'></td>
  </tr>
</form>
</table>

Key aspects:

• Put your form inside the table, after <table> and before </table> - this is how you prevent the form from rendering as a block element, rather inline, meaning no extra break added. This is called "nesting" a form.
• Put all form elements in cells properly aligned horizontally and vertically - this is the key aspect I'm showing you (all the cells in the same row, left/middle aligned)
• Although not shown in my example, feel free to add any CSS as necessary to accomplish any additional formatting you require, including any width/height or other cell attributes you'd normally use. I stripped all those out just to show you the bare essentials.

Using this method ensures the form flows properly, reduces the amount of CSS statements, and is cross-browser compatible since table cells are block level and always look the same.

RE: DIV/CSS

Some folks are probably thinking the DIV/CSS approach is the best in the long run (allowing separation of content from style, a W3C best practice) but I just wish to point out in a simple login feature like this using a table is often faster and of course renders well even if a user disables stylesheets in their browser or has accessibility issues (section 508) and uses a screen reader, etc. You see, that's when a table merits usage over a DIV approach - and a login feature is something you want *everyone* to see.

So I'm offering a simple and effective solution, not the only solution, based on many years fidgeting with alignments across diverse browser platforms and OS's also taking into account user disability issues.

Hope this helps!

-jim

 

[Trip.Tucker]

The previous answers here were excellent, such as absolute positioning and other CSS, DIV tricks. However, I'd just like to point out a simple and elegant solution that is cross browser compatible and is a best practice for any HTML form design where you want elements to align properly:

Please look closely at this simple example to demonstrate the principle:

<table cellpadding='4' cellspacing='0'>
<form method="post" action="scriptname.ext">
  <tr>
     <td align='left' valign='middle'>UserName:</td>
     <td align='left' valign='middle'><input type='text' name='username'></td>
     <td align='left' valign='middle'>Password:</td>
     <td align='left' valign='middle'><input type='text' name='password'></td>
     <td align='left' valign='middle'><input type='submit' value='Login'></td>
  </tr>
</form>
</table>

Key aspects:

• Put your form inside the table, after <table> and before </table> - this is how you prevent the form from rendering as a block element, rather inline, meaning no extra break added. This is called "nesting" a form.
• Put all form elements in cells properly aligned horizontally and vertically - this is the key aspect I'm showing you (all the cells in the same row, left/middle aligned)
• Although not shown in my example, feel free to add any CSS as necessary to accomplish any additional formatting you require, including any width/height or other cell attributes you'd normally use. I stripped all those out just to show you the bare essentials.

Using this method ensures the form flows properly, reduces the amount of CSS statements, and is cross-browser compatible since table cells are block level and always look the same.

RE: DIV/CSS

Some folks are probably thinking the DIV/CSS approach is the best in the long run (allowing separation of content from style, a W3C best practice) but I just wish to point out in a simple login feature like this using a table is often faster and of course renders well even if a user disables stylesheets in their browser or has accessibility issues (section 508) and uses a screen reader, etc. You see, that's when a table merits usage over a DIV approach - and a login feature is something you want *everyone* to see.

So I'm offering a simple and effective solution, not the only solution, based on many years fidgeting with alignments across diverse browser platforms and OS's also taking into account user disability issues.

Hope this helps!

-jim

Sorry, did you say 'years' of fidgeting and you used inline styling?

God awful code. Sorry but that's just terrible.

 

[notnek]

The previous answers here were excellent, such as absolute positioning and other CSS, DIV tricks. However, I'd just like to point out a simple and elegant solution that is cross browser compatible and is a best practice for any HTML form design where you want elements to align properly:

Please look closely at this simple example to demonstrate the principle:

<table cellpadding='4' cellspacing='0'>
<form method="post" action="scriptname.ext">
  <tr>
     <td align='left' valign='middle'>UserName:</td>
     <td align='left' valign='middle'><input type='text' name='username'></td>
     <td align='left' valign='middle'>Password:</td>
     <td align='left' valign='middle'><input type='text' name='password'></td>
     <td align='left' valign='middle'><input type='submit' value='Login'></td>
  </tr>
</form>
</table>

Key aspects:

• Put your form inside the table, after <table> and before </table> - this is how you prevent the form from rendering as a block element, rather inline, meaning no extra break added. This is called "nesting" a form.
• Put all form elements in cells properly aligned horizontally and vertically - this is the key aspect I'm showing you (all the cells in the same row, left/middle aligned)
• Although not shown in my example, feel free to add any CSS as necessary to accomplish any additional formatting you require, including any width/height or other cell attributes you'd normally use. I stripped all those out just to show you the bare essentials.

Using this method ensures the form flows properly, reduces the amount of CSS statements, and is cross-browser compatible since table cells are block level and always look the same.

RE: DIV/CSS

Some folks are probably thinking the DIV/CSS approach is the best in the long run (allowing separation of content from style, a W3C best practice) but I just wish to point out in a simple login feature like this using a table is often faster and of course renders well even if a user disables stylesheets in their browser or has accessibility issues (section 508) and uses a screen reader, etc. You see, that's when a table merits usage over a DIV approach - and a login feature is something you want *everyone* to see.

So I'm offering a simple and effective solution, not the only solution, based on many years fidgeting with alignments across diverse browser platforms and OS's also taking into account user disability issues.

Hope this helps!

-jim

please don't use tables...