Dec 042012
 

An important gotcha of some HTML5 semantic web stuff:

An input of type=”number” attribute on an input and discovered that Safari 5 and IE would re-format the number the way you learned to in grade school if your number is greater than 999 (i.e., adding commas between thousands). Yes, the commas actually get submitted when you submit your form, making your back-end receive those thousand-separated numbers (which is probably not what you want).

<input type=”number”></input>

If that’s not your desired effect, stick to text and use a pattern attribute (along with required) to validate with regexp. Something like this does the trick:

<input type=”text” required= pattern=”[0-9]*”>
Oct 192011
 

There is an IE 6 / IE 7 (only) bug that causes the content that should be scrolling to spill out over the rest of the page. (The scroll bar appears, but the part of the scrolling content that should be “hidden” is spilling out onto the rest of the page where it shouldn’t be visible. Other than the overflow of the scrolled area being visible, the scroll works correctly.)

For example:

<div id=”xyz”>
 … lots of content here …
</div>

In your scripts (probably inside a $(document).ready() call):

$(“#xyz”).jScrollPane();

This is because overflow: hidden has a known issue with IE6/IE7 if the block (div) that is supposed to be overflow: hidden (as is the case with the scrolling div) but isn’t position: relative. The fix for this is to give position: relative to the div you are trying to make scroll

<div id=”xyz” style=”position: relative”>
 … lots of content here …
</div>

See these links related to the overflow: hidden issue in IE6/IE7:

stackoverflow.com

mt-olympus.com

Sep 182011
 

In IE7 to use the developer tools you must install IE Developer Toolbar, then to open it go here:

Tools (on the right-hand side) > Toolbars > Explorer Bar > IE Developer Tools

(This is so hard to find I had to make a picture)

In IE7 and IE8, you may wish to take important note of two buttons on the developer tools window.

The first button will clear the browser’s cache (IE will normally hang onto js, css, and image resources unless you explicitly do this). The second is the Refresh button on the Dev Tools window itself – not to be confused with the main browser window’s reload button which will reload the page.

Unlike some of the other browsers’ comparable views, IE does not automatically update the HTML you see in the Dev Tools window when your page content has been changed by AJAX or Javascript. For this reason, you should use this button (on the Dev tools window) to explicitly get any updated content after the DOM has been changed by your Javascript.

 Posted by at 3:51 pm  Tagged with: ,