[Solved] IE 8 Compatibility View Rendering Problem

[Bruce]

The combobox does not display correctly in ie 8 compatibility view. The online demo has this problem:
http://demos.telerik.com/aspnet-mvc/combobox
The horizontal border lines do not display.

Are they any workarounds for this?

[Dimo]

Hi Bruce,

The problem is caused by the following CSS rule in telerik.common.css:

*+html .t-combobox .t-input { margin:-1px 0; }

We did some research and we found out that the Compatibility View modes of IE8 and IE9 are different. The above CSS rule works well in the real IE7 and the IE9's Compatibility mode, but not in IE8's compatibility mode. There is no way for us to distinguish between IE8 and IE9 compatibiltiy mode. So I have two questions for you:

1. In your opinion, which compatibility mode should we break - IE8's or IE9's ?
2. Why do you need compatibility view at all?


You can avoid the problem by editing the telerik.common.css file or using this CSS rule somewhere else:

*+html .t-combobox .t-input { margin:0 !important; }

This will create a double bottom border in the real IE7 and IE9's compatibility view mode. Assuming that the font-size of the ComboBox is 12px (which depends on you), you can use the following to fix it, but it will remain visible in IE8's compatibility view mode:

*+html .t-combobox .t-dropdown-wrap{height:21px;}


Regards,
Dimo
the Telerik team

[Bruce]

Thanks Dimo for your quick response. 

At this point with an understanding of the problem, I am inclined to leave it as it is. The application that I am working on is an intranet application and for other applications legacy reasons, they are using compatibility mode for everything. However, it makes sense to move forward and not worry about some kind of work around for this particular issue.

Thank you for investigating the issue.

Best Regards,
Bruce

[Jeff]

I had the same problem (it seemed to be with the windows 7 style).  I added an override for the telerik style sheet:

.t-combobox .t-input
{
    border-top-width: 1px;
    border-bottom-width: 1px;
}

It seems to have worked and looks OK on the browsers I have tested with, but Dimo's solution may be better as I'm sure he has more expertise here.  :-)   Just posting this as an option.   Thanks!