Why does this "width: auto" style work as an inline style in both browsers but break when moved to an external stylesheet only in IE?

Question

I have an INPUT element that is defaulting to "width: 100%". This causes it to push other elements next to it down onto the next line. To fix this temporarily I added an inline style attribute on the element like this:

<input style="width: auto" ...>

which worked just fine. Now I'm going back to clean up the temporary fixes and I'm moving all the styles out of style attributes into external stylesheets. When I move this particular "width: auto" style into the stylesheet it still looks fine in Firefox, but in IE it ignores it and defaults to "width: 100%" again which blows out elements next to it again.

The IE web developer tool bar doesn't tell me where styles are coming from, so it's hard to diagnose what is going on. My best guess is that there is something else taking precedence in IE, but I don't know what it could be.

Edit: I swear I tried right-click in the IE developer bar but I guess not - when I do "trace style" on the "width: 100%" in IE I get a popup that just says "1. No match", however in Firefox it showed that the 100% was bleeding through from a selector on an above element that was something like "#outer foo bar INPUT" which covered this INPUT as well. I mistakenly assumed that an "#id" directly on the INPUT element would have a higher specificity than "#id foo bar INPUT" but I guess the browsers disagree about this. Either way, that got to the root of my problem, so thanks for the comments. I wish there was a way to promote a comment to an answer...

Answer 1

Are you absolutely sure that your rules are not conflicting or in the wrong order (and of the same precedence) thus canceling each other out?

One thing you can try besides John Sheehan's suggestion is to apply an ID to the input element, and then make a rule in your style sheet that adds width:auto to that element via ID selector.

That way the rule will have higher precedence and is more likely to be applied. This will give you a better idea of where the problem is.

EDIT: Considering your updates, the rule that was causing your grief is working as it is supposed to (as far as specificity is concerned). If you want to address your element specifically you can still write a rule with stronger specificity with something like this:

#outer foo bar INPUT#id {
  width:auto;
}

If you find yourself writing CSS like this, though, the odds are you have done something wrong and may want to re-think how you have structured your CSS rules.