Tag: internet-explorer-9
Nabin Nepal (Starx) canvas html5 internet-explorer internet-explorer-9 javascript
May 7, 2012

Are there any tips on getting HTML5 canvas to work in IE9?

Question by Richard

RichardRichard

I have been developing a game in the HTML5/Javascript new canvas feature, and all is going great, until I started to test it on Internet Explorer 9. So I will vaguely ask, are there any tips on getting the game to work fully in IE9?

Here’s what I know:

1) I must include

<!DOCTYPE html5>

else IE9 cannot possibly figure out that I indeed intend to use HTML5, and not an older version.

2) IE9 must be explicity told to run in IE9 mode, and not in IE8 mode, since clearly everyone who upgrades to IE9 intends to run it in IE8 mode by default.

3) .ttf files make IE9 unhappy. This is a problem, because the font files that DO work with IE9 (namely, .eof) seem to be disregarded by Firefox and other real browsers. Any tips of getting this fixed?

4) Finally, my biggest problem, after getting all else to work: only SOME of the graphics get drawn to the screen. In short, the game’s “engine” is split into several systems. Some, such as the particles (basically, just a collection of moving spheres) are draw, while others, such as all of the sprites, are not drawn, but the health bar is drawn. They all use the same exact draw methods, so I really can’t wrap my head around why some work and some don’t. There’s a lot of stuff to draw, but again, real browsers handle it just fine.

I know this is vague, but I’m just hoping somebody has some experience with this and can link me to a proper tutorial or else give me a hint as to how I can go about fixing this. It seems to be a project all its own just to get IE9 to run the code that works perfectly on Firefox, Safari, Chrome and Opera. Thanks, all help is very much appreciated.

Answer by Joseph the Dreamer

Joseph the DreamerJoseph the Dreamer

  1. <!DOCTYPE html> only tells the browser to use standards mode. HTML5 was built to fail gracefully incase the browser supports it. An example is the datepicker input which gracefully fails on all browsers (except Opera which supports it) as a text type input.

    The DOCTYPE is retained in HTML5 as a “mostly useless, but required” header only to trigger “standards mode” in common browsers.

    The doctype does not tell the browser what version of HTML. That’s the DTD’s job. The DTD just tells the browser what’s valid markup in your markup. It’s only used in validation to determine what HTML you use (HTML or XHTML; loose, transitional or strict). In HTML5’s case, there is no DTD because there’s no use for it.

  2. You can force IE to render in it’s latest mode or in chrome frame with a meta command, but it’s usually unnecessary. Declaring strict mode using the doctype as well as using proper markup is enough to do the job.

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  3. Paul Irish’s bulletproof @fontface syntax should put your fonts in an “all-in-one” syntax so that the same code can be loaded on all browsers.

  4. I don’t know about you but IE9+ has basic support and text support for canvas which is at par with the browsers of it’s age. IE even has it’s own testdrive page for versions 9 and up to show off their HTML5 support. There must be something wrong with your code.

Answer by Starx

StarxStarx

HTML5 is already supported my IE9. Here is an example of it. Be sure check the developers guide while doing this.

Nabin Nepal (Starx) css css3 fieldset internet-explorer-9
April 25, 2012

Input fieldset with border-radius and shadow not showing all text in IE9

Question by Hommer Smith

Hommer SmithHommer Smith

I have the following css:

fieldset ul li input {
  width: 96%;
  margin: 0;
  padding: 6px;
  font-size: 13px;
  border: 1px solid #CCC;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -moz-box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
  -webkit-box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
  box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
}

Which is working under Firefox and Chrome. However in IE9, when I insert some text, I can’t see it completely. As you can see is hidden in the half of it:

IE9 fieldset input problem

Answer by Starx

StarxStarx

Either increase the height or the padding.

input {
    padding: 10px;
}
Nabin Nepal (Starx) css google-chrome html html5 internet-explorer-9
June 27, 2011

How can I get inline-block to render consistently when applied to table cells?

Question by Nathan Bell

Nathan BellNathan Bell

I have a simple HTML table that I want to render consistently across every modern browser (IE9, latest FF, Chrome, Safari). If I apply widths and “display: inline-block” to just the table cells, FireFox 4 and Chrome will allow the table cells to ‘wrap’ into a second row, as if they were just regular inline-block elements. In IE9, however, the cells are treated like classic table cells, and do not maintain their widths and are scrunched into one row.

Full example of the code is here: http://jsbin.com/ujeber/6

Is there a CSS property that can be applied to the table, tr, or td elements to get IE9, Chrome and FireFox 4 to behave in the same way as each other? If not, which of these browsers is following the standards correctly, or are the standards ambiguous in this case?

Markup:

<table>
  <tr>
    <td>Test1</td>
    <td>Test2</td>
    <td>Test3</td>
    <td>Test4</td>
  </tr>
</table>

Style:

  td {
    width:300px;
    display:inline-block;
  }

  table {
    width: 650px;  
  }

I know that this isn’t the typical/suggested way to use the table element. I am asking in the context of the expected behavior of rendering engines. I’m not looking for answers related to choosing semantically appropriate tags.

Answer by thirtydot

thirtydotthirtydot

I can’t find a way to make IE9 give your desired result with display: inline-block.

Unless your actual use case is somehow different than your simplified test case, you should just be able to switch to float: left on td, which does work:

http://jsbin.com/ujeber/7

floats and inline-block are often interchangeable. But, they both have different strengths and weaknesses. With floats, you have to clear/contain them. With inline-block, you have to deal with extra gaps (commonly fixed by removing whitespace in HTML), and it doesn’t work in IE6/7 without further tricks.

Answer by Starx

StarxStarx

No, there isn’t any CSS properties, to wrap the cells.
P.s. AFAIK

...

Please fill the form - I will response as fast as I can!