Quick Fix
The quick fix is this: do not use CSS styles that begin with an underscore (_) if you want them to be rendered in IE 6. By the way, the bug in IE has been fixed in version 7.
IE CSS Underscore Bug
I was sort of aware of IE's CSS underscore hack but I was doing my best to forget it, since it's a piece of information which is as mundane as it is common with IE, "yet another problem with IE". However, this issue must be related to that hideous hack.
This is a screenshot of what I wanted to achieve in IE 6:
Simple enough, so I put together this HTML which should be absolutely fine:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>IE 6 - styles starting with underscore</title>
<style type="text/css">
._mOuter {position:relative;top:-2px;left:20px;}
._mTabOn,._mTabOff {width:100px;min-width:100px; text-align:center;
font-size:14px;border:1px solid #000000;border-bottom-width:2px;
border-top-width:2px;}
._mTabOn {background-color:#79B0D4;border-top-color:#79B0D4;}
._mTabOff {background-color:#497c9d;}
._mTabLn {color:#000000;display:block;padding:4px;}
._mTabSp {width:1px;background-color:#000000;}
a._mTabLn:link {text-decoration:none;}
a._mTabLn:visited {text-decoration:none;}
a._mTabLn:active {text-decoration:none;}
a._mTabLn:hover {background-color:#5c90b3;text-decoration:none;}
</style>
</head><body>
<table cellspacing="0" cellpadding="0" border="0" class="_mOuter">
<tr>
<td class="_mTabSp"></td>
<td>
<div class="_mTabOn"><a href="#" class="_mTabLn">Tab 1</a></div>
</td>
<td>
<div class="_mTabOff"><a href="#" class="_mTabLn">Tab 2</a></div>
</td>
<td class="_mTabSp"></td>
</tr>
</table>
</body></html>
However IE 6 renders this:
Can you spot what's wrong? Most people would and I would argue that the difference is not acceptable for a public website, even though styles are subjective.
To fix it you simply change all the styles defined in the <style> tag that start with an underscore with styles that don't. Here is the working code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>IE 6 - styles starting with underscore</title>
<style type="text/css">
.XmOuter {position:relative;top:-2px;left:20px;}
.XmTabOn,.XmTabOff {width:100px;min-width:100px; text-align:center;
font-size:14px;border:1px solid #000000;border-bottom-width:2px;
border-top-width:2px;}
.XmTabOn {background-color:#79B0D4;border-top-color:#79B0D4;}
.XmTabOff {background-color:#497c9d;}
.XmTabLn {color:#000000;display:block;padding:4px;}
.XmTabSp {width:1px;background-color:#000000;}
a.XmTabLn:link {text-decoration:none;}
a.XmTabLn:visited {text-decoration:none;}
a.XmTabLn:active {text-decoration:none;}
a.XmTabLn:hover {background-color:#5c90b3;text-decoration:none;}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" class="XmOuter">
<tr>
<td class="XmTabSp"></td>
<td>
<div class="XmTabOn"><a href="#" class="XmTabLn">Tab 1</a></div>
</td>
<td>
<div class="XmTabOff"><a href="#" class="XmTabLn">Tab 2</a></div>
</td>
<td class="XmTabSp"></td>
</tr>
</table>
</body>
</html>
The quick fix is this: do not use CSS styles that begin with an underscore (_) if you want them to be rendered in IE 6. By the way, the bug in IE has been fixed in version 7.
IE CSS Underscore Bug
I was sort of aware of IE's CSS underscore hack but I was doing my best to forget it, since it's a piece of information which is as mundane as it is common with IE, "yet another problem with IE". However, this issue must be related to that hideous hack.
This is a screenshot of what I wanted to achieve in IE 6:
Simple enough, so I put together this HTML which should be absolutely fine:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>IE 6 - styles starting with underscore</title>
<style type="text/css">
._mOuter {position:relative;top:-2px;left:20px;}
._mTabOn,._mTabOff {width:100px;min-width:100px; text-align:center;
font-size:14px;border:1px solid #000000;border-bottom-width:2px;
border-top-width:2px;}
._mTabOn {background-color:#79B0D4;border-top-color:#79B0D4;}
._mTabOff {background-color:#497c9d;}
._mTabLn {color:#000000;display:block;padding:4px;}
._mTabSp {width:1px;background-color:#000000;}
a._mTabLn:link {text-decoration:none;}
a._mTabLn:visited {text-decoration:none;}
a._mTabLn:active {text-decoration:none;}
a._mTabLn:hover {background-color:#5c90b3;text-decoration:none;}
</style>
</head><body>
<table cellspacing="0" cellpadding="0" border="0" class="_mOuter">
<tr>
<td class="_mTabSp"></td>
<td>
<div class="_mTabOn"><a href="#" class="_mTabLn">Tab 1</a></div>
</td>
<td>
<div class="_mTabOff"><a href="#" class="_mTabLn">Tab 2</a></div>
</td>
<td class="_mTabSp"></td>
</tr>
</table>
</body></html>
However IE 6 renders this:
Can you spot what's wrong? Most people would and I would argue that the difference is not acceptable for a public website, even though styles are subjective.
To fix it you simply change all the styles defined in the <style> tag that start with an underscore with styles that don't. Here is the working code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>IE 6 - styles starting with underscore</title>
<style type="text/css">
.XmOuter {position:relative;top:-2px;left:20px;}
.XmTabOn,.XmTabOff {width:100px;min-width:100px; text-align:center;
font-size:14px;border:1px solid #000000;border-bottom-width:2px;
border-top-width:2px;}
.XmTabOn {background-color:#79B0D4;border-top-color:#79B0D4;}
.XmTabOff {background-color:#497c9d;}
.XmTabLn {color:#000000;display:block;padding:4px;}
.XmTabSp {width:1px;background-color:#000000;}
a.XmTabLn:link {text-decoration:none;}
a.XmTabLn:visited {text-decoration:none;}
a.XmTabLn:active {text-decoration:none;}
a.XmTabLn:hover {background-color:#5c90b3;text-decoration:none;}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" class="XmOuter">
<tr>
<td class="XmTabSp"></td>
<td>
<div class="XmTabOn"><a href="#" class="XmTabLn">Tab 1</a></div>
</td>
<td>
<div class="XmTabOff"><a href="#" class="XmTabLn">Tab 2</a></div>
</td>
<td class="XmTabSp"></td>
</tr>
</table>
</body>
</html>
Leave a comment