"If I fix it for IE7, it's broken in IE6! And visa-versa!"
Some people out there recommend using conditional comments [http://www.positioniseverything.net/articles/cc-plus.html]. However, I have found a way to target IE6 and IE7 from within the CSS Stylesheet by taking advantage of one of IE6's weaknesses.
Note! Correct DOCTYPE Needed!
In order for the following method to work, the DOCTYPE needs to be set to
<!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">
What IE6 can't do (and how to take advantage of that!)
IE6 in the stricter DOCTYPE modes, does not support compound CSS selectors. By that I mean IE6 has trouble when you assign more than one CSS class inside a class attribute of a tag.
After you set your DOCTYPE in your page, add a <STYLE> tag that contains the following:
div.classOne.classTwo {
background-color: pink; /* Non IE Browsers*/
/background-color: aqua ; /* IE7 */
}
div.classTwo{
/background-color: yellow; /* IE6 */
}
Then in the BODY of your document, add the following and test it across different browsers:
<div class="classTwo classOne "> <p>In all non IE browsers, this background would be PINK.</p> <p>In IE7, this background would be AQUA.</p> <p>In IE6, this background color would be YELLOW.</p> </div>
- In all non IE browsers, this background would be PINK.
- In IE7, this background would be AQUA.
- In IE6, this background color would be YELLOW.
I'm not sure why it works exactly, but IE6 and IE7 will each pick up different styles set in the style sheet.
No comments:
Post a Comment