2009-09-08 13 views
5

używam lepką stopkę jak opisano w:Link w lepkiej stopce nie klikać w Firefoksie i Chrome

mam pkt z linkiem, który chcę być na dole strony, więc umieściłem go w .footer.

Problem polega na tym, że linku nie można kliknąć w przeglądarce Firefox 3.5.2 i Chrome, jest za .push. Działa w IE7 i IE8, ale myślę, że to niewiele mówi.

Bawiłem się z z-indeksami, ale to nie działa. Nawiasem mówiąc, potrzebuję pozycji: względna w #page, aby ustawić pewne rzeczy wewnątrz tego diva.

Czy istnieje sposób na utworzenie linku w .footer klikalny we wszystkich przeglądarkach?

Odpowiednie części kodu:

css

html, body { 
    height: 100%; 
} 
#page { 
    width: 962px; 
    text-align: left; 
    min-height: 100%; 
    /* sticky footer part */ 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -90px; 
    /* end sticky footer */ 
    position: relative; 
} 
/* sticky footer part */ 
.push, .footer { 
    height: 90px; 
} 
.push { 
} 
.footer { 
    background: #181f18 url(../images/background-top.png) no-repeat center bottom; 
} 

html

<div id="page"> 
    <div id="wrapper"> 
    <div id="contents">bla bla</div> 
    </div> 
    <div id="footer">bla bla</div> 
    <div class="push"></div> 
</div> 
<div class="footer"> 
    <p><a href="http://www.some-site.com/">Some Text</a></p> 
</div> 

Odpowiedz

9

rozwiązany dodanie świetnym miejscu: względne i Z indeksów zrobił :

.push, .footer { 
    height: 90px; 
    position: relative; 
} 
.push { 
    z-index: 9000; 
    position: relative; 
} 
.footer { 
    background: #181f18 url(../images/background-top.png) no-repeat center bottom; 
    z-index: 9999; 
    position: relative; 
} 
+2

Być klas naciśnięciem i stopki kompatybilne z różnymi przeglądarek muszą być również położenie w stosunku do z-index uznawane. –

+0

Proszę zaktualizować swoją odpowiedź komentarzem Austina. Naprawdę zaoszczędziło mi to dużo czasu. –

+0

@Johnny_D Dobry punkt, dodałem go. – jeroen

1

Miałem podobny problem w przeglądarkach webkit. Ustawienie wskaźnika lub pozycji Z nie rozwiązało problemu, ale po ustawieniu -webkit-transform: translate (0,0); przycisk jest ponownie klikalny.

0

Popraw mnie, jeśli się mylę, ale myślę, że powinieneś dodać wartość ujemną dla indeksu z, który wypycha go z powrotem, umożliwiając przycisk łącza.

Ten pracował dla mnie

.footer, .push { 
    height: 4em; 
    position: relative; 
    width: 90%; 
    margin: 0 auto; 
    z-index: -9000; 
} 
Powiązane problemy