Zaobserwowałem dziwne zachowanie się buttonów pod Chrome. Mianowicie
mamy coś takiego (w uproszczeniu):

button {
width: 62px;
height: 0px;
padding-top: 65px;
display: block;
position: relative;
text-align: center;
overflow: visible;
}

Chciałbym aby tekst z buttona wypadł poniżej krawędzi samego buttona.
Wszędzie w/w działa z wyjątkiem Chrome i Safari. Czy wiecie o co chodzi?
Czy mam dodać gdzieś jakiś -webkit? Czego te przeglądarki nie rozumieją?

--
Pozdrawiam
Marek

do góry

W dniu poniedziałek, 28 października 2013 11:20:16 UTC+1 użytkownik Marek napisał:
> Zaobserwowałem dziwne zachowanie się buttonów pod Chrome. Mianowicie
>
> mamy coś takiego (w uproszczeniu):
>
>
>
> button {
>
> width: 62px;
>
> height: 0px;
>
> padding-top: 65px;
>
> display: block;
>
> position: relative;
>
> text-align: center;
>
> overflow: visible;
>
> }
>
>
>
> Chciałbym aby tekst z buttona wypadł poniżej krawędzi samego buttona.
>
> Wszędzie w/w działa z wyjątkiem Chrome i Safari. Czy wiecie o co chodzi?
>
> Czy mam dodać gdzieś jakiś -webkit? Czego te przeglądarki nie rozumieją?
>
>
>
> --
>
> Pozdrawiam
>
> Marek

Sprawdziłem zarówno w chrome jak i w safari i działa - może jakaś stara wersja?
http://codepen.io/anon/pen/EHvgc

do góry

W dniu 2013-11-04 08:21, c...@p...com pisze:
> Sprawdziłem zarówno w chrome jak i w safari i działa - może jakaś stara wersja?
> http://codepen.io/anon/pen/EHvgc

Ale <button> troche sie jednak rozni od <div class="button"> ;-)

--
NotBear

do góry

W dniu 2013-10-28 11:20, Marek pisze:
> Chciałbym aby tekst z buttona wypadł poniżej krawędzi samego buttona.
> Wszędzie w/w działa z wyjątkiem Chrome i Safari. Czy wiecie o co chodzi?
> Czy mam dodać gdzieś jakiś -webkit? Czego te przeglądarki nie rozumieją?

Faktycznie. Ciekawy problem.
Wyjasnienia nie znam, ale problemy z buttonami zwykle udawalo mi sie
rozwiazac przez calkowite wygaszenie stylu dla elementu <button> i
nalozenie CSS na zawartosc. Sprobuj tak:

<button>
<span>tekst pod</span>
</button>

button{
background:none;
border:none;
margin:0;
padding:0;
}
button>span {
width: 62px;
height: 0px;
padding-top: 65px;
display: block;
position: relative;
text-align: center;
overflow: visible;
}

--
NotBear

do góry

W dniu 2013-11-04 08:21, c...@p...com pisze:

> Sprawdziłem zarówno w chrome jak i w safari i działa - może jakaś stara wersja?
> http://codepen.io/anon/pen/EHvgc

No bo sprawdzałeś coś innego niż ja napisałem. Ja pisałem o buttonie o
Ty o DIVie.

--
Pozdrawiam
Marek

do góry

W dniu 2013-11-04 10:17, NotBear pisze:

> Faktycznie. Ciekawy problem.
> Wyjasnienia nie znam, ale problemy z buttonami zwykle udawalo mi sie
> rozwiazac przez calkowite wygaszenie stylu dla elementu <button> i
> nalozenie CSS na zawartosc. Sprobuj tak:

Też wygaszam style ale to nie ma wpływu. Zauważyłem, że nie wygaszasz
jeszcze overflow: visible. W przypadku chyba FF obcinało to co za niego
wyszło. Czyli jeśli zawartość ubierzemy w dodatkowy element to wtedy
zadziała?

Swoją drogą Chrome to niezły bardziew. Prędkość renderowania jak w
Windows 3.11, wybiórcza obsługa CSS 3 jak M$ robił to zanim połapał się,
że IE z rynku wypada, i co chwilę takie kwiatki.

--
Pozdrawiam
Marek

do góry

W dniu 2013-11-04 15:21, Marek pisze:
>
> Też wygaszam style ale to nie ma wpływu. Zauważyłem, że nie wygaszasz
> jeszcze overflow: visible.

Celowo. W koncu chodzilo o wypuszczenie czegos poza obrys buttona, prawda?

> Czyli jeśli zawartość ubierzemy w dodatkowy element to wtedy zadziała?

Nigdy wczesniej nie potrzebowalem wypuszczac czegos poza guzik :-) Ale
tak - ostylowanie dodatkowego elementu zamiast buttona pomoglo.


--
NotBear

do góry

W dniu 2013-11-05 10:05, NotBear pisze:
> W dniu 2013-11-04 15:21, Marek pisze:
>>
>> Też wygaszam style ale to nie ma wpływu. Zauważyłem, że nie wygaszasz
>> jeszcze overflow: visible.
>
> Celowo. W koncu chodzilo o wypuszczenie czegos poza obrys buttona, prawda?

Więc jeśli domyślnie FF ma button {overflow: hidden} i nie postąpisz tak
jak napisałem (overflow: visible), to również pod FF otrzymałbyś
obcinanie. Prawda? Możesz to sprawdzić samodzielnie.

> Nigdy wczesniej nie potrzebowalem wypuszczac czegos poza guzik :-) Ale
> tak - ostylowanie dodatkowego elementu zamiast buttona pomoglo.

Swoją drogą button to bardzo dziwny element. Nie daje się zmusić go za
pomocą CSS aby zachowywał się jak zwykły blok (zauważyłem np
niesymetryczny padding góra/dół którego poprawić się nie da - bo albo
jest dobrze pod FF albo pod IE). Z czymś jeszcze podobna jazda była.
Chyba fieldset. Zupełnie nie rozumiem intencji, dla których tak się
dzieje. W konsekwencji zaczynam stosować <div class"button"> albo <div
class="fieldset">, czego ze względów choćby semantycznych nie powinno
się robić.

--
Pozdrawiam
Marek

do góry

Marek wrote:

> Swoją drogą button to bardzo dziwny element. Nie daje się zmusić go za
> pomocą CSS aby zachowywał się jak zwykły blok (zauważyłem np
> niesymetryczny padding góra/dół którego poprawić się nie da - bo albo
> jest dobrze pod FF albo pod IE). Z czymś jeszcze podobna jazda była.
> Chyba fieldset. Zupełnie nie rozumiem intencji, dla których tak się
> dzieje. W konsekwencji zaczynam stosować <div class"button"> albo <div
> class="fieldset">, czego ze względów choćby semantycznych nie powinno
> się robić.
>
Podobnie jest z listą i <input type="file" />
Chodzi o to, że teoretycznie to są elementy zależne od systemu
operacyjnego i do ich renderowania używane są funkcje systemowe a nie
silnik przeglądarki. Jak widać przy ostylowaniu takiego elementu
zachodzą niezdefiniowane interakcje "systemowo przeglądarkowe" (bo
system jest niezdefiniowany) i efekt może przejść najśmielsze
oczekiwania.

IMHO ma to jakiś sens. Niekoniecznie użytkowy.
--
GCA/ED d s+:++ a C++ ULA P+++ L+ E--- W+++ N+++ o+ K- w+++ O+ M+ V-
PS PE++ Y-- PGP- t-- 5-- X+ !tv R b+ DI-- D+ G e++ h--- r+++ z+++*

do góry

W dniu 2013-11-05 10:38, Marek pisze:
> Więc jeśli domyślnie FF ma button {overflow: hidden} i nie postąpisz tak
> jak napisałem (overflow: visible), to również pod FF otrzymałbyś
> obcinanie. Prawda? Możesz to sprawdzić samodzielnie.

Nie wiem czy dobrze sie rozumiemy.
Overflow z definicji ma poczatkowa wartosc "visible" jesli nie zostanie
zdefiniowane inaczej w CSS przegladarki lub we wlasnym CSS. Dlatego nic
nie przestawialem w swoim przykladzie, bo nie bylo takiej potrzeby,
skoro wymagane bylo wyjscie poza granice elementu.

O ile mi wiadomo ani FF ani Chrome nie ustawiaja domyslnie overflow dla
<button>. Jesli w swoim CSS ustawie button{overflow:hidden;}, to tak,
zarowno w CH jak i FF wszystko się przytnie.

Dygresja: Chrome domyslnie dodaje kontrolkom wlasnosc -webkit-appearance
co tez warto wziac pod uwage przy redefiniowaniu wygladu kontrolek.


> Swoją drogą button to bardzo dziwny element. [...]W konsekwencji zaczynam stosować
<div class"button"> albo <div
> class="fieldset">, czego ze względów choćby semantycznych nie powinno
> się robić.

Moim zdaniem lepsza jest konstrukcja z dodatkowym elementem wewnatrz
buttona i "zniknieciem" samego buttona. Zachowuje semantykę, a
jednoczesnie daje sie stylowac bez przeszkod.


--
NotBear

do góry