homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Making 1 line txt, 1 field, 1 submit same width
got to be cross browser

 5:49 pm on Dec 13, 2011 (gmt 0)

I have a line of text:
Support Promo Code
A field:
size 17
And a submit button that reads:
Validate Promo Code

set as follow

How could I make the three elements same width
and pretty much cross-browser, knowing that I do not support IE6
needs to be Chrome, IE and FF.
I believe that making the button an image will take care of the submit button width but the field and text somehow render differently in each browser.
How could I resolve this quandary?



 5:02 pm on Dec 14, 2011 (gmt 0)

Nah you don't want to use input type="image". This presents all sorts of little problems . . . you can style the button as a background image, which allows you to use mouseover effects. Create a button image, let's say our standard size is 150 pixels, and the height of the button is 60 pixels. Create a 150 wide by 120 high image with the "normal" state on top, mouseover state on the bottom, like


Then you'd do **something** like this.

<form method="post" id="myform" action="youraction.php">
<label for="myfield">Support Promo Code</label>
<input type="text" id="myfield" name="myfield" value="<?php echo $value; ?>">
<p><input type="submit" id="submitButton" value="Get Promo Code"></p>

The CSS:

#myform,#myform p, #myform input, #myform label {
display: block;
width: 150px;
margin: 4px 0;

#submitButton {
/* This is what allows you to use an image on the button
without the text. Just don't try to apply text-align:center. :-)
height: 60px;
background:url(/images/submit-button.gif) top left no-repeat;

#submitButton:hover { background-position: bottom left; }

Note there's no reason to add "size", but you can - defaults to 25, I think. Add your /'s to the ends of input if you're using XHTML.


 5:42 pm on Dec 14, 2011 (gmt 0)

Most excellent, thanks
will test and report.


 7:34 pm on Dec 14, 2011 (gmt 0)

It works fine but for some reasons the width (l left undefined) of the text field is about 5 px wider than the img
Thanks again


 9:36 pm on Dec 14, 2011 (gmt 0)

Just styled the field width.


 6:21 pm on Dec 15, 2011 (gmt 0)

he he, pleased you got there henry0, and welcome across to css :)


 6:49 pm on Dec 15, 2011 (gmt 0)

That was though as the whole thing is governed by a relative position div, positioning the form above an img, like a Z index will do.
then seasoned with a php condition :)

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved