Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation PIE.htc hidden DIV IE background issues

    I am using a HideContent, ShowContent JS to reveal a div tag (with rounded corners). Shows up and works great in all browsers but IE. Content does show - but the background and the borders do not. If I remove the PIE.htc file, background and borders do show up, but not styled correctly.

    Please help - I just need the div to show correctly and I can move on with my sad little life.

    CSS:
    .rounded_modemdetails{
    z-index: 999;
    background-color: #fafafa;
    background: #fafafa;
    position: absolute;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    behavior: url(PIE.htc);
    background: #fafafa;
    border: 1px solid #f0f0f0;
    padding: 10px;
    width: 315px;

    JS:
    <script type="text/javascript" language="JavaScript"><!--
    function HideContent(d) {
    if(d.length < 1) { return; }
    document.getElementById(d).style.display = "none";
    }
    function ShowContent(d) {
    if(d.length < 1) { return; }
    document.getElementById(d).style.display = "block";
    }
    function ReverseContentDisplay(d) {
    if(d.length < 1) { return; }
    if(document.getElementById(d).style.display == "none")
    { document.getElementById(d).style.display = "block"; }
    else { document.getElementById(d).style.display = "none"; }
    }
    //--></script>

    Html:
    <div class="rounded_modemdetails" id="modemdetails" style="height:345px; display:none; clear:both;">
    <p class="prod_subhead_features">Modem Details: <a href="javascript:HideContent('modemdetails')">Close</a></p>
    <table width="100%" border="0" cellspacing="0" cellpadding="10" style="margin-top:-15px">
    <p class="prod_body_features" >Content Here</p>
    </div>

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    This is because IE generates a new, separate “element” (made of proprietary and deprecated VML) and places it behind the content to make it look like a styled box. Modifying the actual content element with JS doesn’t modify the additional VML. I’m not sure if it’s possible to modify the VML element with JS, too, but after all, it’s easier to not change elements that have the HTC behavior but rather a wrapper without such.

  • Users who have thanked VIPStephan for this post:

    Dooh (06-10-2011)

  • #3
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    You are a hero!

    I took your advice and put the content in a DIV and and left the background as is. Adjusted the JS to hide/show content. Worked like a charm.

    The only negative side is that I wasted a day trying to figure it out myself.

    Now go put your cape on and fly around making whooshing noises!

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Dooh View Post
    I took your advice and put the content in a DIV and and left the background as is. Adjusted the JS to hide/show content. Worked like a charm.

    The only negative side is that I wasted a day trying to figure it out myself.

    Now go put your cape on and fly around making whooshing noises!
    Well a negative can be a positive if you learn something from it...
    Teed


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •