Pojawianie się nieistniejącego elementu na stronie

Question

Mam bardzo dziwny problem, ponieważ gdy włączam stronę w przeglądarce z jakiegoś powodu dodaje się nieistniejący element. Kod jest raczej napisany prawidłowo i wszystkie znaczniki pozamykane, więc nie mam pojęcia dla czego może się tak dziać.

HTML:

<div
		class="Position"
		style="top: 0; right: 60px;"
		>
			<a
			class="AplikacjaM K2"
			href="Menu/Centrum/P.html"
			>
				<img
				src="Symbole/Sterowanie.png"
				>
			
				<div
				class="GCentrum K1"
				>
					<div
					class="NazwaBokC"
					>
					</div>
					
					<div
					class="GNazwaC"
					>
						Centrum sterowania
					</div>
					
					<div
					class="NazwaBokC"
					>
						<img
						class="K2"
						src="Menu/Centrum/Symbole/Opcje.png"
						>
						
						<div
						class="Clear"
						>
						</div>
					</div>
						
					<div
					class="Clear"
					>
					</div>
					
					<a
					href="Centrum+.html"
					>
						<div
						class="Przestrzeń3C K19 K2"
						>
							<img
							class="Symbol4C"
							src="Symbole/Samolotowy.png"
							>
						</div>
					</a>
					
					<a
					href="Centrum+.html"
					>
						<div
						class="Przestrzeń3C K19 K2"
						>
							<img
							class="Symbol4C"
							src="Symbole/Bluetooth.png"
							>
						</div>
					</a>
					
					<a
					href="Centrum+.html"
					>
						<div
						class="Przestrzeń3C K19 K2"
						>
							<img
							class="Symbol4C"
							src="Symbole/Wi-Fi.png"
							>
						</div>
					</a>
					
					<a
					href="Centrum+.html"
					>
						<div
						class="Przestrzeń3C K19 K2"
						>
							<img
							class="Symbol4C"
							src="Symbole/Nagrywanie.png"
							>
						</div>
					</a>
					
					<div
					class="Clear"
					>
					</div>
					
					<div
					class="Tekst2C"
					>
						Samolotowy
					</div>
					
					<div
					class="Tekst2C"
					>
						Bluetooth
					</div>
					
					<div
					class="Tekst2C"
					>
						Wi-Fi
					</div>
					
					<div
					class="Tekst2C"
					>
						Nagrywanie
					</div>
					
					<div
					class="Clear"
					>
					</div>
					
					<div
					class="NazwaBokC"
					>
					</div>
					
					<div
					class="GNazwaC"
					>
						Obraz
					</div>
					
					<div
					class="NazwaBokC"
					>
						<img
						class="K2"
						src="Symbole/Opcje.png"
						>
						
						<div
						class="Clear"
						>
						</div>
					</div>
						
					<div
					class="Clear"
					>
					</div>
					
					<div
					class="Przestrzeń1C K19"
					>
						<div
						class="ONazwaC"
						>
							Jasność ogólna • 50%
						</div>
						
						<div
						class="Clear"
						>
						</div>
					
						<div
						class="Symbol2C K2"
						>
							<img
							src="Symbole/Jasność.png"
							>
						</div>
					
						<div
						class="Pasek1C K3"
						>
							<div
							class="Wypełnienie1C K4"
							>
								<div
								class="Kropka1C K5"
								>
								
								</div>
							
								<div
								class="Clear"
								>
								
								</div>
							</div>
						</div>
						
						<a
						class="Symbol2C K2"
						href="Centrum+.html"
						style="display: block;"
						>
							<img
							src="Symbole/Więcej.png"
							>
						</a>
						
						<div
						class="Clear"
						>
						</div>
					</div>
					
					<div
					class="NazwaBokC"
					>
					</div>
					
					<div
					class="GNazwaC"
					>
						Dźwięk
					</div>
					
					<div
					class="NazwaBokC"
					>
						<img
						class="K2"
						src="Symbole/Opcje.png"
						>
						
						<div
						class="Clear"
						>
						</div>
					</div>
						
					<div
					class="Clear"
					>
					</div>
					
					<div
					class="Przestrzeń1C K19"
					>
						<div
						class="ONazwaC"
						>
							Głośność ogólna • 50%
						</div>
						
						<div
						class="Clear"
						>
						</div>
					
						<div
						class="Symbol2C K2"
						>
							<img
							src="Symbole/Głośność.png"
							>
						</div>
					
						<div
						class="Pasek1C K3"
						>
							<div
							class="Wypełnienie1C K4"
							>
								<div
								class="Kropka1C K5"
								>
								
								</div>
							
								<div
								class="Clear"
								>
								</div>
							</div>
						</div>
						
						<a
						class="Symbol2C K2"
						href="Centrum+.html"
						style="display: block;"
						>
							<img
							src="Symbole/Więcej.png"
							>
						</a>
						
						<div
						class="Clear"
						>
						</div>
						
						<div
						class="ONazwaC"
						>
							Kontrolowany dźwięk
						</div>
						
						<div
						class="Przestrzeń2C K19"
						>
							<div
							class="Clear"
							>
							</div>
							
							<div
							class="PiosenkaIkonaC"
							>
								<img
								src="Miniaturki/1.png"
								>
							</div>
							
							<div
							class="Strefa2C"
							>
								<div
								class="Strefa4C"
								>
									<div
									class="TytułC"
									>
										Jungle Girl
									</div>
									
									<div
									class="Czas1C"
									>
										• 2:58
									</div>
									
									<div
									class="Symbol1C K2"
									>
										<img
										src="Symbole/Zamknij.png"
										>
									</div>
									
									<div
									class="Symbol1C K2"
									>
										<img
										src="Symbole/Opcje.png"
										>
									</div>
							
									<a
									href="Centrum+.html"
									>
										<div
										class="Symbol1C K2"
										>
											<img
											src="Symbole/Więcej.png"
											>
										</div>
									</a>
								
									<div
									class="Clear"
									>
									</div>
								</div>
								
								<div
								class="AplikacjaIkonaC"
								>
									<img
									src="../../Aplikacje/12.png"
									>
								</div>
								
								<div
								class="Strefa5C"
								>
									<div
									class="Wykonawca1C"
									>
										Spotify
									</div>
									
									<div
									class="Wykonawca2C"
									>
										Young Leosia, Żabson
									</div>
								</div>
								
								<div
								class="Clear"
								>
								</div>
							</div>
							
							<div
							class="Clear"
							>
							</div>
							
							<div
							class="Strefa1C"
							>
								<div
								class="Symbol3C K2"
								>
									<img
									src="Symbole/Poprzednia.png"	
									>
								</div>
									
								<div
								class="Symbol3C K2"
								>
									<img
									src="Symbole/Cofanie.png"	
									>
								</div>
								
								<div
								class="Symbol3C K2"
								>
									<img
									src="Symbole/Pauza.png"	
									>
								</div>
								
								<div
								class="Symbol3C K2"
								>
									<img
									src="Symbole/Przewijanie.png"
									>
								</div>
								
								<div
								class="Symbol3C K2"
								>
									<img
									src="Symbole/Następna.png"
									>
								</div>
								
								<div
								class="Clear"
								>
								</div>
							</div>
							
							<div
							class="Strefa1C"
							>
								<div
								class="Czas2C"
								>
									1:29
								</div>
							
								<div
								class="Pasek2C K3"
								>
									<div
									class="Wypełnienie2C K4"
									>
										<div
										class="Kropka2C K7"
										>
										</div>
									
										<div
										class="Clear"
										>
										</div>
									</div>
								</div>
								
								<div
								class="Czas2C"
								>
									1:29
								</div>
								
								<div
								class="Clear"
								>
								</div>
							</div>
						</div>
					</div>
					
					<div
					class="Space"
					>
					</div>
				</div>
			</a>
		</div>

CSS:

.GCentrum
{
    width: 500px;
    height: 0;
    border-radius: 20px;
    overflow: auto;
    transition: 0.4s cubic-bezier(0.6, 0, 0, 0.8);
    position: fixed;
    top: 121px;
    right: 15px;
    z-index: 100;
}

.GCentrum::-webkit-scrollbar
{
  display: none;
}

.Position:active > .GCentrum
{
    height: 859px;
}

.Position
{
    position: fixed;
    height: 60px;
    width: 60px;
    padding: 0 0 10px 10px;
}

.Przestrzeń1C
{
	width: 450px;
	margin: 0 auto;
	border-radius: 15px;
	padding-bottom: 15px;
}

.Przestrzeń2C
{
	width: 385px;
	height: 166px;
	margin: 10px 25px;
	border-radius: 15px;
	padding: 5px 0 10px 15px;
}

.Przestrzeń3C
{
	width: 93.75px;
	height: 60px;
	margin-left: 25px;
	border-radius: 15px;
	transition: all 0.2s ease-in-out;
	float: left;
}

.Przestrzeń3C:hover
{
	transform: scale(1.05);
	cursor: pointer;
}

.Tekst1C
{
	width: 93.75px;
	font-size: 10px;
	color: #fff;
}

.Tekst2C
{
	width: 93.75px;
	margin: 5px 0 0 25px;
	float: left;
	font-size: 12px;
}

.Symbol1C
{
	border-radius: 10px;
	padding: 4px;
	margin-right: 5px;
	width: 18px;
	height: 18px;
	transition: all 0.2s ease-in-out;
	float: right;
}

.Symbol1C > img
{
	width: 18px;
	height: 18px;
}

.Symbol1C:hover
{
	transform: scale(1.1);
	cursor: pointer;
}

.Symbol2C
{
	width: 33px;
	height: 33px;
	margin: 0 15px;
	float: left;
	border-radius: 10px;
	transition: all 0.2s ease-in-out;
}

.Symbol2C:hover
{
	transform: scale(1.1);
	cursor: pointer;
}

.Symbol2C > img
{
	width: 23px;
	height: 23px;
	padding: 5px;
	border-radius: 10px;
}

.Symbol3C
{
	width: 33px;
	height: 33px;
	margin: 0 20.5px;
	float: left;
	border-radius: 10px;
	transition: all 0.2s ease-in-out;
}

.Symbol3C:hover
{
	transform: scale(1.1);
	cursor: pointer;
}

.Symbol3C > img
{
	width: 23px;
	height: 23px;
	padding: 5px;
	border-radius: 10px;
}

.Symbol4C
{
	width: 33px;
	height: 33px;
	margin: 13.5px auto;
}

.Symbol5C
{
	width: 33px;
	height: 33px;
	margin: 5px auto 2px auto;
}

.Symbol5C > img
{
	width: 33px;
	height: 33px;
}

.Strefa1C
{
	width: 370px;
	padding-top: 15px;
}

.Strefa2C
{
	float: left;
	width: 313px;
	height: 82px;
}

.Strefa3C
{
	margin: 0 auto;
	width: 150px;
}

.Strefa4C
{
	width: 312px;
}

.Strefa5C
{
	width: 258px;
	height: 36px;
	margin: 10px 2px 0 7px;
	float: left;
}

.AplikacjaIkonaC
{
	width: 35px;
	height: 35px;
	margin: 10px 0 0 10px;
	float: left;
	border-radius: 10px;
	box-shadow: 0 0 25px -4px #000;
}

.AplikacjaIkonaC > img
{
	width: 35px;
	height: 35px;
	border-radius: 10px;
}

.PiosenkaIkonaC
{
	width: 68px;
	height: 68px;
	margin: 12px 2px 2px 2px;
	float: left;
	border-radius: 10px;
	box-shadow: 0 0 25px -4px #000;
}

.PiosenkaIkonaC > img
{
	width: 68px;
	height: 68px;
	border-radius: 10px;
}

.Wykonawca1C
{
	text-align: left;
	font-size: 12px;
}

.Wykonawca2C
{
	text-align: left;
	font-size: 12px;
}

.NazwaBokC
{
	width: 67px;
	height: 47px;
	float: left;
}

.NazwaBokC > img
{
	width: 23px;
	height: 23px;
	margin: 7px;
	padding: 5px;
	float: left;
	transition: all 0.2s ease-in-out;
	border-radius: 10px;
}

.NazwaBokC > img:hover
{
	transform: scale(1.1);
	cursor: pointer;
}

.GNazwaC
{
	font-size: 18px;
	padding: 10px 0;
	width: 366px;
	float: left;
}

.TytułC
{
	text-align: left;
	font-size: 14px;
	font-weight: 600;
	margin: 12px 4px 0 10px;
	float: left;
}

.Czas1C
{
	text-align: left;
	font-size: 14px;
	margin-top: 12px;
	float: left;
}

.Czas2C
{
	width: 40px;
	font-size: 14px;
	float: left;
}

.Pasek1C
{
	width: 320px;
	height: 19px;
	border-radius: 10px;
	margin: 7px 0;
	float: left;
	transition: all 0.2s ease-in-out;
}

.Pasek1C:hover
{
	transform: scale(1.03);
	cursor: pointer;
}

.Pasek2C
{
	margin: 8px 0;
	width: 290px;
	height: 5px;
	border-radius: 10px;
	transition: all 0.2s ease-in-out;
	float: left;
}

.Pasek2C:hover
{
	transform: scale(1.03);
	cursor: pointer;
}

.Kropka1C
{
	width: 19px;
	height: 19px;
	border-radius: 20px;
	float: right;
}

.Kropka2C
{
	width: 5px;
	height: 5px;
	border-radius: 20px;
	float: right;
}

.Wypełnienie1C
{
	width: 55%;
	height: 19px;
	border-radius: 10px;
	float: left;
}

.Wypełnienie2C
{
	width: 50%;
	height: 5px;
	border-radius: 20px;
}

.ONazwaC
{
	font-size: 14px;
	padding-top: 10px;
}

Comments

Który to element? Wrzuć skrina, aby zobaczyć, co jest nie tak.

---

@Dawidziu, czy chodzi o height: 0 dla elementu o klasie GCentrum K1? Usunięcie go powoduje pojawienie się zawartości.

Answer 1

1) Nie masz znacznika <!DOCTYPE html> więc nie wiadomo w z której wersji HTMLa korzystasz. W HTML 4 musiał być zamknąć znaczniki <img> bo masz je otwarte.

2) W środku znacznika <a> otwierasz kolejny znacznik <a> tak nie można! Znacznik <a> nie może mieć w dzieciach kolejnego znacznika <a>

3) Spróbuj odpalić stronę w trybie incognito być może coś psują twoje rozszerzenia w przeglądarce.

4) Korzystaj z https://validator.w3.org/nu/#textarea 

Powodzenia ;) 

Comments

To jest tylko wycinek dość sporej strony, ale zawiera i doctype, i wszystkie inne potrzebne znaczniki. Problemem okazały się być te linki wewnątrz linku, które zapomniałem usunąć, także dzięki wielkie za pomoc