HTML Internet Explorer 6 overflow bug

Question

I have the following problem and I don't know how to solve it. I have an HTML table and one of the cells contains an input element. My problem is that in Firefox when I type something that overflows the input width the text will be hidden (which is the behaviour I want), but in Internet Explorer 6 the width of the input will be automatically expanded and the whole page format goes to hell because of it. I've been doing some googling and it all points out to the so called "overflow bug" in IE 6, yet I have absolutely no idea how to solve it.

I've tried setting overflow: hidden on both the input element and the containing cell (td) with no effect. I've also tried setting a max-width again with no success.

Any ideas?

IMPORTANT Due to the way the application I'm working on is programmed I can only modify the CSS of the element, not other HTML properties...

Answer 1

can you set max input characters on the box that may help solve it!

hold on try this css!

table {
  table-layout: fixed;
}

Answer 2

The first question would be : Do you really need to support IE6 ? Even microsoft stopped supporting it that a sign isn't it ??

http://www.w3schools.com/browsers/browsers_explorer.asp

You could try to put a DIV inside your TD. Set a fixed width in the style of the div and set its overflow to hidden. Then put your input box inside the div. This way even if the input box expands it should be hidden by the Div hidden overflow. It might not be pretty since the box will look cut at the end but it won't destroy your design.

I'm not sure it will work though since it's a bug it might not conform to the rest of the css either.

Answer 3

Use this:

input [type=text] {
    width: 100px; \\ That suits you best
    overflow: hidden;
    padding: 2px;
}