Jump to content


Text in input tag doesn't align correctly in IE & FF


7 replies to this topic

#1 Celox

    Young Padawan

  • Members
  • Pip
  • 17 posts

Posted 10 March 2006 - 09:23 AM

Hi,

**The align problem is fixed**


*This problem is not fixed:*

when I type more text in the field then the image's-width the text goes outside the image at the right side, I tried to change the width but this is the minimum width the image can handle, when i go 1 pixel below the image cuts of at the end.

This is the problem:
Posted Image

<input type="text" style="background: url(images/buttons_field.gif) top left no-repeat; border:0px #000; height:29px; color: #858585;  margin-top: 0px; padding-top:7px; padding-left:4px; margin-top:5px" size="16" name="q" value="&nbsp;Search.." onFocus="value='';" onBlur="value='&nbsp;Search..'"></input>

If anyone could help me with tihs problem, I really appreciate it.

Celox

Edited by Celox, 10 March 2006 - 04:03 PM.


#2 tiki

    Young Padawan

  • Members
  • Pip
  • 259 posts
  • Gender:Male
  • Location:California

Posted 11 March 2006 - 03:31 AM

Can we see it in action?

<input type="text" class="search" name="q" value="&nbsp;Search.." onFocus="value='';" onBlur="value='&nbsp;Search..'"></input>

.search {
background: #000000 url("images/buttons_field.gif") center left no-repeat;
border: 0px;
height: 29px;
color: #858585;
margin: 5px 0px 0px 0px;
padding:7px 0px 0px 4px; }

and you have margin-top twice, why?

#3 Celox

    Young Padawan

  • Members
  • Pip
  • 17 posts

Posted 11 March 2006 - 09:25 AM

I got the CSS to work now, it all works fine in good browsers but when I type alot of text in IE in the search box the text pushes the image away to the left, like in the example below.

problem in action (only in IE)

Edited by Celox, 11 March 2006 - 11:05 AM.


#4 Celox

    Young Padawan

  • Members
  • Pip
  • 17 posts

Posted 11 March 2006 - 11:12 AM

fixed this problem with:

background-attachment: fixed;

Topic can be closed.

Celox

#5 tiki

    Young Padawan

  • Members
  • Pip
  • 259 posts
  • Gender:Male
  • Location:California

Posted 11 March 2006 - 04:23 PM

Well it seems to still do it on http://www.celoxdesigns.com/

Just put padding-right: 15px; and padding-left: 5px;

#6 Celox

    Young Padawan

  • Members
  • Pip
  • 17 posts

Posted 12 March 2006 - 05:47 AM

Well it was for a new design, but I fixed the old one too now,
Only problem i still have that when i type alot of text in the box that in Internet explorer the text pushes the image away, is there a fix for this?
The background-attachment: fixed; only works for IE when i use it IE is fine, and i don't see ANY background image in other browsers like firefox and opera.

You can test this in IE at the following link at the login box celoxdesigns.com

Thanks in advance

Celox

Edited by Celox, 12 March 2006 - 07:39 AM.


#7 tiki

    Young Padawan

  • Members
  • Pip
  • 259 posts
  • Gender:Male
  • Location:California

Posted 12 March 2006 - 04:17 PM

Id suggest not using style="" on your input, make it a class and css.

#8 Celox

    Young Padawan

  • Members
  • Pip
  • 17 posts

Posted 13 March 2006 - 03:21 PM

I got that now tiki, i use the code you gave me.
Unfortanetly IE still screws up with that code.
I guess it's not possible with images in IE cause i see it on more sites not working like it should.





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users