textbox background problem (WIERD)

[web_master]

I have applied an image background to the search box using its ID.

Its funny but when i type inside the search box as the text reaches the end of the box it start moving the background image to the left but only in IE6 (which i can ignore) and IE7 (which i cannot), in all the other browsers it works perfectly.

Please run this code and see what happens. If nothing else its funny.
and if u know how to rectify this then plz lemme know.

Thanks!

HTML CODE

<form id="searchform">
	<fieldset class="search">
		<input type="text" id="box" />
		<button id="btn" title="Submit Search">Search</button>
	</fieldset>
</form>

CSS CODE
fieldset.search
{border: none; width: auto;}

.search input, .search button
{border: none; float: left;}

.search input#box
{position:relative; color: #fff; font-size: 1.2em; width: 190px; height: 33px; padding: 6px 0 0 4px; background: url('../images/search-bg.png') no-repeat; }

.search button#btn
{width: 73px; height: 33px; cursor: pointer; text-indent: -9999px; background: url('../images/search-btn-bg.png') no-repeat;}

[blocblue]

Try adding a position style to your background image:

background: url('../images/search-bg.png') no-repeat 0 0;

The 0 0 will fix the image position in the top left.

You could also try adding:

overflow: hidden;

To the search text box.

Let me know how you get on.

R.

[MidiMagic]

Why in the world do you have a background image in a text box?

Nothing would make me hit my BACK button faster than that. I can't read text that is on top of an image.

[ccube921]

Midi, if you want to preach about how everybody builds their websites wrong, get a website of your own (add the link to your sig
) and preach there. Here (I'd like to at least think) we answer people's questions, so long as they are reasonable, at least.

Web designers make suggestions to their clients, it looks like this man works for someone (the only thinkable reason I have for him ignoring IE6) and, unfortunately, you cant tell your client what to do.

[MidiMagic]

It;s not so much building a website "wrong" as it is building a website that a portion of the population can't use.

You can certainly tell you client that what he wants to do can't be done, if it is beyond the capabilities of the system. Making a footer at the bottom of any browser's window is one of those things that is impossible.

You can tell the client how what he wants to do is illegible to many people. That's what text on top of graphics becomes for many people. Given the facts, I don't think he would want to do that.

[ccube921]

Well, I do believe that the only browser it doesn't work on is IE 6. Due to that I feel that you should not make declarations on what the internet was made for, because the internet can do practically anything, and IMHO it is extremely small-minded to limit the internet to your views.

[MidiMagic]

The only browser what doesn't work on? Text on top of graphics, or a footer at the bottom of the browser window?

If it's making a footer, the W3C says that they made no way to size a page to the browser window on purpose. THEY are the ones who determine what the Internet is designed for.

Making a page that exactly fills a screen has the following factors working against it:

- Browsers don't agree on providing information about the window.
- The window belongs to the user, not the web programmer.
- There are too many different screen resolutions.
- A user can restore down the browser window, making it smaller.
- Resizing the user's preset browser window with a script makes users mad.
- Many users do not allow scripts.
- Programming necessary to make it work is a kludge, relies on browser quirks, or violates W3C standards.

[ccube921]

Ouch this one is bad, I was surfing for your aforementioned quote, that they said:
that they made no way to size a page to the browser window on purpose.

Well, I came across this page, Nice footer, ah?
Somehow I'm pretty sure that floating headers and footers was the purpose of: position:fixed;

[ccube921]

Sorry here's the page: http://www.w3.org/2007/uwa/

[MidiMagic]

Sorry here's the page: http://www.w3.org/2007/uwa/

They seem to have used a different doctype to be able to do that.

It looks like they are working on a DTD with a footer, but haven't released it for general use yet.

[ccube921]

It doesnt look like that to me, they used XHTML basic which quote on quote:
"is designed for Web clients that do not support the full set of XHTML features; for example, Web clients such as mobile phones, PDAs, pagers, and settop boxes. The document type is rich enough for content authoring."

Somehow I don't think that the only markup W3 would place support for a footer on, is a watered down XHTML meant for better support of portable devices?