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.
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
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.
Thanks Tony!I have been
I have been playing with the position features and following your instructions and i have achieved what i was looking for partially!
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
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.