Just playing around with some web designs for the first time in years, and I'm trying to get a form and button to fit in a header ive made. I've got everything to fit now, however my submit button is more than double it's original size. original size is 128x44 and the new size is 256x99.

 

Here's the relevant html and css:

 

<form id="query" action="#" method="post">
   <h2>Have a query?</h2>
   <fieldset>
     <label>Your full name:</label>
     <input type="text" name="Full Name" />
     <label>Your email address:</label>
     <input type="text" name="Email" />
     <label>Your query:</label>
     <textarea cols="35" rows="5"></textarea>
     <input class="btn" type="image" src="images/submit_btn.jpg"/>
   </fieldset>
 </form>

 

form#query {
 background: url(../images/form_bg.jpg) repeat-x;
 margin: 0px;
 border: none;
 padding: 20px;
 float: right;
 width: 260px;
 height: 300px;
}

form#quote h2 {
 font: normal 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
 color: #ffffff;
 text-decoration: none;
 margin-bottom: 20px;
}

form#query label {
 font-weight: bold;
 color: #ffffff;
 font-size: 12px;
 display: block;
 float: left;
 width: 100%;
}

form#query input, form#query textarea {
 background-color: #fff;
 border: none;
 color: #666;
 float: left;
 font: 12px Arial, Helvetica, sans-serif;
 margin: 5px 0 8px;
 padding: 8px;
 width: 240px;
}

form#query textarea {
 height: 20px;
}

form#quote input.btn {
width: auto;
border: none;
padding: 0;
margin-top: 0;
}

 

 

Also, any idea how to remove the horrible borders around the form and button?

 

Thanks!!

How big is the actual image you're using for the input button?

Have you got any other styles that may be overriding it?

 

Try defining some dimensions in

form#quote input.btn

Yea, adding some height and width would do the trick.

 

Isn't it easier to just use CSS to style your button and use that as a send button.

 

This link can probally help you out

 

Cheers

Edited May 18, 201214 yr by RowruffDesign

Thanks for the replies. The original size is 128x44 and the new size is 256x99. I've tried defining the height and width however this doesn't seem to solve the problem. You're right, I should be using CSS for the buttons, but very new to web design and still discovering.

 

Any more ideas? will have another play around in a bit

the website I gave in my last post would do the trick with the CSS

 

CSS is also a part that you should learn when you discover websites

 

Cheers

Had a look at the website, thank you very linking me there. Got exactly what I wanted.

Had a look at the website, thank you very linking me there. Got exactly what I wanted.

 

No problem For more problems just ask!

 

Cheers