Here is the given markup:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
div.apartBox
{
padding:12px;
background: #FFFFFF;
border: solid 1px #6182A3;
}
.browser
{
background: #fff;
border: solid 1px #0055E3;
border-top: solid 12px #0055E3;
border-bottom: solid 4px #7A99C5;
padding:10px 10px 8px 14px;
color: #333;
font: 0.8em/1 arial;
margin: 8px 20px;
}
.callout
{
background: #EEF2F0;
border: solid 1px #9CC7C0;
padding:8px;
}
</style>
</head>
<BODY>
<div class="apartBox" id="subPopout" style="Z-INDEX: 2; WIDTH: 400px; POSITION: relative">
<div id="upSubPop">
<div class="callout" id="subDetails">
<div class="browser">
<span id="txtExample">Me afecta que digan que soy incapaz.</span>
</div>
</div>
</div>
</div>
</BODY></HTML>
In IE6, I am facing an issue where the styles from the css .browser and .callout are not visible unless I manually remove the position:relative style from subPopout. This div is automatically generated from a modal popup, so unfortunately, I can't modify this style. The display is fine in FF. When I select the .browser div with my mouse, it displays correctly once I unselect it!