Welcome to WebmasterWorld Guest from 23.20.241.155

Forum Moderators: not2easy

Message Too Old, No Replies

Making 1 line txt, 1 field, 1 submit same width

got to be cross browser

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

WebmasterWorld Senior Member henry0 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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?
5:02 pm on Dec 14, 2011 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.
5:42 pm on Dec 14, 2011 (gmt 0)

WebmasterWorld Senior Member henry0 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Most excellent, thanks
will test and report.
7:34 pm on Dec 14, 2011 (gmt 0)

WebmasterWorld Senior Member henry0 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

WebmasterWorld Senior Member henry0 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Done!
Just styled the field width.
6:21 pm on Dec 15, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



he he, pleased you got there henry0, and welcome across to css :)
6:49 pm on Dec 15, 2011 (gmt 0)

WebmasterWorld Senior Member henry0 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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 :)
 

Featured Threads

Hot Threads This Week

Hot Threads This Month