Tips for solving CSS problems in IE7

Http://www.telerik.com/support/kb/article/b454K-tkk-b454T-a.aspx

Article Information
Article relates	RadControlsAll Versions
Created	Zarko, telerik
Last Modified	Nov. 14,200 6
Last modified	Zarko, telerik

 
Problem 
In connection with the CSS-application changes introduced in Internet Explorer 7 (IE7) A number of MERs are experiencing problems with control skins. the following tips are aimed to help you troubleshoot the most common problems. we use the listed techniques internally to solve the majority of the CSS-related support incidents, so most probably they will be applicable in your case as well.

Other useful resources:
• Msdn-"Cascading Style Sheet compatibility in Internet Explorer 7"
• Ieblog-"details on our CSS changes for IE7"

Solutions

1. CSS attributes starting with underscore are no longer applied in IE7
For example in the following CSS rule the background color wocould not be set to red in IE7:
<Style type = "text/CSS">
. Mydiv
{
_ Background-color: red;
}
</Style>
<Div class = "mydiv"> testcontent </div>

IE6:

IE7:

Note: The underscore declaration will work in IE7 if the page is in quirks mode. If it the page is XHTML 1 or 1.1 it willNotWork!

2. The "width" and "height" CSS attributes now work according to the W3C Specification
In IE6 they behave as if the "Min-width" or "Min-height" property is set. Take the following example:

<Style type = "text/CSS">
. Mydiv
{
Width: 20px;
Height: 20px;
Background-color: red;
}
</Style>
<Div class = "mydiv"> content <br/> </div>

InIE6The DIV wocould stretch to accommodate its content:

InIE7The content wowould leave its container:

To solve that problem (specify minimal width but don't clip the content) You should use "Min-width" and "Min-height ". however this wowould break IE6 support. the solution is to set "width" and "height" for IE6 and "Min-width" and "Min-height" for ie7. however IE7 must not see the "width" and "height ""attributes. here is how you can do it:

<Style type = "text/CSS">
. Mydiv
{
_ Width: 20px;/* visible to IE6 only */
_ Height: 20px;/* visible to IE6 only */
Min-width: 20px;/* visible to IE7 only */
Min-Height: 20px;/* visible to IE7 only */
}
</Style>
<Div class = "mydiv"> content <br/> </div>

And here is the final output:

IE6(The same as before)

IE7:

To achieve the exact same behavior in IE7 the container shoshould be floated to the left/right, I. e .:
<Style type = "text/CSS">
. Mydiv
{
Float: left;
Height: auto;
Width: auto;
}
</Style>

3. The "* html. myclass" Declaration for CSS classes is invalid and shocould not be rendered by a browser.
IE6, however, incorrectly interpreted this declaration as "HTML. myclass "and applied the CSS class to elements on the page. this is the basis of a widely used method for making browser-specific CSS classes-"* HTML. myclass "wocould be understood only by IE6 and no other browser. this bug is fixed in ie7. for example in the following CSS rule the background color wocould be set to red in IE6, but not in IE7:

<Style type = "text/CSS">
* Html. mydiv
{
Background-color: red;
}
</Style>
<Div class = "mydiv"> testcontent </div>

IE6:

IE7: