1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Trouble Understanding CSS Behavior

Discussion in 'CSS' started by Warenth, Nov 1, 2007.

0
  1. #1
    Unrelevant: :p
    I'm currently working on an ASP.NET 2.0 business application where I'm making use of the AjaxControlToolkit's ModalPopupExtender. I recently ran into an issue while trying to make the application compatible with FireFox and was hoping someone here could help.

    Relevant: :)
    The following code recreates my behavior with some basic CSS, JavaScript, and HTML. The code contains "frames" where controls are placed. One control has a popup, to assist the user. This popup sits above everything in IE, as intended; in FF the popup shows above the frames that sit above it in the html, and below frames that sit below it in the html. I'm trying to understand why this is.

    Some Observations:
    • Removing the "overflow:auto;" from the "FrameShaded" css class causes everything to work. However, my float controls no longer get surrounded by the frame border and appear to no longer exist inside the frame.
    • Relocating the the pop-up's div to outside of a frame fixes everything, but is not an ideal situation, as I'd like my pop-up CompositeControl to be more versatile.
    • If I set the z-index of the frames to -1 and the position to relative, the pop-up works fine. However, the frame becomes unusable as no click events make it past whatever is on z-index 0. (html element?)

    If anyone could clarify whats going on that'd be great! :D

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Example Page</title>
    <style>
    .FrameShaded {
        background-color:#B6B6C1;
        border-color:#000000;
        border-style:double;
        color:#000000;
        margin-left:auto;
        margin-right:auto;
        overflow:auto;
        padding:6px;
    }
    
    #Popup
    {
        position: fixed; 
        background-color:Aqua; 
        z-index: 100001; 
        left: 331.5px; 
        top: 34.5px; 
        width:300px; 
        height:300px;
    }
    
    .SampleControl
    {
        float:left;
        height: 44px;
        width: 150px;
        background-color:white;
        border:solid 1px #777;
        margin-right: 15px;
    }
    </style>
    
    <script>
    function toggle()
    {
        var Popup = document.getElementById('Popup');
    
        if(Popup.style.display == 'none')
        {
            Popup.style.display = '';
        }
        else
        {
            Popup.style.display = 'none';
        }        
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        
    <!-- Frame 1 -->
    <div class="FrameShaded">
        <div class="SampleControl">A Control</div>
    </div>
        
    <br />
        
    <!-- Frame 2 -->
    <div class="FrameShaded">
        <input type="button" value="Popup" onclick="javascript:toggle();" />    
        <div id="Popup" style="display:none;">
            Test popup <br />
        </div>
    </div>    
        
    <br />
        
    <!-- Frame 3 -->
    <div class="FrameShaded">
        <div class="SampleControl">A Control</div>
    </div>
        
    </form>
</body>
</html>
    HTML:
     
    Warenth, Nov 1, 2007 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Well... first thing I'd do is stop calling them frames - because then other site developers are going to think you are talking about FRAMES (which is something ENTIRELY different from what you are doing here).

    As to the problem, I think it's related to your using position:fixed which screws up firefux's depth sorting something fierce. This is why most people use position:absolute instead.

    The problem COULD also be related to the positions themselves, since there's no such thing as half a pixel... (though firefux will try to actually claim there is?!?)

    Hmm. Ok, I think I see the 'real' issue - you have it inside the frameshaded div - in FF that changes the z-index to only work on 'sibling' elements - aka stuff inside the same container (which is a REALLY stupid behavior and ANOTHER reason FF fails Acid2) - solution? Move the #popup div to OUTSIDE the .frameShaded div so it's 'kin' to the next one. That seems to clear it up.
     
    deathshadow, Nov 2, 2007 IP
  3. Warenth

    Warenth Peon

    Messages:
    3
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I was hoping that wouldn't be an issue. I attempted to edit my post but it appears it's been to long (can't edit).

    The CSS used for the popup is created by the CustomControl server side, so it isn't something I'm aware I can edit.

    The pixels are just values I copy/pasted from the current values of the current site when I was making the example. The JS was updating the pixel coordinates to keep the popup center on my page.

    I see, well atleast I know a little more about why it's not functioning properly. Though, as I denoted in bullet two, I'd like to avoid moving the div as I want to keep my composite control versatile (placeable anywhere at anytime).

    Thanks for the info and reply deathshadow. I think I may have to just write my own popup control instead of using the AjaxToolkit one.
     
    Warenth, Nov 2, 2007 IP