DarkxPunk Posted July 31, 2017 Share Posted July 31, 2017 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: How its being processed: 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 More sharing options...
dsonesuk Posted July 31, 2017 Share Posted July 31, 2017 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 More sharing options...
DarkxPunk Posted August 1, 2017 Author Share Posted August 1, 2017 Well poop. Thanks for that. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now