S@m Posted November 28, 2005 Share Posted November 28, 2005 I have a search form within a "p class". I need to keep the search field and the search button all on one line so I found this bit of code to keep it from inserting a line break:css: .searchform { margin: 0; padding: 0; display: inline; } Then my html: <p class="headerNav"><a href="#">Home</a> | <a href="#">Locations</a> | <a href="#">Contact Us</a> | <a href="#">Careers</a>| <a href="#">Français</a> <br/> <br/> <img src="../images/caflag.gif" alt="Canada Flag"/> <!-- <form action="/canada/en/search/process.do" method="get" class="searchform"> --> <input name="queryString" type="text" id="queryString" value="Search" size="13" maxlength="50"/> <input type="image" name="go" src="../images/search-button.gif" alt="go"/> <input type="hidden" name="category"/></form> </p> That works fine, but when I validate the html, it doesn't like the fact that I have a class on the form inside of the p class. Is there a better way to do this?If I remove the class on the form, it puts in a line break. :)Thank you for your time and help! Link to comment Share on other sites More sharing options...
Skemcin Posted November 28, 2005 Share Posted November 28, 2005 well, I'm not sure if this will help, but I would get out of using the "size" attribute in your <input> tag. Each browser interprets this differently. Either create a class for it's size or change it to something like: <input name="queryString" type="text" id="queryString" value="Search" style="width:50px;" maxlength="50"/> this will give you a more consistant display.Can you post the URL where this coed (in its entirety) resides? It would be interesting to play with your code a little bit to try and help. Link to comment Share on other sites More sharing options...
S@m Posted November 28, 2005 Author Share Posted November 28, 2005 Well, I got this to work: css: .searchform { margin: 0; padding: 5px 0px 0px 0px; display: inline; float: right; } html: <p class="headerNav"><a href="#">Home</a> | <a href="#">Locations</a> | <a href="#">Contact Us</a> | <a href="#">Careers</a>| <a href="#">Français</a></p> <br/> <form action="/canada/en/search/process.do" method="get" class="searchform"> <img src="../images/caflag.gif" alt="Canada Flag"/> <input name="queryString" type="text" id="queryString" value="Search" style="width:133px;" maxlength="133"/> <input type="image" name="go" src="../images/search-button.gif" alt="go"/> <input type="hidden" name="category"/></form> Is is a "good idea" to put the image inside the form like that?I don't have the form inside a "p" tag, everything seems to work fine and checks out in validation as well. Thank you for your time Skemcin Link to comment Share on other sites More sharing options...
Skemcin Posted November 28, 2005 Share Posted November 28, 2005 yeah you can put anything you want in inside a <form> tag - it simply puts a wrapper around everything so that the browser knows what form elements are to be associated with each form when it is submitted. Think of the <form> tag like the <body> tag in that you can do what ever you want in it.glad it's working out for you - let me know if what I said here confused you any. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now