5 replies [Last post]
galastur
galastur's picture
Offline
newbie
Last seen: 8 years 33 weeks ago
Joined: 2013-02-26
Posts: 6
Points: 12

Hi All,

I am trying to display a input textbox with an overlapping image button on the right hand side. My problem is that when the page gets re-size, the image moves down. I know that my explanation is poor by you can see it in action here. Please use the spliter to expand collapsed the result area. I did not know how to upload my image, thus i have replace this with a blue button.

Any help will be greatly appreciate.

Thanks

galastur
galastur's picture
Offline
newbie
Last seen: 8 years 33 weeks ago
Joined: 2013-02-26
Posts: 6
Points: 12

I think it is going to be a

I think it is going to be a very long and painful day!...Sorry but i can't find the option to edit my original post so here is an updated version of the jsfiddle, I have removed some rubbish that was not relevant to the problem

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 31 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

If you positioned the TD that

If you positioned the TD that contains the textfield and button relative then you can position the button absolute from the TD.
See position

galastur
galastur's picture
Offline
newbie
Last seen: 8 years 33 weeks ago
Joined: 2013-02-26
Posts: 6
Points: 12

Thanks Tony!I have been

Thanks Tony!

I have been playing with the position features and following your instructions and i have achieved what i was looking for partially! Smile

I have a couple of questions:

a)I cannot understand why by setting the padding-right in the search box, this causes the search box to expand to the right, making this element even bigger than it is parent (table cell). I was playing with the padding of the search box in order to display the X (clear button) in IE, otherwise it displays right under my search button image..

b)...I guess this question comes due to the behavior i have seen in a), which i believe is due to some mistake i have done. Anyway, it will be good to know if there is a way of making the button absolute position in reference to the search box element, rather than its parent (table cell)...

Here is the updated jsfiddle

Many thanks

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 31 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

a) Try

a) Try box-sizing:border-box;
b) the easy answer is no. but you could try messing around with negative margins. and different position or display values.

galastur
galastur's picture
Offline
newbie
Last seen: 8 years 33 weeks ago
Joined: 2013-02-26
Posts: 6
Points: 12

Thanks Tony! And for all the

Thanks Tony!

And for all the newbies like me here is a link to a nice web site that explains box-sizing very clearly