[thelist] Thorny CSS Issue - partial disappearing borders...

Anthony Baratta anthony at baratta.com
Thu Aug 17 11:58:27 CDT 2006


Howdy...

I'm stuck behind a firewall so I can't post code to a web site or images of what I'm seeing - but here's the description and a cut of the static HTML that I hope shows the problem in action. This is an IE only issue, this does not appear in Firefox. Since this a "big" corporate network all the users are on IE.

I have a container div that when it reaches 266 pixels in height, part of the boarders disappear. It's the same section on both sides of the container div. It might not appear on first redering but if you change the size of the browser, parts of the borders disappear. Hopefully someone here has seen and conquered this issue??

e.g.  < 266 pixels in height
-----------------
|                    |
|                    |
|                    |
|                    |
-----------------

>= 266 pixels in height
-----------------
|                    |
|                    |

|                    |
-----------------

I've fiddled around with the CSS (auto margins etc) and can not get this artifact to stop appaering. Here is a code example that I hope will show the problem. The container div having the border problems has the class SectionElements assigned to it. The "spacerLeft" div is the one that I tweak the height style to get the border problem to appear.

Code is munged replace [ & ] with appropriate angle brackets.

[!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"]
[html]
[head]
    [title]PLASTICS :: Life Cycle - New[/title]
    [meta http-equiv="imagetoolbar" content="no"]
    [meta http-equiv="content-type" content="text/html; charset=iso-8859-1"]
    [link rel="stylesheet" type="text/css" href="/PLASTIC/css/site.css"]
    [style type="text/css"]
        .PageContainer { display: block; width: 775px; border: solid 0px #000; }
        .MainContainer { display: block; width: 765px; border: solid 0px red; padding: 0px 10px 10px 10px; text-align: left; margin-left: auto; margin-right: auto;}
        .SectionBlueHeader
        { background: #5D6FA1; font-size: 14px; font-weight: bold; color: #FFF; height: 15px; text-align: center; margin: auto; padding-top: 5px;  padding-bottom: 5px;}
        .SectionHeader { display: block; background-color: #8CA8DD; font-size: 14px; color: #FFF; font-weight: bold; padding: 4px 4px 4px 4px; text-align: left; margin-left: auto; margin-right: auto;}
        .SectionElements { display: block; border: solid 1px #5E7AAF; margin-left: auto; margin-right: auto; padding: 10px 10px 10px 10px;}

        .dataGrid   { height: 260px; width: 680px; background-color: #F2F9E8; }
        .hdrCol1    { width: 50px; padding-left: 2px; padding-top: 12px;}
        .hdrCol2    { width: 250px; padding-top:12px;  }
        .hdrCol3    { width: 150px; padding-top:12px; }
        .hdrCol4    { width: 150px; padding-top:12px; }

        .hdrCol1, .hdrCol2, .hdrCol3, .hdrCol4, .hdrCol5, .hdrCol6, .hdrCol7, .hdrCol8
        { border: solid 0px; }

        .dataCol1   { width: 50px; padding-left: 2px; }
        .dataCol2   { width: 250px; }
        .dataCol3   { width: 150px; }
        .dataCol4   { width: 150px; }

        .dataCol1, .dataCol2, .dataCol3, .dataCol4, .dataCol5, .dataCol6, .dataCol7, .dataCol8, .dataCol9
        { border: solid 0px; }

        .FormColumn1, .FormColumn2 {width: 369px; float: left;}
        .FormColumn1, .FormColumn2 { border: solid 0px; }

        #ImageTabContainer { margin: 0px; padding: 0px; font: bold 12px arial, sans-serif; color: #B5B5B5; border: 0px solid #000; }

        #ImageTabs { margin: 0px; padding: 3px 2px 0px 2px; background: #5D6FA1; border-top: 1px solid #000; border-bottom: 1px solid #000; }

        #ImageTabs li { list-style: none; display: inline; margin: 0px -1px 0px -1px; padding: 0px 5px 0px 5px; border-right: 1px solid #FFF; }

        #ImageTabs li a { color: #FFF; margin: 0px 7px 0px 7px; text-decoration: none; }

        #ImageTabs li a:active, #ImageTabs li a:link, #ImageTabs li a:visited { }

        #ImageTabs li a:hover { color: #B5B5B5; }

        #ImageTabs li.activeTab { padding-top: 10px; background: #EDE9E1; border: 1px solid #000; border-bottom: 1px solid #EDE9E1; }

        #ImageTabs li a.currentLink { color: #000; }

        .ImageContainer { background: #EDE9E1; padding: 5px; border-right: 1px solid #000; border-bottom: 1px solid #000; border-left: 1px solid #000; border-top: 0px solid #000; }

        .TsysCardIDContainer { background: #FFF; padding: 5px; border-right: 1px solid #5E7AAF; border-bottom: 1px solid #5E7AAF; border-left: 1px solid #5E7AAF; border-top: 0px solid #000; }

        .TsysCardIDDataGrid
        { display: float; width: 345px; height: 100px; background: #FFF; font-size: 11px; color: #000; overflow: auto;}

        .TsysCardIDDataRowDiv
        { display: float; width: 323px; padding: 1px 3px 1px 3px; border: solid 0px;}

        .TsysDataDivider
        { border-top: 1px solid #5E7AAF; clear: both; display: float; }

        .TsysCardIDDataColumn1, .TsysCardIDDataColumn2, .TsysCardIDDataColumn3
        { float: left; overflow: hidden; text-align: left; padding-top: 2px; padding-bottom: 2px; height: 14px;}

        .TsysCardIDDataColumn1 { width: 45px; }
        .TsysCardIDDataColumn2 { width: 45px; }
        .TsysCardIDDataColumn3 { width: 100px; }

        .TsysCardIDDataColumn1, .TsysCardIDDataColumn2, .TsysCardIDDataColumn3
        { border: solid 0px; background: transparent; }

        #CardInfoTabContainer { margin: 0px; padding: 0px; font: bold 12px arial, sans-serif; color: #B5B5B5; border: 0px solid #000; }

        #CardInfoTabs { margin: 0px; padding: 3px 2px 0px 2px; background: #5D6FA1; border-top: 1px solid #000; border-bottom: 1px solid #000; }

        #CardInfoTabs li { list-style: none; display: inline; margin: 0px -1px 0px -1px; padding: 0px 5px 0px 5px; border-right: 1px solid #FFF; }

        #CardInfoTabs li a { color: #FFF; margin: 0px 7px 0px 7px; text-decoration: none; }

        #CardInfoTabs li a:active, #CardInfoTabs li a:link, #CardInfoTabs li a:visited { }

        #CardInfoTabs li a:hover { color: #B5B5B5; }

        #CardInfoTabs li.activeTab { padding-top: 10px; background: #EDE9E1; border: 1px solid #000; border-bottom: 1px solid #EDE9E1; }

        #CardInfoTabs li a.currentLink { color: #000; }

        .CardInfoContainer { background: #EDE9E1; padding: 5px; border-right: 1px solid #000; border-bottom: 1px solid #000; border-left: 1px solid #000; border-top: 0px solid #000; }

    [/style]
    [script language="javascript" type="text/javascript" src="/plastic/js/main.js"][/script]
    [script language="javascript" type="text/javascript"]
        function CardImage(sFace)
        {
            if (sFace == "Front")
            {
                ChangeCardImage("Front", "Back")
            } else {
                ChangeCardImage("Back", "Front")
            }
        }

        function ChangeCardImage(sActive, sInactive)
        {
            document.getElementById("Image" + sActive + "Tab").className = 'activeTab';
            document.getElementById("Image" + sInactive + "Tab").className = '';

            document.getElementById("Link" + sActive).className = 'currentLink';
            document.getElementById("Link" + sInactive).className = '';

            document.getElementById("CardImage" + sActive).style.display = 'inline';
            document.getElementById("CardImage" + sInactive).style.display = 'none';
        }
    [/script]
[/head]
[body]
[div class="PageContainer"]
    [div id="HtmlHeader"]
    [div id="AppLogo"]
        [img src="/plastic/images/logoleft.gif" width="145" height="53" border="0" /]
    [/div]
    [div id="SugarContainer"]
        [div id="SugarImage"]
            [img src="/sugar/images/logo_sugarStandard_v3.png" alt="Sugar Logo" width="66" height="53" /]
        [/div]
        [div id="SugarButton"]

            [a href="?forceLogout=true" id="linkLogout"][img id="btn_sugarLogout" src="/sugar/images/_btn_logout_63x8.gif" alt="Logout"  border="0" /][/a]
        [/div]
        [div id="SugarUserInfo"]
            [label id="SugarUserName"]Baratta, Anthony[/label]
            [img id="SugarDivider" src="/sugar/images/divider_gradient_150x3.gif" border="0" /]
            [label id="SugarUserFooter"]System Admin[/label]
        [/div]
    [/div]
    [br clear="all" /]
[/div]
    [div id="tabcontainer"]
        [ul id="maintablist"]
            [li][a href="/plastic/"]About[/a][/li]
            [li id="active"][a href="/plastic/lifecycle/" id="current"]Life Cycle[/a][/li]
            [li][a href="/plastic/imports/"]Imports[/a][/li]
            [li][span id="nolink"]Reports[/span][/li]
            [li][a href="/plastic/admin"]Admin[/a][/li]
        [/ul]
        [ul id="subtablist"]
            [li id="active"][a href="/plastic/PlasticNew.aspx" id="current"]New[/a][/li]
            [li][a href="/plastic/PlasticActive.aspx"]Active[/a][/li]
            [li][a href="/plastic/PlasticOrders.aspx"]Orders[/a][/li]
            [li][a href="/plastic/PlasticRetired.aspx"]Retired[/a][/li]
        [/ul]
    [/div]
    [div class="HeaderContainer"]
        [br /]
        [div style="text-align:right"]Copy -- Reorder -- Retire /OR/ Activate[/div]
        [br /]
    [/div]
    [!-- End HeaderContainer --]

    [div class="MainContainer"]
        [div class="SectionBlueHeader"][img class="fltRight" src="/plastic/images/corner_right.gif" /][img class="fltLeft" src="/plastic/images/corner_left.gif" align="left" /]New PLASTIC :: Card Detail[/div]
        [div class="SectionElements"]
            [div id="spacerLeft" style="float: left; height: 265px;"]&nbsp;[/div]

            [br clear="all"/][br clear="all"/]
        [/div]
        [!-- End SectionElements --]
    [/div]
    [!-- End MainContainer --]

    [br clear="all" /]
        [div class="footer"]
        [div class="footerDivider"][/div]
        [span class="footer1"]A Blah Blah Blah Engineering Application[/span][br /]
        [span class="footer2"]Confidential - For Authorized Blah Blah Blah Personnel Only[/span]
    [/div]
    [br clear="all" /]

[!-- End PageContainer --]
[/div]
[br clear="all" /]
[/body]
[/html]




More information about the thelist mailing list