[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 372
  • Last Modified:

input type text and background image

Hello experts.
I need help to use a background image for my textfields.
I have a code with some problems.
1.The text is going "out" of the field on the right.
2.I need a padding at the bottom for the text but i can't do it.
Any help?
<form> 
<div align="left"><font size="1"> 
<input name="EmailAddress" type="text" id="EmailAddress" size="35" value="" style="background: transparent url(images/textbackground.gif) no-repeat;width:228px;height:29px; padding-left:10px;border:none;">
</font></div>
</form>

Open in new window

inputtext.gif
0
Panos
Asked:
Panos
  • 5
  • 2
4 Solutions
 
cfEngineersCommented:
maybe

padding-bottom:

0
 
PanosAuthor Commented:
I have allready tested this but it is not working
0
 
oaksongCommented:
1. Is interesting. Are you saying that the text is extending past the control border? That would be unusual.
2. If the text is being entered into a control (input), what does the padding add? Are you saying that not all the text is visible? That would suggest changing the font size (make it smaller) inside the control.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
PanosAuthor Commented:
Well it seems that the padding bottom IS working .I don't know why i did not noticed that from the beginning.
The problem with the text remains as you can see in the image i posted.
0
 
PanosAuthor Commented:
I found something here (http://www.developersnippets.com/2010/11/14/ie-issue-background-image-running-out-for-input-textbox/) that is working and solving problems with ie.
here is a working code:
<style type="text/css">
.inputWrapper {
background: url('images/images/textbackgroundsm.gif') no-repeat left top;
width:210px;
}
div.inputWrapper input.inputbox-without-issue{
color:#000;
font-size:13px;
width:204px;
background-color: transparent;
border: 0;
height: 26px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 8px;
}
</style>
<form>
<div class="inputWrapper">
<input type="text" class="inputbox-without-issue">
</div>
</form>

0
 
cfEngineersCommented:
margin-right:

see if that works
0
 
PanosAuthor Commented:
cfEngineers
margin-right is not working.Padding-right IS working but there is an issue with IE and one fix is on the link i posted above
0
 
PanosAuthor Commented:
Thank yo for your help.
I did not get any news so i will accept my post as a solution and award some points for your interest in my problem.
thank you
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now