SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    Umm. PHP Guru....Naaaah jaswinder_rana's Avatar
    Join Date
    Jul 2004
    Location
    canada
    Posts
    3,193
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text box overriding div

    Hi

    I have a <div> . It's hidden when page loads. Then when I enter some text in a text box, i fire an event which gets results from a page (AJAX) and displays underneath the div.

    I then change the property display to "block".

    It's fine in FireFox. But, in IE it is displayed UNDERNEATH form elements (textbox, dropdown etc.).

    What property do I have to change so it shows on TOP of everything??
    HTML Code:
    <div id="serial_results" class="ajaxdropdown"></div>
    Code:
    div.ajaxdropdown
    {
    	display: none;
    	position: absolute;
    	background-color: #ffffff;
    	border: 1px solid #000000;
    	width:200px;
    }
    EDIT: it's the same with my CSS suckerfish drop down menu.
    ---------------------------
    Errors = Improved Programming.
    My Site

  2. #2
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In IE, windowed controls get rendered on top of HTML elements. You can get around this by using an iframe, because it is a bit of an exception. iframes are windowed, but IE lets you put divs on top of them. So, if you position an iframe directly behind your div, so it is exactly the same size and position, then this should hide the form controls and let you display the menu fine.
    Hello World

  3. #3
    Umm. PHP Guru....Naaaah jaswinder_rana's Avatar
    Join Date
    Jul 2004
    Location
    canada
    Posts
    3,193
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh. and here i was looking for a nice CSS tweak to do it easily?
    So, i keep iframe hidden too? and display it along with <div>?

    But, it does the same with the CSS Menu?

    and I noticed it only does this when there are drop downs.
    ---------------------------
    Errors = Improved Programming.
    My Site

  4. #4
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, I thought the code below would show the problem, but it looks fine testing in IE7. Is it correct in your browser too?

    Code:
    <style>
    
    div {
      background: yellow;
      border: 1px solid red;
    
      position: absolute;
      top: 10px;
      left: 30px;
      width: 100px;
      height: 100px;
      z-index: 3;
    }
    
    select {
      position: absolute;
      top: 30px;
      left: 20px;
      width: 200px;
      z-index: 1;
    }
    
    iframe {
      position: absolute;
      top: 5px;
      left: 40px;
      width: 90px;
      height: 110px;
    }
    
    </style> 
    
    <select><option></option></select>
    
    <div></div>
    
    <iframe src="about:blank"></iframe>
    Douglas
    Hello World

  5. #5
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's because IE7 fixes the problem with select elements appearing above everything else

    Oh, and beware of using <iframe src="about:blank"> - that doesn't work in HTTPS environments. The user will see something along the lines of "This page contains both secure and insecure content. Do you wish to show in the insecure content?" - about:blank and error messages aren't served over https. The answer is to use a relative link to a page, e.g. <iframe src="empty.htm">
    Olly Hodgson
    thinkdrastic.net

  6. #6
    Umm. PHP Guru....Naaaah jaswinder_rana's Avatar
    Join Date
    Jul 2004
    Location
    canada
    Posts
    3,193
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But the problem is i am not sure how long <div> will be.

    I am populating with data with AJAX request.

    and the other one is menu where I can add/delete items any time i want to.

    and about select. it's form with lots of selects. how would i place them absolutely?
    ---------------------------
    Errors = Improved Programming.
    My Site

  7. #7
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't need to do anything with the selects.

    You may need to use javascript to figure out the height of the div and apply that height to the iframe when you show it.
    Olly Hodgson
    thinkdrastic.net

  8. #8
    Umm. PHP Guru....Naaaah jaswinder_rana's Avatar
    Join Date
    Jul 2004
    Location
    canada
    Posts
    3,193
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Then why do i need to place "position: absolute" for selects?

    and can you please tell me how should i place iframe?

    is it?
    HTML Code:
    <iframe>
     <div id="serial_results" class="ajaxdropdown"></div>
    </iframe>
    wouldn't it look odd seeing and empty iframe in the first place?

    or do i make it hidden too?
    ---------------------------
    Errors = Improved Programming.
    My Site


Bookmarks

Posting Permissions

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