HTML, CSS, <a href="">

Question

Witam.

Czy ktoś z Was spotkał się z takim przypadkiem?

Stworzyłem dwie nawigacje - górną i boczną, z odsyłaczami do odpowiednich plików html i ta boczna dziwnie się zachowuje. Po kliknięciu na dowolny element tej nawigacji i powrocie na stronę główną (za pomocą przeglądarkowej strzałki w lewo), zarówno pod, jak i nad elementem pojawiają się takie znaki jak na screenie: https://imgur.com/HowFgSU. Nie wydaje mi się, żebym coś sknocił w kodzie, bo nawigacja górna działa bez zarzutu. Jedyną różnicą, która może mieć z tym związek, jest ustawienie border-bottom w nawigacji bocznej, ale po usunięciu borderu dzieje się to samo. Dodam, że sprawdziłem inne przeglądarki i w Chromie i IE nie ma tego problemu, problem jest tylko na Firefoxie.

Kod html:

<aside>
			
	<a href="a.html"><div class="menu2">Nav 1</div></a>
	<a href="b.html"><div class="menu2">Nav2</div></a>
	<a href="c.html"><div class="menu2">Nav 3</div></a>
	<a href="d.html"><div class="menu2">Nav 4</div></a>
	<a href="e.html"><div class="menu2">Nav 5</div></a>
	<a href="f.html"><div class="menu2">Nav 6</div></a>
					
	<p>Miejsce na reklamę</p>
</aside>

Kod CSS:

aside
{
	float: left;
	width: 200px;
	min-height: 780px;
	text-align: center;
	background-color: #696969;
	padding: 0px 0px 10px 0px;
	margin-top: 40px;
}

aside > a >.menu2
{
	border-bottom: 1px dashed #000;
	padding: 10px;
	font-weight: 700;
	transition-property:background-color;
	transition-duration:1s;
}
aside > a >.menu2:hover
{
	background-color: #3671A3;
}

aside > a
{
	text-decoration: none;
	color: #fff;
}

aside > a:hover
{
	color: #BA121A;
}

Mam gorącą prośbę o pomoc.

Answer 1

Cześć, może być to spowodowane stylami jakie wchodzą po kliknięciu.

Aby na to zaradzić poczytaj o dwóch rzeczach:

1/ :focus {} czyli co jak dany przycisk jest nacisnięty

2/ Outline, jedna z propert css która może Ci pomóc w usunięciu tego.

Wytłumaczenie zachowania przeglądarki:

- Każda przeglądarka ma inny silnik oraz standardowe style które dodaje do stron, dlatego niektóre strony wyglądają inaczej na IE i na Chrome. Aby ujednolicić dane style często używa się plików lub po prostu kodu który takie coś robi.

Przykład poniżej:

/* Global Defaults */
 html, body {
 margin: 0px;
 padding: 0px;
 border: 0px;
 }
 body {
 font: 1em/1.25 Arial, Helvetica, sans-serif;
 }
 
 /* Headlines */
 h1, h2, h3, h4, h5, h6 {
 margin: 0;
 padding: 0;
 font-weight: normal;
 font-family: Arial, Helvetica, sans-serif;
 }
 
 /* Text Styles */
 p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {
 margin: 0;
 padding: 0;
 font: normal normal normal 1em/1.25 Arial, Helvetica, sans-serif;
 }
 blockquote {
 margin: 1.25em;
 padding: 1.25em
 }
 q {
 font-style: italic;
 }
 acronym, abbr {
 cursor: help;
 border-bottom: 1px dashed;
 }
 small {
 font-size:.85em;
 }
 big {
 font-size:1.2em;
 }
 
 /* Links and Images */
 a, a:link, a:visited, a:active, a:hover {
 text-decoration: underline;
 }
 img {
 border: none;
 }
 
 /* Tables */
 table {
 margin: 0;
 padding: 0;
 border: none;
 }
 
 /* Forms */
 form {
 margin: 0;
 padding: 0;
 display: inline;
 }
 label {
 cursor: pointer;
 }
 
 /* Common Classes */
 .clear { clear: both; }
 .floatLeft { float: left; }
 .floatRight { float: right; }
 .textLeft { text-align: left; }
 .textRight { text-align: right; }
 .textCenter { text-align: center; }
 .textJustify { text-align: justify; }
 .blockCenter { display: block; margin-left: auto; margin-right: auto; } /* remember to set width */
 .bold { font-weight: bold; }
 .italic { font-style: italic; }
 .underline { text-decoration: underline; }
 .noindent { margin-left: 0; padding-left: 0; }
 .nomargin { margin: 0; }
 .nopadding { padding: 0; }
 .nobullet { list-style: none; list-style-image: none; }

 

Są to style css które czyszczą całe style defaultowe w przeglądarkach.

Powodzenia!

Comments

Udało mi się nareszcie rozwiązać problem. Float: left siedział w złym miejscu. Zamiast w aside{ } powinien być w aside > a >.menu2{ }. Dziękuję za odpowiedź, na pewno wkrótce poczytam o focusie i outline.

Pozdrawiam.