Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Overlapping div's not visible in Safari

M

mappinger

macrumors newbie
Original poster
Jul 11, 2008
3
0
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

ie.jpg

safari.png


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

Thanks in advance,

Michael
 
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.
 
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.
 
angelwatt said:
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.
Click to expand...

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)
 
cromwell64 said:
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.
Click to expand...

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!
 
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
 
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%;
}
}
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back