Home/ Questions/Q 872315
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T10:46:03+00:00

Given the following markup <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML Strict//EN><META http-equiv=Content-Type content=text/html; charset=utf-8> <HTML

  • 0

Given the following 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>

The styles from the css .browser and .callout are not visible in IE6 unless I manually remove the position:relative style from subPopout. This div is generated automatically from a modal popup so I unfortunately can’t touch this style. It displays fine in FF. If I select the .browser div with my mouse, it displays when I unselect it!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Why are these styles not visible in IE6

    To be short, because it’s IE6!

    Can the box have a fixed height?

    If yes, a possible solution would be to set a fixed size to upSubPop element. For example, if you add:

    div#upSubPop{background:red;height:500px;}

    to your stylesheet, the blue borders are displayed correctly in IE6.

    Another workaround would be to set the height of <div class="browser" style="height:1px;" /> to 1 pixel. In this case, IE6 displays the element with appropriate height based on contents (so you will see the whole “Me afecta que digan que soy incapaz.” message. The problem is that the real browsers as FF will then display everything incorrectly (to be more precise, the message will overlap the bottom border). So in this case, you can use conditional CSS to ensure that your message block is displayed as required both in real browsers and in IE6.

    • 0