Why does this width: auto style work like an inline style in both browsers, but breaks when moved to an external style sheet in IE only?
I have an INPUT element that defaults to "width: 100%". This causes it to push other items next to it to the next line. To fix this temporarily, I added an inline style attribute for the element like this:
<input style="width: auto" ...>
which worked great. Now I go back to clean up the interim fixes and I move all styles from style attributes to external stylesheets. When I move this "width: auto" style to the stylesheet, it still looks fine in Firefox, but in IE it ignores it and defaults to "width: 100%" again, which removes the elements next to it again.
The IE web developer toolbar doesn't tell me where the styles are coming from, so it's hard to diagnose what's going on. My best guess is that there is something else in IE, but I don't know what it might be.
Edit: I swear I tried right clicking in the IE developer bar, but I guess not - when I do a "tracing style" to "width: 100%" in IE, I get a popup that just says "1. No match ", however in Firefox it showed 100% bleeding from the selector above the element above, which was something like" #outer foo bar INPUT "which also covered this INPUT. I mistakenly assumed that "#id" directly on the INPUT element would have a higher specificity than "#id foo bar INPUT", but I think browsers disagree with this. Anyway, it got to the root of my problem, so thanks for the comments. I wish there was a way to comment on the answer ...
source to share
Are you absolutely sure that your rules do not contradict each other or are in the wrong order (and of the same priority), thus overriding each other?
One thing you can try, besides John Sheikhan's suggestion, is to apply an id to an input element and then create a rule in your stylesheet that adds width: automatically to that element via an id selector.
Thus, the rule will have a higher priority and will most likely be applied. This will give you a better idea of where the problem is.
EDIT. Given your updates, the rule causing your grief works as intended (in terms of specifics). If you want to refer specifically to your element, you can still write a more specific rule with something like this:
#outer foo bar INPUT#id {
width:auto;
}
If you find yourself writing CSS like this, chances are you did something wrong and you might want to think about how you structured your CSS rules.
source to share