| Making 1 line txt, 1 field, 1 submit same width
got to be cross browser |
henry0
msg:4397490 | 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
aaaaaa
bbbbbb
cccccc
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?
|
rocknbil
msg:4397875 | 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
NORMAL
-----------
MOUSEOVER
Then you'd do **something** like this.
<form method="post" id="myform" action="youraction.php">
<p>
<label for="myfield">Support Promo Code</label>
<input type="text" id="myfield" name="myfield" value="<?php echo $value; ?>">
</p>
<p><input type="submit" id="submitButton" value="Get Promo Code"></p>
</form>
The CSS:
#myform,#myform p, #myform input, #myform label {
display: block;
width: 150px;
margin: 4px 0;
padding: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. :-)
*/
text-indent:-50000px;
border:none;
outline:none;
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.
|
henry0
msg:4397899 | 5:42 pm on Dec 14, 2011 (gmt 0) |
Most excellent, thanks
will test and report.
|
henry0
msg:4397945 | 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
|
henry0
msg:4397993 | 9:36 pm on Dec 14, 2011 (gmt 0) |
Done!
Just styled the field width.
|
alt131
msg:4398330 | 6:21 pm on Dec 15, 2011 (gmt 0) |
he he, pleased you got there henry0, and welcome across to css :)
|
henry0
msg:4398338 | 6:49 pm on Dec 15, 2011 (gmt 0) |
Thanks,
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 :)
|
|
|
