www.webdeveloper.com
Results 1 to 3 of 3

Thread: Disappearing Div in IE7

  1. #1
    Join Date
    May 2010
    Location
    Ohio
    Posts
    11

    Disappearing Div in IE7

    One of my Divs are disappearing while loading in IE7, but not in IE8 or Opera. There is some javascript being used on the site to create rounded corners (which I hate, but not able to remove it from the design YET) and it has a z-index of 1. I've tried changing that z-index to zero or negative number. I've tried adding a z-index to the specific Div in IE7 but nothing changes.

    Is there something specific I can do in the CSS for IE7 to modify the layer order for the Div? You can see the page here - http://beta.testamericainc.com/servi...lservices.aspx and search for something like New York. Above the results table there should be two boxes. One for exporting to Excel and one for display the detailed grid of results.

    Thanks for your help!!!! I'm ready to explode!!!!
    Here is my CSS -
    #searchInterface {
    float:left;
    display:block;
    background-image:url(/media/49191/certification_background.jpg);
    background-repeat:repeat-x;
    background-position:bottom;
    border:#ccc 1px solid;
    width:94%;
    padding:15px;
    }

    #searchBox {
    margin-top:30px;
    text-align:center;
    color:#005ADD;
    }
    #divButtonHolder {
    margin-top:15px;
    text-align:center;
    color:#005ADD;
    }
    #advancedSearch {
    text-align:center;
    margin-top:10px;
    margin-bottom:25px;
    }
    #divExportSimpleGridButton {
    float:right;
    border:#ccc 1px solid;
    padding:5px;
    background-color:#EEE;
    margin-bottom:10px;
    height:38px;
    }
    .exportText {
    line-height:10px;
    }
    #divExportDetailedGridButton {
    float:right;
    border:#ccc 1px solid;
    padding:5px;
    background-color:#EEE;
    margin-bottom:10px;
    z-index:500;
    }
    #divSearchDetailButton {
    float:right;
    border:#ccc 1px solid;
    padding:5px;
    background-color:#EEE;
    margin-bottom:10px;
    margin-left:5px;
    height:28px;
    padding-top:15px;
    display:inline;
    }

  2. #2
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    Well as far as z-indexing goes, it only works for elements that have a declared position, like position: relative;
    so the z-index declared in
    Code:
    #divExportDetailedGridButton
    will not work without also delaring a position
    and then how the element with a declared position will actually display depend on whether or not it's parent element also has a declared position.
    From an old post:
    One more thing about positioning. z-indexing only works with elements that have a declare position like absolute or relative, and how that element reacts to a declare position will depend on whether or not it's parent element also has a declare position.
    So

    Code:
    #flash {
    z-index:5;
    }
    will not work without ALSO giving it a declare position.
    But the actual display of #flash will very depending on whether or not it's parent container (<div>) also has a declared position.

    That is, if it's parent container DOES NOT also have a declared position, the child <div> will do 1 of 2 things.
    If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.
    If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.

    So be sure to give a declared position to both the parent and the child <div>.

    Example page using declared positions and z-indexing to sandwich Flash between 2 layers of text:
    http://www.cidigitalmedia.com/tutorials/flash_div.html
    View the source code or copy it and practice by changing z-index and positions.

    Maybe this will help clear up any misunderstanding you have about declared positioning as well as the use of z-indexing:
    More info here:

    http://www.w3schools.com/css/pr_pos_z-index.asp
    Best wishes,
    Eye for Video
    www.cidigitalmedia.com

  3. #3
    Join Date
    May 2010
    Location
    Ohio
    Posts
    11
    Thanks for the info Eye for Video!!!

    I'll take a look and see if I can get it to display.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles