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&#39;s supported and `auto` otherwise.




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.



I have been getting the following error when running a SQL to convert my data type value from `varchar` to `datetime`.

&gt; Msg 242, Level 16, State 3, Line 1
The conversion of a varchar data type to a datetime data type resulted in an out-of-range value.

I have checked the data and can&#39;t see anything to odd: Ran the following checks and all returning no results

    SELECT [Date] from table where [DATe] is null
    SELECT [Date] from table where [DATe] = &#39;&#39;
    SELECT [Date] from table where LEN([date])&gt; 10
    SELECT [Date] from table where LEN([date])&lt; 10
    SELECT top 100 [Date] , SUBSTRING([date],4,2) from [table where convert(int, SUBSTRING([date],4,2)) &lt; 1 or convert(int, SUBSTRING([date],4,2)) &gt; 12
    SELECT top 100 [Date] , SUBSTRING([date],1,2) from table where convert(int, SUBSTRING([date],4,2)) &lt; 1 or convert(int, SUBSTRING([date],4,2)) &gt; 31


Is there anything else worth looking at and maybe worth any pointers or help with this issue? Can&#39;t seem to get bottom of it.





SQL - The conversion of a varchar data type to a datetime data type resulted in an out-of-range value

I&#39;m not sure of the best approach for handling scoping of &quot;this&quot; in TypeScript.

Here&#39;s an example of a common pattern in the code I am converting over to TypeScript:

    class DemonstrateScopingProblems {
        private status = &quot;blah&quot;;
        public run() {
            alert(this.status);
        }
    }
    
    var thisTest = new DemonstrateScopingProblems();
    // works as expected, displays &quot;blah&quot;:
    thisTest.run(); 
    // doesn&#39;t work; this is scoped to be the document so this.status is undefined:
    $(document).ready(thisTest.run); 

Now, I could change the call to...

    $(document).ready(thisTest.run.bind(thisTest));

...which does work. But it&#39;s kinda horrible. It means that code can all compile and work fine in some circumstances, but if we forget to bind the scope it will break.

I would like a way to do it within the class, so that when using the class we don&#39;t need to worry about what &quot;this&quot; is scoped to.

Any suggestions?

# Update
Another approach that works is using the fat arrow:

    class DemonstrateScopingProblems {
        private status = &quot;blah&quot;;
    
        public run = () =&gt; {
            alert(this.status);
        }
    }
Is that a valid approach?


TypeScript &quot;this&quot; scoping issue when called in jquery callback

I have a graph plugin that inserts canvas and a legend `&lt;table&gt;` 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&#39;t like it**][1] &lt;sup&gt;check browser compatibility&lt;/sup&gt;

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?


  [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/initial?redirectlocale=en-US&amp;redirectslug=CSS/initial

use initial width for element not working in IE

I have a graph plugin that inserts canvas and a legend <code>&#x3C;table></code> to its container. In this plugin the <code>table</code> has no <code>width</code> 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 <code>table{ width: 100%}</code> from the CSS and rendering wrong.
I tried to use <code>width: initial;</code>, looks good on Chrome but <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/initial?redirectlocale=en-US&#x26;redirectslug=CSS/initial" target="_blank" rel="noopener noreferrer">IE doesn't like it</a> 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?

With Bootstrap class `table-striped`, every other row in my table has a background colour equal to `#F9F9F9`. How can I change this colour?

Bootstrap table striped: How do I change the stripe background colour?

I’ve got a `&lt;div&gt;` with padding. I‘ve set it to `height: 0`, and given it `overflow: hidden` and `box-sizing: border-box`.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    div {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      height: 0;
      overflow: hidden;
      padding: 40px;
      background: red;
      color: white;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div&gt;Hello!&lt;/div&gt;

&lt;!-- end snippet --&gt;

As I understand, this should make the `&lt;div&gt;` disappear.

However, it’s still visible (in Chrome 31 and Firefox 25 on my Mac). The `height` declaration doesn’t appear to be applying to the padding, despite the `box-sizing` declaration.

Is this expected behaviour? If so, why? [The MDN page on `box-sizing`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) doesn’t seem to mention this issue.

Nor, as far as I can tell, does [the spec](http://www.w3.org/TR/css3-ui/#box-sizing0) — it reads to me like both width and height should include padding when `box-sizing: border-box` (or indeed `padding-box`) are set.

Why doesn’t height: 0 hide my padded &lt;div&gt;, even with box-sizing: border-box?

Using transform property, z-index is canceled and appeared in the front.
(When commenting out -webkit-transform, z-index is properly working in below code)

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .test {
      width: 150px;
      height: 40px;
      margin: 30px;
      line-height: 40px;
      position: relative;
      background: white;
      -webkit-transform: rotate(10deg);
    }

    .test:after {
      width: 100px;
      height: 35px;
      content: &quot;&quot;;
      position: absolute;
      top: 0;
      right: 2px;
      -webkit-box-shadow: 0 5px 5px #999;
      /* Safari and Chrome */
      -webkit-transform: rotate(3deg);
      /* Safari and Chrome */
      transform: rotate(3deg);
      z-index: -1;
    }

&lt;!-- language: lang-html --&gt;

    &lt;html&gt;

    &lt;head&gt;
      &lt;title&gt;transform&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;transformtest.css&quot;&gt;
    &lt;/head&gt;

    &lt;body&gt;
      &lt;div class=&quot;test&quot;&gt;z-index is canceled.&lt;/div&gt;
    &lt;/body&gt;

    &lt;/html&gt;

&lt;!-- end snippet --&gt;

How do transform and z-index work together?

z-index is canceled by setting transform(rotate)

How can I center my login form ? I&#39;m using bootstrap column but it&#39;s not working.

Here is my code:

    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-md-4 col-md-offset-6&quot;&gt;
                &lt;h2&gt;Log in&lt;/h2&gt;   
                &lt;div&gt;
                    &lt;table&gt;
                        &lt;tr&gt;
                            &lt;td&gt;1&lt;/td&gt;
                            &lt;td&gt;1&lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                            &lt;td&gt;2&lt;/td&gt;
                            &lt;td&gt;2&lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                            &lt;td&gt;3&lt;/td&gt;
                            &lt;td&gt;3&lt;/td&gt;
                        &lt;/tr&gt;
                     &lt;/table&gt;
                 &lt;/div&gt; 
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

How to center form in bootstrap 3

[Here](http://jsfiddle.net/C7rSa/) is a fiddle.

    &lt;p&gt;foo &lt;a class=&quot;infolink&quot; href=&quot;#&quot;&gt;bar&lt;/a&gt; baz&lt;/p&gt;

and

    a.infolink::before
    {
        content: &#39;?&#39;;
        background: blue;
        color: white;
        width: 20ex;
        height: 20ex;
    }

The &#39;?&#39; appears but clearly does not have 20ex size. Why not? Tested in Firefox and Chrome.

width and height doesn&#39;t seem to work on :before pseudo-element

I know IE 11 has different user agent string than all other IE

     Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like Gecko

I have tried to detect IE 11 with answer specified for this question&#39;

https://stackoverflow.com/questions/18684099/jquery-fail-to-detect-ie-11

 Thats `!!navigator.userAgent.match(/Trident\/7\./)`

But I am getting error 
`Object not found and needs to be re-evaluated.`

Then I openede developer console in IE11 and tried to access some predefined javascript objects, I am still getting same error.

I have tried

`navigator.userAgent`

`window.navigator`

`console.log(&#39;test&#39;);`

Anyone have any idea about it ?
 

Internet Explorer 11 detection

I have Internet Explorer installed on my computer but needed to test compatibility mode of IE 7. After changing the document mode to IE 7, it set it as default and now I can&#39;t change it. The default is stuck on IE 7? 

![enter image description here][1]


  [1]: http://i.stack.imgur.com/eD4U8.png

How do I set Document mode default?

How to set IE11 Document mode to edge as default?

I read Chrome Frame closed last month, I thus tried to understand what it&#39;d mean for the X-UA tag and after 3 hours of research I still didn&#39;t find the answer I&#39;m looking for, my question is the following :

Is it still valid nowdays to use IE=edge,chrome=1 or should I stop at IE-edge from now on ? Or what would be the best pratice to do regarding X-UA, should it be avoided ? 

Is it still valid to use IE=edge,chrome=1?

I find it odd that `input type=&quot;date&quot;` is still not supported in Firefox after all of this time.    In fact, I don&#39;t think they added in much (if any) of the HTML 5 new types on an input element.  Not surprised that it is not supported in IE10.  So, my question is...

How to get `type=&quot;date&quot;` on an `input` element working without adding, yet another, .js file (namely `jQueryUI` DatePicker Widget) just to get a calendar/date for only IE and Firefox Browsers?  Is there something out there that can be applied somewhere (CDN perhaps?) that will make this functionality work by default in Firefox and/or IE Browsers??  Trying to target IE 8+ Browsers and for Firefox, doesn&#39;t matter, newest version (28.0) will be fine.

UPDATE: Firefox 57+ supports input type=date

How to get HTML 5 input type=&quot;date&quot; working in Firefox and/or IE 10

I don&#39;t want to do anything special or tricky with respect to Windows 8 and pinning, I just don&#39;t want to see the 404 Not Found messages as IE looks for `browserconfig.xml` scrolling by in my log files.

Is there a trivial `browserconfig.xml` file that I can put in my root that will satisfy IE and act as a good place holder should I decide to later add better support for Window 8?

What is a simple/minimal browserconfig.xml for a web site

When and how do browsers request the favicon.ico file? Do they always check for it in root, or do they read the content of the webpage first to see if the page specifies the location?

I have my favicon.ico path in /images
There is the following tag in each of my pages:

    &lt;link rel=&quot;shortcut icon&quot; href=&quot;images/favicon.ico&quot;&gt;

When I load the page in my browser, it seems to work (I can see the file), but I don&#39;t know whether they are making bad requests to my root folder first (where the file doesn&#39;t exist), and are later making a request to the link.

I want to minimze 404&#39;s and wasted bandwidth, by the browser making incorrect calls to my site.

EDIT: I&#39;m looking for some insight into how browsers work, and request this file, so my site structure is efficient.

Is putting your favicon.ico file in a non-root path a bad idea?

I am planning to move away from &quot;floaty&quot; layouts and use CSS flexbox for future projects. I was delighted to see that all major browsers in their current versions seem to support (in one way or another) flexbox.

I headed over to [&quot;Solved by Flexbox&quot;][1] to look at some examples. However the &quot;Sticky Footer&quot; example does not seem to work in Internet&amp;nbsp;Explorer&amp;nbsp;11. I played around a bit and got it to work by adding `display:flex` to the `&lt;html&gt;` and `width:100%` to the `&lt;body&gt;`

So my first question is: Can anybody explain that logic to me? I just fiddled around and it worked, but I don&#39;t quite understand *why* it worked that way...

Then there is the &quot;Media Object&quot; example that works in all browsers except for - you guessed it - Internet&amp;nbsp;Explorer. I fiddled around with that, too, but without any success.

My second question therefore is: Is there a &quot;clean&quot; possibility to get the &quot;Media Object&quot; example working in Internet&amp;nbsp;Explorer?

  [1]: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/


Flexbox and Internet Explorer 11 (display:flex in &lt;html&gt;?)

I&#39;m trying to style a file upload button to my personal preferences, but I couldn&#39;t find any really solid ways to do this without JS. I did find [two](https://stackoverflow.com/q/3226167/1256925) [other](https://stackoverflow.com/q/3606876/1256925) questions about this subject, but the answers there either involved JavaScript, or suggested [Quirksmode&#39;s approach](http://www.quirksmode.org/dom/inputfile.html).

My major issue with this Quirksmode&#39;s approach is that the file button will still have the browser-defined dimensions, so it won&#39;t automatically adjust to whatever&#39;s used as button that&#39;s placed below it. I&#39;ve made some code, based on it, but it will just take up the space the file button would normally take up, so it won&#39;t at all fill the parent div like I want it to.

**HTML:**

    &lt;div class=&quot;myLabel&quot;&gt;
        &lt;input type=&quot;file&quot;/&gt;
        &lt;span&gt;My Label&lt;/span&gt;
    &lt;/div&gt;

**CSS:**

    .myLabel {
        position: relative;
    }
    .myLabel input {
        position: absolute;
        z-index: 2;
        opacity: 0;
        width: 100%;
        height: 100%;
    }

[**This fiddle**](http://jsfiddle.net/KY42f/1/) demonstrates how this approach is quite flawed. In Chrome, clicking the `!!` below the second demo button will open the file dialog anyway, but also in all other browsers, the file button doesn&#39;t take up the correct areas of the button.

Is there any more solid way to style the file upload button, without any JavaScript, and preferably using as little &#39;hacky&#39; coding as possible (since hacking usually brings other problems along with it, such as the ones in the fiddle)?

Cross-browser custom styling for file upload button

`&lt;a ping=&quot;...&quot;&gt;` is a relatively new, relatively unknown attribute in HTML5&#39;s anchor element.

How cross-browser compliant is it?

I&#39;ve looked at online sources like MDN and http://caniuse.com, but found nothing that suggest browser support.

I want to know if it&#39;s a viable option for link tracking today in 2014.

How cross browser is the ping attribute of anchor elements?

How do you definitively detect whether or not the user has pressed the back button in the browser? 

How do you enforce the use of an in-page back button inside a single page web application using a `#URL` system? 

Why on earth don&#39;t browser back buttons fire their own events!?


How to Detect Browser Back Button event - Cross Browser

http://jsfiddle.net/XW9Se/

I&#39;ve set `width: 200px;` on the left `&lt;div&gt;` but if I view it with the browser inspector tool it appears that the real width is random or something. It keeps changing depending on the window size.

Why doesn&#39;t the width take effect?

**EDIT**: If I remove `width: 100%` the width stays fixed. But I need that so the `#main` div takes the remaining width :( Is there any way to have the sidebar @ fixed width and the other `&lt;div&gt;` fill the rest of the container width? `width: auto;` on `#main` doesn&#39;t work..

Width ignored on flexbox items

This is a hypothetical example:


&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    table, thead, tbody, tr { width: 100%; }
        table { table-layout: fixed }
        table &gt; thead &gt; tr &gt; th { width: auto; }

&lt;!-- language: lang-html --&gt;

    &lt;table&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;Column A&lt;/th&gt;
              &lt;th&gt;Column B&lt;/th&gt;
              &lt;th&gt;Column C&lt;/th&gt;
              &lt;th class=&quot;absorbing-column&quot;&gt;Column D&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr&gt;
              &lt;td&gt;Data A.1 lorem&lt;/td&gt;
              &lt;td&gt;Data B.1 ip&lt;/td&gt;
              &lt;td&gt;Data C.1 sum l&lt;/td&gt;
              &lt;td&gt;Data D.1&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;Data A.2 ipsum&lt;/td&gt;
              &lt;td&gt;Data B.2 lorem&lt;/td&gt;
              &lt;td&gt;Data C.2 some data&lt;/td&gt;
              &lt;td&gt;Data D.2 a long line of text that is long&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;Data A.3&lt;/td&gt;
              &lt;td&gt;Data B.3&lt;/td&gt;
              &lt;td&gt;Data C.3&lt;/td&gt;
              &lt;td&gt;Data D.3&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;

&lt;!-- end snippet --&gt;


I want to have every single column&#39;s width to fit its content size, and leave the rest of the space for the one column with the &quot;absorbing-column&quot; class, so that it looks like this:

    | HTML                                                                   | 100%
    | body                                                                   | 100%
    | table                                                                  | 100%
    |------------------------------------------------------------------------|
    | Column A | Column B       | Column C | Column D                        |
    |------------------------------------------------------------------------|
    | Column A | Column B lorem | Column C | Column D                        |
    | Column A | Column B       | Column C | Column D                        |
    | Column A | Column B       | Column C | Column D                        |
    |------------------------------------------------------------------------|

You see, Column B is a bit bigger than the rest due to the extra data in the first row, but Column D always uses up the remaining space.

I played around with max-width, min-width, auto, etc. and could not figure out how to make this work.

In other words, I want all columns to take whatever width they need and not more, and then I want Column D to use up all of the remaining space inside the 100% width table.

How to get the &lt;td&gt; in HTML tables to fit content, and let a specific &lt;td&gt; fill in the rest

We&#39;ve just started to implement the new google recaptcha as listed https://www.google.com/recaptcha/intro/index.html

However the new method seems to be contained within an iFrame rather than embedded into the page thus making applying CSS more difficult.

However we&#39;ve got our form which is 400px wide so would like to have the recaptcha the same width.

Currently it looks like, however we&#39;d like it the same with as the rest.

Does anybody know how to do this yet?

Thanks

![recaptcha layout example][1]


  [1]: http://i.stack.imgur.com/dI2Hu.png

Change New Google Recaptcha (v2) Width

I&#39;m following this article https://css-tricks.com/almanac/properties/w/width/ to try to understand how this rules work.

I have this example:

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    *{margin:0; padding:0}
    .box{
      background: lightgreen;
      margin: 0 auto;
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;box&quot;&gt;
      &lt;img src=&quot;https://tyrannyoftradition.files.wordpress.com/2012/05/cutest-kitten-hat-ever-13727-1238540322-17.jpg&quot; alt=&quot;&quot; /&gt;
      &lt;figure&gt;Yes, put some text here that is wider than the image above to try some new rules&lt;/figure&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

The article says that `fit-content` can be used to center a div of unknown width with `margin: x auto;`

But if you change `fit-content` for `max-content` in this example, this is working anyway and they seem to behave always in the same way.

Does anyone know what is the difference between this two rules and in which cases should I use one or the other?

What is the difference between CSS fit-content and max-content?

I have setup tabs as **UPDATE 29/05/2015** [this][1] post. Tabs take full width on my Nexus 4 mobile but on nexus 7 tablet it in center and not cover full screen width.

**Nexus 7 screenshot**
![Nexus7][2]
**Nexus 4 screenshot**
![Nexus 4][3]


  [1]: https://stackoverflow.com/questions/26540078/use-tab-with-new-toolbar-appcompat-v7-21
  [2]: https://i.stack.imgur.com/zZdVE.jpg
  [3]: https://i.stack.imgur.com/Zwv0O.jpg

Content Type	Original Author	Original Content on Stackoverflow
Question	Rikard	View Question on Stackoverflow
Solution 1 - Css	Mark Rhodes	View Answer on Stackoverflow
Solution 2 - Css	Rikard	View Answer on Stackoverflow

use initial width for element not working in IE

Css Problem Overview

Css Solutions

Solution 1 - Css

Solution 2 - Css

TypeScript "this" scoping issue when called in jquery callback

SQL - The conversion of a varchar data type to a datetime data type resulted in an out-of-range value

Attributions