7 replies to this topic

[Knordy]

Hi there,

[NEW SECOND PROBLEM]
After the first problem was solved (see below) a new problem arose. In the first problem the textbox had a fixed width. I needed to removed the fixed size so I could use the style on other similar parts. So what I did was as followed: in code the "img" comes first with a float:right. Then comes a "div" with an "input" inside. The "div" has a padding-right:50px. What happens now is that firefox does the right thing, but IE unfortunatelly fails. (Actually the right side of textbox needs to be much closer to the left side of the calendar, but that's just tweeking).

FIREFOX


IE7


Is there a solution for this?


[OLD FIRST SOLVED PROBLEM]
I have a problem with positioning an image next to a textbox. I'm building a site in asp.net and have a textbox control and an image control in a td. I gave the textbox a fixed size so the image would stand right next to it on the right side. So far so good.

Than I would like to align the image all the way to the right of the td (but still be on the same line as the textbox). So I put a "float: right" on the image. What happens now is that the image is indeed to the right of the td, but also on a new line. I tried some stuff, but I don't seem to get it on the same line as the textbox while being all the way to the right.

Some pictures:

The first step:


The step where it goes wrong:


As you can see the picture is on the next line, but I need it on the same line as the textbox. How can I accomplish this?
Thanks

Edited by Knordy, 22 July 2008 - 03:13 AM.

[Ghost]

Your second picture isn't loading for me, so I'm just going to guess what it looks like.

If you're floating the image, then my solution would be to put the image before the textarea input (the image will still be on the same line, and to the right of the text area, even if the order of the coding says otherwise.)

<img src='image.gif' alt='' style='float:right;' /><input type='text' />

[Knordy]

Yes, that did the trick Thank you a lot, such a simple solution. You saved my (fri)day

[Ghost]

No problem

[Knordy]

Added a second problem, see first post.

[rc69]

I would like to assume this is related to the three pixel gap issue from IE6, but you claim to be using IE7 (which should have resolved this). Regardless, IE has never been good at handling margin/padding.
Since things like this typically happen when something takes up too much space on a line with a floated element I would recommend simply decreasing the padding on the div around the input.

Edited by rc69, 22 July 2008 - 02:17 PM.

[Ghost]

Yeah, decreasing the padding should work.. it's most likely going to a new line because it's being forced by the padding.

[Knordy]

Thanks for the help, I tried something else now. The picture is about 16px and there is an additional padding-right on the td for 8px. I made the padding-right on the div for 25px and set the width of the input to 96% (this is the largest percentage I could use before it goes on the next line.