Jump to content

Strange Layering Per Browser


DarkxPunk

Recommended Posts

Hey,

 

So I got this to show you:

differentLayering.gif

 

As you can see on the left you have the menu sliding in form nowhere in Safari and on the right sliding in from under the header in Firefox (the desired effect).

 

Attached is my code if anyone can figure out why the massive difference and how I can fix this... I have been toying with z-index and it seems to do nothing.

HTML

 

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, user-scalable=no"/>
		<base href="">
		<title>Razno Renovations</title>
		<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" charset="utf-8"/>
		<link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/>
		<link rel="stylesheet" href="css/default5.css" type="text/css" media="screen" charset="utf-8"/>
	</head>
	<body>
		<header>
			<div class="logo">
				<a href="">
					<span class="logotype">Razno Renovations</span>
				</a>
			</div>
			<input type="checkbox" id="hamburgerButtonX" role="button" />
			<label class="hamburgerLabelX" for="hamburgerButtonX">
				<span class="hamburgerX"></span>
			</label>
			<nav>
				<ul>
					<li id="navAbout"><a href="">Who We Are</a></li>
					<li id="navServices"><a href="">Our Services</a></li>
					<li id="navContact"><a href="">Start Your Project</a></li>
				</ul>
			</nav>
		</header>
		<section></section>
		<footer></footer>
	</body>
</html> 

 

 

CSS

 

 

html,body {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-size: 10px;
	font-family: arial,helvetica,sans-serif;
	background: #c83837;
}
body {
	min-width: 32rem;
}
a,a:link,a:visited,a:hover,a:active {
	text-decoration: none;
	color: #c83837;
	font-size: 1.4rem;
}
a:link {
	
}
a:visited {
	
}
a:hover {
	
}
a:active {
	
}
p,li {
	margin: 1rem 0;
	font-size: 1.4rem;
	color: #fcfcfc;
}
h2 {
	margin: 1rem 0;
	font-size: 1.8rem;
	color: #c83837;
}
li {
	margin: 0 0 0 1.8rem;
	list-style: disc;
}
header {
	width: auto;
	height: 4em;
	box-shadow: 0 -0.4rem 2.1rem 0.3rem rgba(0,0,0,0.6);
	position: fixed;
	left: 0;
	right: 0;
	background: #c83837;
}
.logo {
	width: 100%;
	max-width: 32rem;
	height: 2.8rem;
	padding: 0.6rem 0 0.6rem 0;
	text-align: center;
}
.logo a {
	display: inline-block;
}
.logotype {
	width: 100%;
	font-size: 2.4rem;
	font-weight: bold;
	color: #fcfcfc;
	line-height: 2.8rem;
	display: inline-block;
}
nav {
	padding: 1.3rem 0 1.3rem 32rem;
	width: 100%;
	height: 4rem;
	text-align: center;
	position: absolute;
	top: 0;
	right: 0;
	box-sizing: border-box;
}
nav ul {
	display: inline-block;
}
nav ul li {
	margin: 0 0.5rem;
	display: inline-block;
}
nav ul li a{
	display: inline-block;
	color: #fcfcfc !important;
}
/* Hamburger Button X */
#hamburgerButtonX {
	display: none;
}
#hamburgerButtonX:checked ~ .hamburgerLabelX .hamburgerX,
#hamburgerButtonX:checked ~ .hamburgerLabelX .hamburgerX::before,
#hamburgerButtonX:checked ~ .hamburgerLabelX .hamburgerX::after {
	transition:
		background-color 0s linear 0.2s,
		top 0.2s linear 0s,
		transform 0.2s linear 0.4s;
}
#hamburgerButtonX:checked ~ .hamburgerLabelX .hamburgerX {
	background-color: transparent;
}
#hamburgerButtonX:checked ~ .hamburgerLabelX .hamburgerX::before {
	top: 0em;
	transform: rotate(45deg) scale(0.8);
}
#hamburgerButtonX:checked ~ .hamburgerLabelX .hamburgerX::after {
	top: -0.3em;
	transform: rotate(-45deg) scale(0.8);
}
.hamburgerLabelX {
	display: inline-block;
	cursor: pointer;
}
.hamburgerX,.hamburgerX::before,.hamburgerX::after {
	content: "";
	background-color: #fcfcfc;
	margin: 0;
	border: 0;
	border-radius: 25px;
	padding: 0;
	width: 2.5em;
	height: 0.3em;
	display: block;
	position: relative;
	top: 0;
	left: 0;
	font-size: 10px;
	transition:
		background-color 0s linear 0.4s,
		top 0.2s linear 0.5s,
		transform 0.2s linear 0.2s;
}
.hamburgerX {
	margin: 0.6em 0;
}
.hamburgerX::before {
	top: -0.6em;
}
.hamburgerX::after {
	top: 0.3em;
}
/* Hamburger Button X */
.hamburgerLabelX {
	position: absolute;
	top: 1.25rem;
	right: 4.85rem;
	z-index: 999;
	display: none;
}
@media only screen and (max-width: 767px) {
	#hamburgerButtonX:checked ~ nav {
		top: 4rem;
	}
	#hamburgerButtonX:checked ~ nav::before {
		top: -4rem;
	}
	#hamburgerButtonX:checked ~ nav,
	#hamburgerButtonX:checked ~ nav::before {
		visibility: visible;
		transition:
			top 0.6s linear 0s;
		;
	}
	.hamburgerLabelX {
		display: block;
	}
	nav::before,
	nav {
		transition:
			top 0.6s linear 0s;
	}
	nav::before {
		content: "";
		width: 100%;
		height: 4rem;
		background: #c83837;
		position: absolute;
		visibility: visible;
		top: 0;
		left: 0;
		z-index: 1;
	}
	nav {
		display: block;
		padding: 1.3rem 0 1.3rem 0;
		width: 100%;
		height: 4rem;
		position: absolute;
		top: 0rem;
		right: 0rem;
		background: #c83837;
		visibility: visible;
		box-shadow: 0 0.1rem 2.1rem -0.5rem rgba(0,0,0,0.6);
		z-index: -2;
	}
} 

 

 

 

Thanks for any help!

Link to comment
Share on other sites

The problem is child elements, normally! can't have z-index lower than parent to force parent overlap, this is true for all browsers EXCEPT Firefox.

 

So you will have to somehow make these elements siblings instead.

 

It is mentioned here http://stackoverflow.com/questions/16083813/z-index-of-elements-in-different-parents-in-chrome

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...