Solved

align input field with image button

Posted on 2006-07-19
5
2,403 Views
Last Modified: 2012-06-27
can someone take a look at

http://www.innergatedesigns.com/work/inputimage/inputimg.php

<div><input type="text" src="buynow.gif" name="button" /><img src="buynow.gif" /></div>

and let me know how i can get these to align across IE and FF.

Thanks.
0
Comment
Question by:redcable
  • 3
5 Comments
 
LVL 2

Expert Comment

by:bowen18
Comment Utility
This should do it:

<div><input src="buynow.gif" name="button" type="text"><img src="buynow.gif" align="top"></div>
0
 
LVL 2

Expert Comment

by:bowen18
Comment Utility
Also, I realize "align" is deprecated, but the DTD being used is xhtml transitional.
0
 

Author Comment

by:redcable
Comment Utility
just realized the button i was working on is actully an input image

<div><input align="top" type="text" src="buynow.gif" name="button" /><input type="image" src="buynow.gif" /></div>

updated


http://www.innergatedesigns.com/work/inputimage/inputimg.php

any thoughts on how to correct this? align="top" didnt seem to work.

thanks again.
0
 
LVL 2

Assisted Solution

by:bowen18
bowen18 earned 100 total points
Comment Utility
Ah, that does change things a bit:

<div><input src="buynow.gif" name="button" type="text" /><input src="buynow.gif" type="image" style="vertical-align:top" /></div>
0
 
LVL 16

Accepted Solution

by:
sam85281 earned 250 total points
Comment Utility
You don't want to align it top becayse the input has padding.  Also don't need to put all the src stuff in your text field

Use:

<input name="QUANITY OR WHATEVER" type="text" style='width:30px;' /><input type='button' src="buynow.gif" type="image" align='absmiddle' />

-Sam
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now