Jump to content

Tags Duplicating and Closing


DarkxPunk

Recommended Posts

I am experiencing something strange... I know if you incorrectly close tags you can cause weird duplication, however I have gone over this what feels like 100x and can't see/find an off closing tag. I am doubtful CSS is having an effect but I will include it too just in case.

Here is the visual issue:

weird.thumb.jpg.c006e18f72f22669b7f278bcd8e545b9.jpg

How its being processed:

weird2.jpg.d11a88a3d02d1285c8b5c12fcef5b54e.jpg

HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<base href="">
		<title>Stuff</title>
		<link rel="stylesheet" href="css/normalize.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/default.css" type="text/css" media="screen" charset="utf-8"/>
	</head>
	<body>
		<script defer src="images/icons/svgxuse.js"></script>
		<header>
			<div class="flex spacer"></div>
			<div class="flex logo">
				<a href="">Stuff</a>
			</div>
			<div class="flex contact">
				<div class="flex email">
					<a href="">Stuff</a>
				</div>
				<div class="flex social">
					<a class="blogspot" href=""><svg class="icon blogspotbutton"><use xlink:href="images/icons/symbol-defs.svg#blogspotbutton"></use></svg></a>
					<a class="facebook" href=""><svg class="icon facebookbutton"><use xlink:href="images/icons/symbol-defs.svg#facebookbutton"></use></svg></a>
					<a class="artstation" href=""><svg class="icon artstationbutton"><use xlink:href="images/icons/symbol-defs.svg#artstationbutton"></use></svg></a>
				</div>
			</div>
		</header>
		<section id="gallary" class="flex">
			<a id="concept1" class="flex img" href="#concept1">
				<div>
					<a href="">TEST</a>
				</div>
			</a>
			<a id="concept2" class="flex img" href="#concept2">
				<div>
					<a href="">TEST</a>
				</div>
			</a>
			<a id="concept3" class="flex img" href="#concept3">
				<div>
					<a href="">TEST</a>
				</div>
			</a>
			<a id="concept4" class="flex img" href="#concept4">
				<div>
					<a href="">TEST</a>
				</div>
			</a>
			<a id="concept5" class="flex img" href="#concept5">
				<div>
					<a href="">TEST</a>
				</div>
			</a>
			<a id="concept6" class="flex img" href="#concept6">
				<div>
					<a href="">TEST</a>
				</div>
			</a>
		</section>
		<footer></footer>
	</body>
</html>

CSS:

* {
	box-sizing: border-box;
}

html,body {
	width: 100%;
	height: 100%;
	background-color: #000000;
	font-family: 'alien_league',arial;
	color: #c7c7c7;
}

a,a:link,a:visited,a:hover,a:active,a:link:active,a:visited:active {
	text-decoration: none;
	color: #c7c7c7;
	transition: 0.4s ease color;
	outline: none;
}
a:hover {
	color: #862424;
}
a span {
	color: #862424;
	transition: 0.4s ease color;
}
a:hover span {
	color: #c7c7c7;
}

header {
	padding: 0.67vw 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	background: #2e2e2e;
}
.flex {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	justify-content: center;
	align-items: center;
}
.logo a,.logo a span {
	margin: 0 !important;
	font-size: 4vw;
	line-height: 3.22vw;
}
.contact {
	justify-content: space-around;
}
.contact .flex {
	flex-grow: 0;
}
.email a,.email a span {
	margin: 0.1vw 0 0;
}
.social a {
	margin: 0 0.4vw;
	line-height: 1vw;
}
.icon {
	width: 2vw;
	height: 2vw;
	fill: currentColor;
}
#gallary {
	height: 80%;
	padding: 3vw 0;
	justify-content: center;
	align-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	position: relative;
}
.img {
	margin: 0.5vw;
	height: 15.6vw;
	flex-basis: 15.6vw;
	flex-grow: 0;
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	background-color: #2e2e2e;
}
.img div {
	display: none;
}
:target div {
	position: absolute;
	width: 100vw;
	height: 83vh;
	left: 0;
	top: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	display: block;
}
:target div {
	background-color: #000000;
}
#concept1,#concept1:target div {
	background-image: url(../images/concepts/concept1.jpg);
}
#concept2,#concept2:target div {
	background-image: url(../images/concepts/concept2.jpg);
}
#concept3,#concept3:target div {
	background-image: url(../images/concepts/concept3.jpg);
}
#concept4,#concept4:target div {
	background-image: url(../images/concepts/concept4.jpg);
}
#concept5,#concept5:target div {
	background-image: url(../images/concepts/concept5.jpg);
}
#concept6,#concept6,:target div {
	background-image: url(../images/concepts/concept6.jpg);
}
#concept1:target div {
	background-image: url(../images/concepts/concept1.jpg);
	z-index: 99;
}
#concept2:target div {
	background-image: url(../images/concepts/concept2.jpg);
	z-index: 99;
}
#concept3:target div {
	background-image: url(../images/concepts/concept3.jpg);
	z-index: 99;
}
#concept4:target div {
	background-image: url(../images/concepts/concept4.jpg);
	z-index: 99;
}
#concept5:target div {
	background-image: url(../images/concepts/concept5.jpg);
	z-index: 99;
}
#concept6:target div {
	background-image: url(../images/concepts/concept6.jpg);
	z-index: 99;
}

@media screen and (max-width: 1023px) {
	a {
		font-size: 1rem;
		line-height: 1.125rem;
	}
	header {
		padding: 0.428rem 0;
	}
	.spacer:first-child {
		display: none;
	}
	.flex {
		flex-basis: 512px;
	}
	.contact {
		justify-content: center;
		padding: 0.428rem 0 0;
	}
	.contact .flex {
		flex-basis: 1vw;
	}
	.logo a,.logo a span {
		font-size: 2.563rem;
		line-height: 2.063rem;
	}
	.email a,.email a span {
		margin: 0.063rem 0 0;
	}
	.social a {
		margin: 0 0.256rem;
		line-height: 1vw;
	}
	.icon {
		width: 1.250rem;
		height: 1.250rem;
		fill: currentColor;
	}
	.img {
		height: 159px;
		flex-basis: 159px;
		flex-grow: 0;
	}
}
@media screen and (max-width: 415px) {
	#gallary {
		padding: 0;
	}
	.img {
		height: 50vw;
		flex-basis: 50vw;
		margin: 0;
	}
}

Thanks for the help!

Link to comment
Share on other sites

Nested links are illegal, and the result will return what you are seeing

Quote

12.2.2 Nested links are illegal

Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.

Since the DTD defines the LINK element to be empty, LINK elements may not be nested either.

https://www.w3.org/TR/html401/struct/links.html#h-12.2.2

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...