offsetWidth or CSS expression problem for IE6

Question

I need to set the width of textboxes as 80% of it's parent. So first I used

td input[type="text"]
{    
    width: 80%;
}

But it was not rendering properly if the input is the child of td. So, I used Css expressions

td input[type="text"]
{    
    width: expression(this.parentNode.offsetWidth*0.8);
}

It is working as I wanted in every browser except IE 6. Can anybody help me, where I am going wrong? I know that expressions are allowed in IE 6. So, is it the problem of using css expression or something to do offsetWidth.

Thanks in advance.

Answer 1

try rewriting as

* html td input[type="text"]
{    
    width: expression(this.parentNode.offsetWidth*0.8) !important;
}

however my own alternative method would be to detect ie version and if its 6 redirect to an error page with a angry face alerting to the user : Its 21st Century you moron! Update!

:)

Answer 2

Sorry I am writing answer for my own question, thought if somebody can get help from this.

I tried many things from CSS, nothing worked in IE 6. So, finally used jquery

if (jQuery.browser.msie && jQuery.browser.version.substring(0, 1) == "6") {
            $("td > input[type='text']").each(function() {
                $(this).css("width", $(this).parent().width() * 0.80);
            });
        }

It worked for me fine.

Answer 3

td input[type="text"]

Attribute selectors don't work in IE6. If you want to support this browser, add a class="text" and style on td input.text.

You shouldn't need anything complex with scripts, jQuery or expressions.

Answer 4

I believe this issue is caused by the ie 6 box model. The width and height include the padding and the borders. See here for more info.