I am having trouble getting the Microsoft.Web.UI.WebControls TabStrip user control to render tabs in IE9.
Our app currently forces the browser document mode to be IE7 using an IIS header, as we have some old code / Silverlight stuff, where the code looked odd if we didn't. This was implemented when IE7 went to IE8 and has never been turned off. I am trying to remove this IIS header, so that our application will run in the latest browsers.
When I removed the IIS header and started testing, I noticed that our tabs were not showing up anymore in IE9 (they were showing up in Chrome and Firefox fine though). At first I thought it was CSS, but taking the CSS out didn't help. So I took out the code for the tabstrip and put it in a new blank project. They still did not show up in IE9.
I changed the document mode in IE9 to be Quirks mode, IE7, IE8 and the tabs showed up fine in IE. I changed the document mode to IE9 and the tabs are just not showing up. They are in the page when I "view source" on the page, but do not display on screen.
Any one come across this and solve it? Any ideas?
Code from my test project below. In IE, press F12 switch to IE7 and tabs show, switch to IE9 and tabs no longer show up.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" inherits="WebControlsTestApp.WebForm1" %>
<%@ Register TagPrefix="tabs" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<p>This is before the tabs</p>
<div id="trTabs" runat="server">
<tabs:TabStrip id="ctrlTabs2" autopostback="true" runat="server"
TabSelectedStyle="padding:4px 12px 4px 12px;background-color:red;color:blue;font-family:Calibri,'Lucinda Grande',Helvetica,Sans-Serif;font-size:14px;font-weight:bold;border-right:2px solid #d9d9d9;border-top:2px solid #d9d9d9;border-bottom:2px solid #ffffff;text-decoration:none;"
TabDefaultStyle="padding:4px 12px 4px 12px;background-color:red;color:blue;font-family:Calibri,'Lucinda Grande',Helvetica,Sans-Serif;font-size:14px;font-weight:bold;border-right:2px solid #d9d9d9;border-top:2px solid #d9d9d9;border-bottom:2px solid #d9d9d9;text-decoration:none;" >
<tabs:Tab Text="To Review" />
<tabs:Tab Text="Past Reviews" />
<tabs:Tab Text="I Own" />
</tabs:TabStrip>
</div>
<p>This is after the tabs</p>
</form>
</body>
</html>