1

We have some very unusual rendering that is occurring when we look at our programs in IE10. This doesn't happen with any other browser (Chrome, Firefox, iOS Safari), doesn't happen in IE9, and doesn't happen in IE10 when I set the document mode to IE9 standards.

Worse, it doesn't happen in the fiddle I'm experimenting with.

Here's how the bad version looks:

enter image description here

And here's how the good version looks using document mode IE9 standard:

enter image description here

Yes, I know I'm asking a question without giving any reproducible code, but while I desperately try to fix this (we have a release happening later today), I'm hoping someone can give me ideas where to look.

The immediately offending line of code, copied from IE's developer tools view is: 

<input class="generalTrackWidth" style="width: 167px;" type="text"/>

The class is actually used as a jquery selector, and has no css associated with it.

When I look at the style settings for the element, it doesn't show anything that would account for the gray box and white outer frame. Padding is 1px, Border is 2px, Margin is 0px. The input is part of a table, but otherwise doesn't have any containing divs that would render the gray border and extra white padding.

I've tried using CSS to tweak the ms-clear (see Internet Explorer 10 Windows 8 Remove Text Input and Password Action Icons), even though I didn't think that was the issue. It wasn't, but the X's that appear when the element has focus do look different as well.

Other confounding variables: this element is part of a table which is contained within a jQueryUI dialog. I made a test fiddle, but the error doesn't occur there.

Another point that may matter is that this is a GWT project. The code that has issues is pure JS/Html, but perhaps some part of GWT's special handling per-browser is responsible for this.

Any idea what I should be looking for?

Community
  • 1
  • 1
Scott Mermelstein
  • 15,174
  • 4
  • 48
  • 76
  • 3
    I think you're saying: "I don't like the default styling of HTML INPUT elements in the IE10 document mode." Have you tried setting the styling using the ms-value pseudo-element? http://msdn.microsoft.com/en-us/library/windows/apps/hh465820.aspx – EricLaw Sep 11 '13 at 19:15
  • @EricLaw Thanks for the input. You're actually right on track. The problem was that I didn't like the styling of the file input elements, and had already set ms-value and ms-browse. I had done that months ago, and just now discovered that doing that impacted the text input as well. I was about to write up my answer, but since you had the key part, if you want to write one, I'll be happy to accept it. – Scott Mermelstein Sep 11 '13 at 20:01
  • Feel free to write up the answer. I was basically shooting in the dark. :-) – EricLaw Sep 11 '13 at 22:17

1 Answers1

2

This came down to being a very beginner mistake.

A month ago, I looked at the <input type="file"> defaults for IE 10, realized they looked ugly, and so fixed them with the following code in my css file:

::-ms-value {
    margin: 5px;
    border-style: groove;
}

::-ms-browse {
    margin: 5px;
}

I thought that was explicit to only file input elements. As ErikLaw mentioned in the comments, -ms-value works on all inputs.

The fix was simple, I just had to make my selector for the file input be more specific. In my case, since my file input had a unique class to that, I just set the selector to be .uniqueClass::-ms-value and .uniqueClass::-ms-browse

This was really hard to debug because IE's developer tools didn't show the -ms-value (or -ms-browse) pseudoclasses. Consequently, I didn't think of looking in my css file.

Scott Mermelstein
  • 15,174
  • 4
  • 48
  • 76