Image next to Input positiong problems.

I am trying to make a DHTML combobox and am having trouble with the positioning of the image next to the textbox. The textbox will move down about 5 pixels from where it should be. If I take the image out, the textbox is back to where it should be. Any way to fix this? here is the code:

      <div id="cbo" style="width:200px;">
            <input id="txt" type="text" /><img src="_images/seldn.gif" />
            <div class="list">
                  <div>This is a list item.</div>
                  <div>This is a list item.</div>
                  <div>This is a list item.</div>
                  <div>This is a list item.</div>
                  <div>This is a list item.</div>
                  <div>This is a list item.</div>
                  <div>This is a list item.</div>
                  <div>This is a list item.</div>

#cbo input{background:url(../_images/txtbg.gif) repeat-x;border-left:solid 1px #EBEBE5;border-top:solid 1px #EBEBE5;
      border-right:solid 1px #B4B5A1;border-bottom:solid 1px #B4B5A1;color:#9B9C8B;margin:0px;width:0px;}
#cbo img{margin:0px;}
#cbo .list{background:#EBEBE5;border:solid 1px #B4B5A1;display:none;height:100px;overflow:auto;position:absolute;width:200px;top:20px;left:0px;}
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Add vertical alignment to your img as follows.

#cbo img
vertical-align: top;

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
awilinskAuthor Commented:
Thanks that worked. Why did I need to add that?
awilinskAuthor Commented:
I am having a problem in IE though. The textbox looks like it has a 1px margin on the top and bottom. It looks great in Firefox. Any ideas how to get rid of that imaginary margin?
Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

You needed the vertical alignment because by default everything is aligned along the bottom of the line, with the textbox coming down to the bottom of the image.

I can't see the problem with the margin so maybe you better post your entire source or a link to the page.
awilinskAuthor Commented:

I put a darker background for the containing DIV so it's easier to see. 1px of the background shows up above the textbox. This is not seen in FF. Any suggestions?
Try adding a wrapper/container to the input+image set and assign a line-height value:

<div style="line-height:30px;"><input id="txt" type="text" /><img src="_images/seldn.gif" /></div>

You have to play with the 30px; it might be 20px; 22px; or 50px; just what looks best.

awilinskAuthor Commented:
It didn't change. I think it may be IE saying that the textbox is 1px bigger than it actually shows. Oh well I can deal with the one pixel.  Thanks so much for the help.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.