Rounded corner textbox overflowing in IE

Hi,

I've been trying to get a rounded corner textbox working using CSS with a background image.

A sample can be found here: http://www.qecomm.com/header.html

It works fine in Firefox etc but in IE6 and 7 when you type too much text it overflows out of rounded textbox image. I've seen this method used on tutorial sites. But their textbox doesn't seem to overflow. It could possibly be the absolute positioning I'm using. I'm not sure. Hoping someone else has encountered this same problem.

Any help is much appreciated.

Quintin
qdhAsked:
Who is Participating?
 
Mark StegglesConnect With a Mentor Web DeveloperCommented:
Hello,

try putting the image on the containing div like:

#topbox {
      position:absolute;
      margin:0;
      left:730px;
      top:72px;
      width:144px;
      height:22px;
      background:url(http://www.qecomm.com/topbox.gif) no-repeat scroll left top;
   
}
.tb-rounded {
background-color:transparent;
    border:0;
      margin:0;
    height:15px;
    width:134px;
      padding: 4px 4px 4px 4px;      
}
0
 
qdhAuthor Commented:
It worked! Thanks heaps for that.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.