@Html.Raw in MVC4 with IE8

Question

I'm working on a application who run on IE8 and one of is page use @Html.raw to render and exception when a model got some errors.

Here is a snipet of the code :

@Html.LabelFor(model => model.Fonds)
@Html.EditorOrDisplayFor(model => model.Fonds)
@Html.Raw(!Model.IsFondsValid ? "<span class=\"field-validation-error\"> </span>" : "")

And the Css :

span.field-validation-error
{
    background-image: url('Images/error.png');
    background-repeat: no-repeat;
    color: transparent;
    background-size: 16px 16px;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    content: " ";
    width:20px;
    overflow:hidden;
    display:inline-block;
    vertical-align: middle;
}

If a probleme occure on the property Fonds, the span will be display with its icone and as soon i want to do any modification to correct this error, IE8 show me a message box asking me to reload the page in a compatible mode.

Do you have any ideas why such behavior ?

Thank you.

Note : If i change the CSS file and put the display style for "display:block" IE does not ask me anymore for a reload of my page in a compatible mode. Strange behavior, that i don't understand.

I could, but I'm trying to make it work the way it has been implemented.I've alerady implemented a workaround. Thank for your solution. — anthony paroutaud, Nov 25 '13 at 22:00
[This question](http://stackoverflow.com/questions/9110646/ie8-display-inline-block-not-working) should help you. Try the answers first, but I think Boltclock's comment under the second answer is probably what you're looking for. — John H, Nov 26 '13 at 16:33

score 1 · Answer 1 · edited May 23 '17 at 12:28

Thank for your answer. Apparentli IE8 does not like very much inline-block, that was the cause of my problem. The Tips from @John Anastasio from that link IE8 display inline-block not working share by @John H solve my problem with IE8 and now itwork great. I'm using float in my css after the display inline-block.

span.field-validation-error
{
    background-image: url('Images/error.png');
    background-repeat: no-repeat;
    color: transparent;
    background-size: 16px 16px;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    content: " ";
    width:20px;
    overflow:hidden;
    display:inline-block;
    float : right;
    vertical-align: middle;
}

Thank again.

Glad it helped. When you can, you should mark this as the correct answer. You can do that by clicking the check mark to the left of your answer, under the vote counter. — John H, Nov 26 '13 at 19:28

score 0 · Answer 2 · answered Nov 25 '13 at 21:17

0

Your CSS is probably not related to the problem.

Try changing your code to this:

@Html.LabelFor(model => model.Fonds)
@Html.EditorOrDisplayFor(model => model.Fonds)
@(!Model.IsFondsValid
    ? Html.Raw("<span class=\"field-validation-error\"> </span>") 
    : Html.Raw(""))

answered Nov 25 '13 at 21:17

keeehlan

7,874
16
56
104

As a side note: I only put the code on separate lines for formatting. It doesn't affect your output. – keeehlan Nov 25 '13 at 21:18
Thenks for your answer but unfortunately i still got the same problem. – anthony paroutaud Nov 25 '13 at 21:50
The thing is, if i remove the class inside the span, the problem disappears. – anthony paroutaud Nov 25 '13 at 21:51

@Html.Raw in MVC4 with IE8

2 Answers2