textbox background problem (WIERD)

Reply

Join Date: Aug 2007
Posts: 26
Reputation: web_master is an unknown quantity at this point 
Solved Threads: 0
web_master's Avatar
web_master web_master is offline Offline
Light Poster

textbox background problem (WIERD)

 
0
  #1
Jan 20th, 2009
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
HTML and CSS Syntax (Toggle Plain Text)
  1. <form id="searchform">
  2. <fieldset class="search">
  3. <input type="text" id="box" />
  4. <button id="btn" title="Submit Search">Search</button>
  5. </fieldset>
  6. </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;}
Reply With Quote Quick reply to this message  
Join Date: Jan 2008
Posts: 141
Reputation: robothy is an unknown quantity at this point 
Solved Threads: 19
robothy robothy is offline Offline
Junior Poster

Re: textbox background problem (WIERD)

 
0
  #2
Jan 20th, 2009
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.
Reply With Quote Quick reply to this message  
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 165
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: textbox background problem (WIERD)

 
0
  #3
Jan 21st, 2009
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.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
Join Date: Oct 2008
Posts: 76
Reputation: ccube921 is an unknown quantity at this point 
Solved Threads: 6
ccube921 ccube921 is offline Offline
Junior Poster in Training

Re: textbox background problem (WIERD)

 
0
  #4
Jan 21st, 2009
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.
Last edited by ccube921; Jan 21st, 2009 at 8:36 pm.
If I have been helpful add to my reputation!
Reply With Quote Quick reply to this message  
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 165
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: textbox background problem (WIERD)

 
0
  #5
Jan 23rd, 2009
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.
Last edited by MidiMagic; Jan 23rd, 2009 at 11:02 pm.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
Join Date: Oct 2008
Posts: 76
Reputation: ccube921 is an unknown quantity at this point 
Solved Threads: 6
ccube921 ccube921 is offline Offline
Junior Poster in Training

Re: textbox background problem (WIERD)

 
0
  #6
Jan 24th, 2009
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.
Last edited by ccube921; Jan 24th, 2009 at 8:00 pm.
If I have been helpful add to my reputation!
Reply With Quote Quick reply to this message  
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 165
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: textbox background problem (WIERD)

 
0
  #7
Jan 25th, 2009
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.
Last edited by MidiMagic; Jan 25th, 2009 at 11:54 pm.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
Join Date: Oct 2008
Posts: 76
Reputation: ccube921 is an unknown quantity at this point 
Solved Threads: 6
ccube921 ccube921 is offline Offline
Junior Poster in Training

Re: textbox background problem (WIERD)

 
0
  #8
Jan 26th, 2009
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;
If I have been helpful add to my reputation!
Reply With Quote Quick reply to this message  
Join Date: Oct 2008
Posts: 76
Reputation: ccube921 is an unknown quantity at this point 
Solved Threads: 6
ccube921 ccube921 is offline Offline
Junior Poster in Training

Re: textbox background problem (WIERD)

 
0
  #9
Jan 26th, 2009
Sorry here's the page: http://www.w3.org/2007/uwa/
If I have been helpful add to my reputation!
Reply With Quote Quick reply to this message  
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 165
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: textbox background problem (WIERD)

 
0
  #10
Jan 27th, 2009
Originally Posted by ccube921 View Post
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.
Last edited by MidiMagic; Jan 27th, 2009 at 10:56 am.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
Reply

This thread is more than three months old.
Perhaps start a new thread instead?
Message:



Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC