IE Issue: Background-image running out for input textbox

On 11.14.10, In CSS, HTML, Internet Explorer, by
Tags: , ,
Share
Advertisement
Post Pic

Many of us might have faced this issue especially in IE browsers, issue goes like this! when we apply a background-image property to a simple html textbox and when someone puts a very long text in the input text field, we see that the background image will be running-out with the text! its a strange one. The background-image property works fine in all major browsers but coming to IE browsers from old browsers to latest browsers we can see this issue. Its a quite interesting issue, but we do have a work-around for the same. Below screen-shots depicts how the scenario of this issue would be:

In the below screen-shot if you see, I have a input textbox applied some background image to it! it looks good when there is no text inside the textbox. But, as on when user puts a very long text in the input textbox, we see that the background image is running-out with the text! did you see that! – isn’t it strange and weird!

Demo | Download

Looks good without text:

Background Image - Looks good without text

Looks Strange and weird when long text is entered:

Is there any solution for this! Yes! we do have a work-around for the same. Below CSS code will solve this issue in IE browsers.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

div.inputWrapper{
	background: #d0ecf0 url('images/txt_bg.gif') no-repeat left top;
	width:460px;
}
 
div.inputWrapper input.inputbox-without-issue{
	border: 0px;
	padding:8px;
	height: 29px;
	width: 440px;
	background-color: transparent;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	font-size:25px;
}

Below is the HTML code:

1
2
3

<div class="inputWrapper">
	<input type="text" class="inputbox-without-issue" />
</div>

Demo | Download

Below is the entire HTML code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE Issue: Background-image running out for input textbox</title>
<style type="text/css">
.roundedcorner-container {
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	padding-top:33px;
	height:73px;
 
	border: solid 1px #69a4c2;
	background: #d0ecf0;
	background: -webkit-gradient(linear, left top, left bottom, from(#ebf8f9), to(#c0dde2));
	background: -moz-linear-gradient(top,  #ebf8f9,  #c0dde2);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebf8f9', endColorstr='#c0dde2');
}
 
input.inputbox-with-issue{
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	font-size:25px;
	width:440px;
	background:#d0ecf0 url('images/txt_bg.gif') no-repeat left top; 
	border: 0;
	padding:10px;
	height: 25px;
}
 
div.inputWrapper{
	background: #d0ecf0 url('images/txt_bg.gif') no-repeat left top;
	width:460px;
}
 
div.inputWrapper input.inputbox-without-issue{
	border: 0px;
	padding:8px;
	height: 29px;
	width: 440px;
	background-color: transparent;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	font-size:25px;
}
</style>
</head>
<body>
<h1>Background-Image Issue [View in IE Browser]:</h1>
<p>Below inputbox looks good, when there is no text. But when we enter a long-text, you can see background image of input box will run out of the box. If you could not believe! start entering a text in the below inputbox provided.</p>
<div class="roundedcorner-container">
	<input type="text" class="inputbox-with-issue" />
</div>
 
<h1>Work-around for Background-Image Issue [View in IE Browser]:</h1>
<p>Below is the work-around for the known issue of background image with input box.</p>
<div class="roundedcorner-container">
	<div class="inputWrapper">
		<input type="text" class="inputbox-without-issue" />
    </div>
</div>
</body>
</html>

Demo | Download

This article might help developers in resolving background image issue which occurs with input textbox. If let me know your suggestions through the comments box provided below.

Articles which you would like to read:

admin

Visit Authors Website  |  All Articles From This Author

You Might Like:

Advertisement

Please let us know your feedback about the article through the comments section below, we want to hear from you about our website. And your comment / advice may help us to serve you better in upcoming articles.

Thank You!
Vivekanand [Founder of DeveloperSnippets]

4 Responses

Я заметил, некоторые блоггеры любят провоцировать читателей, некоторые даже сами провокационные комменты оставляют сами у себя на блоге

vijayraj
11.14.10

yo, faced this sometime back.. cant recall wht i did.. but this is nice – tnx for the tip, mate

Как обычно просто супер обьёмная статья и как всегда дочитал до конца

Naiken
11.14.10

Finally, an issue that I am passionate about. I have looked for information of this caliber for the last several hours. Your site is greatly appreciated.

Leave Your Response

* Name, Email, Comment are Required

Write For Us

Daily Favorite Design & Development News


Warning: file_get_contents(http://twitter.com/favorites/developsnippets.json?page=) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.0 404 Not Found in /home/vivekanand/developersnippets.com/wp-content/themes/convergence/favorites_dev_widget.php on line 26

Warning: Invalid argument supplied for foreach() in /home/vivekanand/developersnippets.com/wp-content/themes/convergence/favorites_dev_widget.php on line 71
Daily Favorite Design & Development News