RE: [WSG] my form field looks like the girl that chewed gum on willy Wonkas
Hi Everyone This brings up a good topic. Apparently, my problem arises from creating a div with an id=search to place a search box in part of the page. This is currently commented out. Then, I used search as the id of an input field to relate to a label. So, the input is grabbing the styles for the div that has the same id. Moral to the story, be careful how you name your divs and such. When I changed the id of the input to query, all of the problems dissapeared. Thank you for your help everyone. Special thanks to Nick for sending me a screenshot in Safari. I need to add a clearing div to my contact form to make the fieldset wrap around the whole sucker. Ted -Original Message- From: Terrence Wood [mailto:[EMAIL PROTECTED] Sent: Thursday, December 16, 2004 1:39 PM To: [EMAIL PROTECTED] Subject: Re: [WSG] my form field looks like the girl that chewed gum on willy Wonkas Check all your styles relating to #search... which appear to be set up for a form. However, your form is contained in #stack, and #search is simply an input. The extra height is caused by padding. The fix is: 1. replace #search with #stack in your css, or 2. change #stack to #search in your html and removing the id from the input field. Terrence Wood. On 2004-12-17 9:02 AM, Ted Drake wrote: Can a form action cause a form field to grow? Here's a page that has a similar form, look at the way it's input fields behave properly. http://tcdpc/csa/contact-travel-insurance.do Thanks for any feedback on this question Ted Drake Web Content Editor CSA Travel Protection http://www.csatravelprotection.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** -- You know you've achieved perfection in design, not when you have nothing more to add, but when you have nothing more to take away. -Antoine de Saint-Exupery ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] my form field looks like the girl that chewed gum on willy Wonkas
In your forms.css file, this line is causing the problem:
#search {width:215px; clear:left; padding-top:15px; }
Change the padding-top to 1px or something and it looks normal.
Paul
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] my form field looks like the girl that chewed gum on willy Wonkas
We have plenty of forms on our site and they all behave pretty well, except our
search box. The coding is exactly the same, the style sheets are the same, but
the text input box is huge!
http://www.csatravelprotection.com/csa/help.do
The only variation is the form action. It is referencing a form action at
freefind.com.
In forms.css you apply padding of 15 px to the top of the search form
element, if you change this to a margin instead or remove the padding it
looks to solve the problem. Change this rule:
#search {width:215px; clear:left; padding-top:15px; }
It is also a bit bigger after changing the above rule as it recieves
additional padding from this rule in screen.css
#search {clear:both; padding:5px 0 5px 10px; }
The padding in both of these rules is applied within the input element,
a margin would be better for spacing in this case.
--Ryan
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] my form field looks like the girl that chewed gum on willy Wonkas
Check all your styles relating to #search... which appear to be set up for a form. However, your form is contained in #stack, and #search is simply an input. The extra height is caused by padding. The fix is: 1. replace #search with #stack in your css, or 2. change #stack to #search in your html and removing the id from the input field. Terrence Wood. On 2004-12-17 9:02 AM, Ted Drake wrote: Can a form action cause a form field to grow? Here's a page that has a similar form, look at the way it's input fields behave properly. http://tcdpc/csa/contact-travel-insurance.do Thanks for any feedback on this question Ted Drake Web Content Editor CSA Travel Protection http://www.csatravelprotection.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** -- You know you've achieved perfection in design, not when you have nothing more to add, but when you have nothing more to take away. -Antoine de Saint-Exupery ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
