|
ASP.NET server tags such as <asp:Panel> are rendered differently
by the server depending on the capabilities of the browser. ASP.NET categorizes
browsers as uplevel or downlevel. ASP.NET will render the <asp:Panel>
tag as an HTML <div> tag on uplevel browsers and as a <table>
tag on downlevel browsers.
As you can imagine, this can make CSS jockies very frustrated. For example,
most of the text on this page is wrapped in an <asp:Panel> tag. I have
also added a single style to the header:
<style>
td {
background-color: #FFFFCC;
padding: 10px;
}
</style>
As you can see, this page looks very different in Internet
Explorer (an "uplevel" browser) and FireFox (a "downlevel" browser)...
unless we can convince ASP.NET that FireFox is also an uplevel browser.
ASP.NET uses the <browserCaps> section of the machine.config or
web.config file to determine if a browser is uplevel or downlevel. Every
browser identifies itself with a request header that looks like this:
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; MS Web Services Client Protocol 1.1.4322.2032)
ASP.NET matches the header using a regular expression and then assigns
the browser capabilities. Unfortunately, the <browserCaps> that
ship with ASP.NET 1.1 do not recognize many modern and very capable
browsers including FireFox and Safari. Luckily, clever people have created
new <browserCaps> that you can add to your web.config file. These
new <browserCaps> will cause ASP.NET to render the server controls
in exactly the same way for both Internet Explorer, FireFox and Safari.
Use the links below to switch between a version of this page rendered with the
new <browserCaps> and without the new <browserCaps>. Use the View Source
option of your browser to examine the HTML that is generated. Notice that with the
new <browserCaps>, the <asp:Panel> is rendered as a <div> in
Internet Explorer, FireFox, and Safari. Without the new <browserCaps>, the
<asp:Panel> is rendered as a <table> in FireFox and Safari.
|