Overlapping div's not visible in Safari

Discussion in 'Web Design and Development' started by mappinger, Jul 11, 2008.

  1. mappinger macrumors newbie

    Joined:
    Jul 11, 2008
    #1
    Hello,

    I have a problem with overlapping divs in Safari. I have a div which contains a background image (must be a div because the image should resize when the browser is resized). Over this div there is another one containing the text of the page.

    In IE6,7 an Firefox it works, but in Safari, the layer containing the text is not visible.

    Here are some excerpts from html and css:


    Code:
    <body onload="DoLoad();">
    	<div id="frame">
    		<div id="leftspacer"></div>
    		<div id="center">
                	
    			<div id="header">
    			    <div id="logo" onclick="javascript:location.href='http://www.hardlymountain.at';" onMouseOver="this.style.cursor='hand'">
                        
                    </div>	
                  
    				
    				<div id="nav">
    				    <table width="100%">
    				        <tr>
    				            <td><a href="1-home.html" onmouseover="image.src='files/img/nav_home_hover.jpg'" onmouseout="image.src='files/img/nav_home.jpg'"><img name="image" src="files/img/nav_home.jpg"/></a></td>
    				            <td><a href="3-lineup.html" onmouseover="lineup.src='files/img/nav_lineup_hover.jpg'" onmouseout="lineup.src='files/img/nav_lineup.jpg'"><img name="lineup" src="files/img/nav_lineup.jpg" /></a></td>
    				            <td><a href="4-location.html" onmouseover="loc.src='files/img/nav_location_hover.jpg'" onmouseout="loc.src='files/img/nav_location.jpg'"><img name="loc" src="files/img/nav_location.jpg" /></a></td>
    				            <td><a href="5-tickets.html" onmouseover="tickets.src='files/img/nav_tickets_hover.jpg'" onmouseout="tickets.src='files/img/nav_tickets.jpg'"><img name="tickets" src="files/img/nav_tickets.jpg" /></a></td>
    				            <td><a href="6-faq.html" onmouseover="faq.src='files/img/nav_faq_hover.jpg'" onmouseout="faq.src='files/img/nav_faq.jpg'"><img name="faq" src="files/img/nav_faq.jpg" /></a></td>
    				            <td><a href="http://forum.hardlymountain.at" onmouseover="forum.src='files/img/nav_forum_hover.jpg'" onmouseout="forum.src='files/img/nav_forum.jpg'" target="_blank"><img name="forum" src="files/img/nav_forum.jpg" /></a></td>
    				        </tr>
    				    </table>
    				    
    				</div>
    			</div>
    			<div id="main">
    				<div id="mainleft">
                        			<div id="impressum"><a href="8-impressum.html" onmouseover="impressum.src='files/img/impressum_hover.jpg'" onmouseout="impressum.src='files/img/impressum.jpg'"><img name="impressum" src="files/img/impressum.jpg"/></a></div>
    				</div>
    				<div id="mainright">
    					<div id="content">					    
    					    <?php print $this->getArticle(); ?>
    					    
    					</div>
    					<div id="textback"><img src="files/img/textback.jpg" width="100%" height="100%" /></div>
    				</div>
    			</div>
    		</div>
    		<div id="rightspacer"></div>
    	</div>
    </body>
    CSS:
    Code:
    #mainright
    {
        background-repeat: no-repeat;
    	float:right;
    	right:0px;
    	width:520px;
    	height:65%;
    	min-height:65%;
    	max-height:65%;
    	margin-top:15px;
    	margin-right:20px;
    	margin-left: 15px;
    	background-color:transparent;
    	z-index:1;	
    	position:relative;
    	text-align:center;
    	
    }
    
    #textback
    {
        width:100%;
        height:100%;
        position:absolute;
        top:-1px;
        left:0px;
        margin: 0px;
        padding:0px;
        z-index:2;
    }
    
    
    #content
    {
        overflow-y:auto;
        overflow:auto;
        margin:10px;
        height:90%;
    	max-height:90%;
    	width:470px;
    	padding:10px;
    	padding-right:20px;
    	text-align: left;
        background: transparent;
        z-index:9999;
        position:absolute;
        color:Black;
        left:0px;
        overflow-x: hidden;
    
    }
    
    And here are two screenshots, one viewed with IE and one with Safari

    [​IMG]
    [​IMG]

    Has anybody ideas why this does not work in Safari and how I can solve this problem?

    Thanks in advance,

    Michael
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    An interesting issue. One thing to simply try is in your HTML, place the textback portion before the content to see if it makes a difference. The z-index property should be taking care of it though. Have you tried the page on a site like BrowserShots to see if it messes up on other browsers? I see you're using Windows Safari, I'm curious if it's the same on Mac Safari.
     
  3. cromwell64 macrumors regular

    Joined:
    Jun 30, 2008
    #3
    if you change position:absolute to position:relative in your #textback div it should fix it, although it might affect your layout elsewhere in the page.
     
  4. mappinger thread starter macrumors newbie

    Joined:
    Jul 11, 2008
    #4
    The ordering of the 2 layers had no effect on the issue. The screenshot with safari is taken from browsershots. In all other browsers it looks correct. (but the problem is solved...see below)
     
  5. mappinger thread starter macrumors newbie

    Joined:
    Jul 11, 2008
    #5
    thanks for the hint, I have changed the position attribute for the div #main from relative to absolute and now it works, I will try to change the textback div also.

    Thank you again!
     
  6. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #6
    Great that you solved it, now if you or anyone here wants to know why z-index behaved in the manner it did, since this issue seems similar to another posted in this forum, this tutorial page explains it well:

    http://css-discuss.incutio.com/?page=OverlappingAndZIndex

    The page discusses stack context, default stacking by document tree order, and positioning requirements for the z-index property to work at all. It has great examples, suggested reading.

    jim
     
  7. gabydep macrumors newbie

    gabydep

    Joined:
    Mar 17, 2018
    #7
    it does not appear on safari how can i fix this
    <div class="hidden-xs hidden-sm col-md-5 col-lg-4 col-mobile col-fixed">
    <div class="btn-go hidden-md hidden-sm hidden-lg hidden-xl hidden"> Category
    </div>
    // there is a lot of element in ruby on rails after but the this is the 4
    first line of the div
    .col-fixed {
    @media only screen and (min-width: 768px) {
    position: fixed !important;
    top: 50px;
    right: 0px;
    left: 65vw;
    background: transparent;
    height: 80%;
    width: 30vw;
    padding-left: 25px;
    padding-top: 25px;
    margin-top:10000px;
    }
    @media only screen and (min-width: 1200px) {
    float: left;
    }
    }
    @media only screen and (min-width: 1200px) {
    .col-md-5 {
    width: 33% !important;
    }
    }

    @media only screen and (min-width: 992px) {
    .col-md-5 {
    width: 30%;
    }
    }
     

Share This Page