Nowy button to action nie działa poprawnie (CSS)

Jakim2400 · 30 Listopad 2018 13:19

Serwus!

Napisałem swój pierwszy przycisk. Jednak nie chce wyświetlać się poprawnie. Nie ma tej czarnej obwódki. :< Działać normalnie działa tylko wyswietla sie sam napis. //

<a href="#" class="SSS">POZNAJ MNIE LEPIEJ</a>

<style type="text/css">
.SSS {
	background-color:#ffffff;
	-webkit-border-top-left-radius:0px;
	-moz-border-radius-topleft:0px;
	border-top-left-radius:0px;
	-webkit-border-top-right-radius:0px;
	-moz-border-radius-topright:0px;
	border-top-right-radius:0px;
	-webkit-border-bottom-right-radius:0px;
	-moz-border-radius-bottomright:0px;
	border-bottom-right-radius:0px;
	-webkit-border-bottom-left-radius:0px;
	-moz-border-radius-bottomleft:0px;
	border-bottom-left-radius:0px;
text-indent:0px;
	border:3px solid #000000;
	display:inline-block;
	color:#000000;
	font-family:Trebuchet MS;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
height:57px;
	line-height:57px;
width:300px;
	text-decoration:none;
	text-align:center;
}.SSS:hover {
	background-color:#feca2f;
}.SSS:active {
	position:relative;
	top:1px;
}</style>

krystian3w · 30 Listopad 2018 13:21

Dziwne, ma czarne obramowanie: https://jsfiddle.net/wfckdy3n/

Jakim2400 · 30 Listopad 2018 13:23

Tzn? Coś nie tak w kodzie?

krystian3w · 30 Listopad 2018 13:23

Coś nie tak w kodzie?

Jak dla mnie nie.

Tylko bym maksymalnie uprościł że ma być kwadratowy do border-radius: 0px; *, jak coś powoduje, że niby jest zaokrąglony.

Jakby kod WordPressa / bloga usuwał obramowanie.

* - raczej masz już minimalną ilość odsłon z:

Chrome 4,
Opera 10.1,
Safari 4,
Firefox 3.6,
IE 8,
Android 2.1.

Jakim2400 · 30 Listopad 2018 13:34

Usunąłem te zaokrąglenia i dałem: border-radius: 0px;
efekt się nie zmienił. :<

krystian3w · 30 Listopad 2018 13:36

border: 3px solid #000000 !important;

https://jsfiddle.net/wfckdy3n/2/

Jak nie zadziała, to by trzeba poszukać w CSS-ach co nadpisuje obramowanie.

Jakim2400 · 30 Listopad 2018 13:40

działa! Jednak jest dysproporcja miedzy górą a dołem. Jak to zniwelować?

krystian3w · 30 Listopad 2018 13:42

padding: 0 !important; dla nowego buttona.

https://jsfiddle.net/wfckdy3n/3/

Trochę dziwne, że coś ci ukrywa na siłę obramowanie i dodaje jakiś odstęp dla linków od góry.

Jakim2400 · 30 Listopad 2018 13:45

wciąż jest dysproporcja. Hmm…

krystian3w · 30 Listopad 2018 13:54

Zamień na próbę na padding-top: 0 !important;

https://jsfiddle.net/wfckdy3n/4/

Nie wierzę, by element miał jakąś transformacją * nadawaną wielkość / wysokość (są takie wysuwane boxy co na 10 sposobów rezerwują miejsce nie używając height czy width).

* - przykłady z brzegu:

transform: matrix(1, 0, 0, 1, -380, 0);
transform: translate(-380px,0); transform: translate3d(-380px,0,0);

Jakim2400 · 30 Listopad 2018 13:57

wciąż tak samo. Kurcze… sam nie wiem już gdzie szukać przyczyny.

krystian3w · 30 Listopad 2018 14:01

height: 57px !important;
line-height: 57px !important;

I może bez resetowania odstępu - skoro nic nie daje.

https://jsfiddle.net/wfckdy3n/5/

Jakim2400 · 30 Listopad 2018 14:06

bez zmian. może jakiś stary przycisk w css to nadpisuje?

krystian3w · 30 Listopad 2018 14:08

Jak jest ustawiony pod a {....} lub .SSS { ... } to może.

Jak się wstydzisz wystawiać stronę lub robić kryptoreklamę to może na PW wyślij link jak widać to gdzieś publicznie na jakimś blogu?

https://forum.dobreprogramy.pl/my/messages

Jest jeszcze opcja, że to jakiś zgrzyt pozycjonowania relatywnego, ale to strzał na ślepo .

Jakim2400 · 30 Listopad 2018 14:28

poszło pw

krystian3w · 30 Listopad 2018 14:41

No to coś gryzie się z height: 57px;, jak je dezaktywuje w konsoli developera to jest już ładnie wyśrodkowane.

Wkleiłem go na siłę po body (stąd nad paskiem z mailem) i w sekcje Pasja! - w obu wyłączenie wysokości pomaga.

Jakim2400 · 30 Listopad 2018 14:55

Faktycznie! Teraz wszystko gra! Dziękuję za dociekliwość i pomoc!

krystian3w · 30 Listopad 2018 14:56

Szkoda tylko, że tak ręcznie nie dotarłem co blokuje obramowanie, że trzeba je wymuszać - użyłem kodów z pierwszego posta.

Jakim2400 · 30 Listopad 2018 14:58

Wiem, wiem… a powiedz dlaczego jak w wordpresie dopisuję na koniec pliku css swój button to go nie czyta? Jak zrobię to przez wtyczkę nadpisującą to wszystko działa.

p.spaczek · 30 Listopad 2018 15:25

To że dopiszesz na koniec pliku css w WP nie znaczy że jest to ostatni załadowany plik css i że po nim nie pojawia się inny css który nadpisuje Twój