Home / ASP.NET Wiki / HTML / Web Controls / How to make server controls browser compatible

How to make server controls browser compatible

 Rate It (14)

Introduction

In modern web development, we need to check the browser compatibility for our web pages. This can include changing the css classes, style to fix the design issues. Using ASP.NET we can check the browser compatibility without writing a single line of code for the server controls.

Let's check out some code samples:

If we will define css classes like:
.IEStyle{color:Red;}
.FFStyle{color:Blue;}
.DefaultStyle{color:Black;}

Create a Label control in your page.
Label control:

<asp:Label ID="lblTest" runat="server" ie:CssClass="IEStyle"  
mozilla:CssClass="FFStyle" CssClass="DefaultStyle" ie:Text="You are in Internet  
explorer." mozilla:Text="You are in Firefox." Text="You are in other browser."  
/>

Just make page run in the different browser and see the changes as below:

Output:
IE  : You are in Internet explorer.
FF : You are in Firefox.
Others : You are in other browser.
 

You can try the same with the TextBox control.
TextBox Control:

<asp:TextBox ID="TestTextBox" runat="server" ie:Text="You are in Internet explorer."  
mozilla:Text="You are in Firefox." Text="You are in other browser." ie:CssClass="IEStyle"  
mozilla:CssClass="FFStyle" 
CssClass="DefaultStyle" />

 

 We can use these setting for all server controls.

And for loading different css files for different browsers you can use the following:

<link runat="server" href="~/Styles/Site.css" mozilla:href="~/MOZStyleSheet.css" ie:href="~/IEStyleSheet.css" rel="stylesheet" type="text/css" />

NOTE : There is no intellisense available for above in Visual Studio

Revision number 6, Saturday, June 04, 2011 12:27:12 AM by suresh.mekkattil

Comments

My questions 1)the size of aspx page will be more if we add more attributes to a control . 2)If i open aspx page in IE , whether 'mozilla:CssClass' attribute also got generated?

The size of the page will not be larger because not all attributes get generated. For eg: If you are running the page in IE, as you asked 'mozilla:CssClass' will not get generated. Only the class attribute will be there because there is no attribute called 'mozilla:CssClass' in HTML. You can open the source of your rendered page in the browser.

Great work. But what about the browser version compatibility. I have changed my browser to IE9 from IE7. One of my website menu is not generated in IE9. whenever I have click on compatibility View on IE9 website menu is working fine. Same issue with Firefox latest version. Not checked with other browser. I thought html rendering is different from older version to new version.

Can i placed different css files according to my web browsers dynamically as above?

Label in blue color not showing in Mozilla FireFox 4.0

if you want to add different css files for different purposes like print, you can see here how to do that http://wiki.asp.net/page.aspx/1664/user-freindly-print-page/

Yes, you can add different stylesheet for different browser like this link runat="server" href="~/Styles/Site.css" mozilla:href="~/MOZStyleSheet.css" ie:href="~/IEStyleSheet.css" rel="stylesheet" type="text/css" />

Nice Article..But is it compatible with different Browser versions..

Nice article. Id their any option for setting the specific style for each versions of the browsers? I mean to for IE6 one css and for IE8 another css etc...

Related Articles

ASP.NET Menu Compatibility with IE8

It seems to be very common that asp.net menu control is not to be properly displayed in IE8.I have developed a website which contains a master page and placed a menucontrol in master page.While running the project the menu is displaying in the content page

Rendering of dynamic items of Asp Menu control

Asp Menu controls lacks to render its items which are set with dynamic visibility in Internet Explorer 8. Microsoft has also confirmed at Microsoft Support that this particular issue resides in some of their products [1]. After a systematic testing Microsoft

Using ASP.NET MVC and OpenXML api to stream Excel files.

I’ve been heads down for the last several weeks Scrumming and it has been a while since I’ve updated my blog so I figured if I was going to keep your interest I should give you something really useful. We’ve been transitioning from web forms to ASP.NET MVC

Shortcuts

Table of Contents

Top Wiki Contributors

(last 30 days)

  1. abiruban (1)