Main Menu
Knowledge Base
Product Registration
Log an Incident
Request a Feature
Search Incidents/Bug Reports


Search KB

Please note: In an effort to better serve you, we are in the process of restructuring DevCenter. In the process, we have moved many items that you may be used to finding in DevCenter over to the Main Site. If you are having trouble locating something, please try looking at the following places:

Knowledge Base Article: KB09986

HOWTO:Use CSS to work around the style tag limitation enforced in Internet Explorer


The information in this article applies to:
ASP.NET (v4.3.20043, 5.1.20051, 5.2.20052, 5.3.20053, 6.1.20061, 6.2.20062, 6.3.20063, 7.1.20071, 7.2.20072)
  Article Created: 
7/21/2006

Last Updated:
9/13/2007

Article Type
How To
  
Page Options
Average Rating:
6 out of 10

Rate this page
Print this page
E-mail this page
Add to Favorites

Summary

There is a limitation in Internet Explorer where style tags after the first 30 on a web page are not applied. Subsequently, some controls on a web page, NetAdvantage or not, can lose their formatting and style information. The way to work around this limitation is to use CSS to style the page.

Additional Information

An MSDN article containing more information regarding this limitation can be found using the following link:
http://support.microsoft.com/kb/q262161
Please note that the above article is neither authored nor maintained by Infragistics.

You can work around this style tag limitation by using a CSS class to store the style information for the entire page. Using a CSS class will also reduce the amount of HTML that is generated and will normally result in a small performance increase in the rendering process.

Step-By-Step Example

The following steps will show you how to create a simple CSS style sheet and apply it to a page which contains an UltraWebTab control.

1. Create a new CSS style sheet.
2. Add the following code to the CSS style sheet; save it as WebTab.css.

In CSS:

.DefaultTabStyle
{
    background-color:Maroon;
    border-width:2px;
    border-color:LightGrey;
    border-style:outset outset inset outset;
    cursor:hand;
    color:White;
}

.HoverTabStyle
{
    background-color:Silver;
    border-width:2px;
    border-color:LightGrey;
    border-style:outset outset inset outset;
    cursor:hand;
    color:White;
}

.DisabledTabStyle
{
    background-color:Gray;
    color:DarkGray;
    border-width:2px;
    border-color:LightGrey;
    border-style:outset outset inset outset;
    cursor:default;
    color:White;
}

.SelectedTabStyle
{
    background-color:Navy;
    border-width:2px 2px 0px 2px;
    border-color:LightGrey;
    border-style:outset;
    cursor:default;
    color:White;
}

3. Include the newly created CSS style sheet in the web page we wish to use it in (between the <Head></Head> tags):

In HTML:

<!-- Tab stylesheet --><LINK href="WebTab.css" type="text/css" rel="stylesheet">

4. Assign the CSS style sheet to the main control in the Properties window:
UltraWebTab.CssClass = WebTab.css

5. For each group assigned in the CSS sheet assign the relevant class to each style on the control, in the Properties window:
SelectTabStyle.CssClass = SelectedTabStyle
Repeat this for the remaining groups: DefaultTabStyle, SelectedTabStyle, HoverTabStyle

Review:
This article steps through the process of working around the style tag limitation in Internet Explorer by using CSS to style NetAdvantage controls. It also covers the basics of creating and using a CSS style sheet.

Samples

kbarticle_30styletagslimitation_cs.zip
 Example project using CSS to style a page with UltraWebTab controls.


kbarticle_30styletagslimitation_vb.zip
 Example project using CSS to style a page with UltraWebTab controls.



How would you rate the quality of this content?
Poor -----------------------------------------> Outstanding

Tell us why you rated the content this way. (optional)