Sticky menu pozycjonowanie - Chrome vs Firefox

0

Zdarzył mi się trywialny ale dość irytujący problem z wyglądem strony. Mimo wielu prób nie udało się uzyskać zadowalającego efektu. Chrome wyświetla moją stronę niepoprawnie.

#top_nav {
    font-family: 'ubuntumedium';
    text-transform: uppercase;
    font-size: 1em;
    width: 100%;
    **position: fixed;**
    z-index: 99;
    background-color: rgba(0, 102, 102, 0.7);
    border-bottom: 2px solid white;
}
.dzielacz_menu {
    clear: both !important;
    **position: absolute;**
}
header {
    height: 300px;
    overflow-x: hidden;
    overflow-y: hidden;
    border-bottom: 3px solid white;
    margin: 0;
    padding: 0;
    top: 0;
}
<nav id="top_nav">
        <!-- ciało nawigacji -->    
 </nav>
 <br class="dzielacz_menu" />
 <header>
            <img src="img/banner10.jpg" alt="banner"/>
 </header>

W FF pomogło dodanie znacznika br z pozycjonowaniem ** absolute**, Chrom tego nie uznaje.

0

wrzuć to na jakiś edytor online, albo daj sznurka do strony, na pewno rzuca się na oczy pomieszanie polskich nazw klas, !important, no i klasa w
;) niby można, ale po co...

0

cecherz.pl - nazwy klas są okej. a strona jeszcze nie jest jeszcze ukończona, wiem że jest bałagan (ale wszystko w swoim czasie pierw musi w miarę być działające) w FF wyświetla menu zgodnie z moim założeniem w Chrome robi odstęp od góry. jestem wdzięczny za wszelkie sugestie, ale obecnie sen z powiek spędza mi właśnie owe pozycjonowanie paska :) dzięki.

0

podałem ci co masz zrobić, nie mecz się z fixed i absolute, użyj stworzonego do tego position:sticky; Według tego co podesłałem w drugim linku działa w każdej nowej przeglądarce.

0

u mnie na Chrome iFF sypie błędami:
7x https://onedrive.live.com/log (Not Found)
Metoda getPreventDefault() jest przestarzała. Należy używać defaultPrevented.

0

@Pangeon: nie wiem co ty kombinujesz z tym br, IMHO to jakaś pomyłka i lepiej usuń.
A twój problem wynika z zupełnie czego innego - masz na top_nav w background-color podany kolor z przezroczystością... Więc ci spod spodu przebija tło po prostu. Zmień

background-color: rgba(0, 102, 102, 0.7);

na:

background-color: rgb(0, 102, 102);

EDIT
BTW jak zrobiłam temu twojemu br'owi display: none, to zaczęło dobrze działać też z przezroczystością.

1 użytkowników online, w tym zalogowanych: 0, gości: 1