eGospodarka.pl
eGospodarka.pl poleca

eGospodarka.plGrupypl.comp.wwwCSS - Niedostępne buttony pod FFCSS - Niedostępne buttony pod FF
  • Path: news-archive.icm.edu.pl!agh.edu.pl!news.agh.edu.pl!newsfeed2.atman.pl!newsfeed.
    atman.pl!.POSTED!not-for-mail
    From: Marek <p...@s...com>
    Newsgroups: pl.comp.www
    Subject: CSS - Niedostępne buttony pod FF
    Date: Tue, 05 Nov 2013 23:45:06 +0100
    Organization: ATMAN - ATM S.A.
    Lines: 57
    Message-ID: <l5bsdo$va0$1@node2.news.atman.pl>
    NNTP-Posting-Host: 89-69-209-185.dynamic.chello.pl
    Mime-Version: 1.0
    Content-Type: text/plain; charset=UTF-8; format=flowed
    Content-Transfer-Encoding: 8bit
    X-Trace: node2.news.atman.pl 1383691513 32064 89.69.209.185 (5 Nov 2013 22:45:13 GMT)
    X-Complaints-To: u...@a...pl
    NNTP-Posting-Date: Tue, 5 Nov 2013 22:45:13 +0000 (UTC)
    User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:24.0) Gecko/20100101
    Thunderbird/24.1.0
    Xref: news-archive.icm.edu.pl pl.comp.www:402486
    [ ukryj nagłówki ]

    Zrobiłem 2 przyciski po lewej i prawej stronie ekranu:

    <button id="switchLeft"></button>
    <button id="switchRight"></button>

    Ponieważ (chyba) nie da się elementu wypozycjonować tak aby jego środek
    wypadł pośrodku ekranu (top: 50% umieści górną krawędź elementu pośrodku
    a nie środek) to wymyśliłem obejście w postaci zmniejszenia do zera
    buttona i umieszczenie w nim pseudoelementu przesuniętego o połowę
    wysokości. Działa świetnie pod IE i Chrome... ale nie pod FF. FF
    renderuje ten element poprawnie ale nie da się na nim kliknąć i nie jest
    generowane :hover. Czy da się jakoś zmusić tą przeglądarkę bez
    zastępowania pseudoelementu - elementem?

    Poniżej okrojony CSS z niepotrzebnych do rozważań elementów.


    #switchLeft, #switchRight {
    width: 0;
    height: 0;
    position: fixed;
    left: 0;
    top: 50%;
    padding: 0;
    margin: 0;
    overflow: visible;
    background-color: transparent;
    display: none;
    }

    #switchLeft:hover, #switchRight:hover {
    ...
    }

    #switchLeft:before, #switchRight:before {
    display: block;
    content: "";
    width: 32px;
    height: 204px;
    position: absolute;
    top: -102px;
    left: 0;
    cursor: pointer;
    }

    #switchRight {
    left: auto;
    right: 32px;
    }

    #switchRight:before {
    ...
    }

    --
    Pozdrawiam
    Marek

Podziel się

Poleć ten post znajomemu poleć

Wydrukuj ten post drukuj


Następne wpisy z tego wątku

Najnowsze wątki z tej grupy


Najnowsze wątki

Szukaj w grupach

Eksperci egospodarka.pl

1 1 1

Wpisz nazwę miasta, dla którego chcesz znaleźć jednostkę ZUS.

Wzory dokumentów

Bezpłatne wzory dokumentów i formularzy.
Wyszukaj i pobierz za darmo: