use initial width for element not working in IE

Question

I have a graph plugin that inserts canvas and a legend <table> to its container. In this plugin the table has no width defined and in my CSS there is a width for tables inside that container were my plugin gets inserted.

So, the new div is inheriting table{ width: 100%} from the CSS and rendering wrong.

I tried to use width: initial;, looks good on Chrome but IE doesn't like it ^{check browser compatibility}

I admit changing/forcing a inline CSS in the script/plugin since it has to work in any enviroment.

What is the best solution here?

@BuddhistBeast, didn't think about that! But tried that now and didn't work on Chrome either. — Rikard, Dec 29 '13 at 07:51

score 183 · Accepted Answer · answered Mar 11 '14 at 10:53

183

Like you said, generally width: auto will have a similar effect. Having the rules:

.my-selector {
    width: auto;
    width: initial;
}

Should cause it to use initial if it's supported and auto otherwise.

answered Mar 11 '14 at 10:53

Mark Rhodes

10,049
4
48
51

2

As a note, `initial` _is_ a valid property value (https://developer.mozilla.org/en-US/docs/Web/CSS/initial). _But_ (if you scroll down to "Browser compatibility" in the previous link), no IE version supports it. – gtramontina Jul 14 '16 at 23:32
5

this is known as a *fallback* and is a very common coding pattern in CSS. also, using `width: auto` will not only have a *similar* effect, but it will have the *exact same* effect, because `auto` is **defined to be the initial value** for the `width` property. – chharvey Oct 21 '16 at 02:49

Rikard · Answer 2 · 2013-12-29T08:26:25.373

6

Using width: auto; inline, inside the script solves the problem on Chrome, FIrefox and IE 11. Just not sure if there is a better way.

edited Dec 29 '13 at 08:26

answered Dec 29 '13 at 07:58

Rikard

7,485
11
55
92

use initial width for element not working in IE

2 Answers2

Linked