homepage Welcome to WebmasterWorld Guest from 107.22.78.233
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

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

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