złe wyświetlanie strony

Question

Dlaczego ta strona jest inaczej wyświetlana w chrome, a inaczej w operze. W chrome jest dziwnie przesunięta w lewo, a w operze jest wszystko w porządku.

 

body
{
        background-color:#303030;
        color:#ffffff;
        font-family: 'Russo One', sans-serif;
        font-size:20px;
        margin:o !important;
}
.imga
{
    width:200px;
    height: 200px;
    margin-left:391px;
}

h3
{
    color:#006400;
    text-align:center;
    font-size:50px;
}
.wrapper
{
 width:100%;    
}

.header
{
    width: 100%;
    padding: 20px 0;
}

.logo
{

 width: 450px;
 margin-left: auto;
 margin-right: auto;
 font-size: 60px;
 text-align: left;
 margin-top:50px;
 

}
.nav
{
    width: 100%;
    padding: 10px 0;
    text-align:center;
    background-color: #c34f4f;
    border-top: 1px solid#751b1b;
    border-bottom: 1px solid#751b1b;

}

.content
{

    width:1000px;
    margin-left:auto;
    margin-right:auto;
    text-align: justify;
    padding-top:10px;
    
}
.socials
{
    width: 100%;
    text-align: center;
    background-color: #292929;
    
}
.socialdivs
{
    width:1000px;
    margin-left: auto;
    margin-right: auto;
    
}

.fb
{
    float:left;
    width:250px;
    height: 155px;
    
    
}
.fb:hover
{
    background-color: #4668b3;
    
}

.yt
{
    float:left;
    width:250px;
    height: 155px;
    
    
}
.yt:hover
{
    background-color:#d94348;
}

.alink
{
    display:block;
    color:white;
    text-decoration:none;

}
.tw
{
    float:left;
    width:250px;
    height: 155px;
    
    
}

.tw:hover
{
    background-color:#3095d3;
}
.gplus
{
    float:left;
    width:250px;
    height: 155px;
    
    
}

.gplus:hover
{
    background-color:#d95333;
}
.footer
{
    text-align: center;
    background-color:#222222;
    padding:30px;
    
}

.img
{
    
    width:160px;
    height: 130px;
    margin-left:  auto;
    margin-right: auto;
    
}
.sticky
{
    width: 100%;
    position:  fixed;
    left: 0;
    top: 0;
    z-index: 100;
    
}
ol
{
    padding:0;
    margin:0;
    list-style-type:none;
    font-size: 18px;
    height:35px;
    line-height:200%;
    display:inline-block;
}

ol a
{
    color:white;
    text-decoration: none;
    display:block;
    
    
}
ol>li
{
    float:left;
    width: 150px;
    height:40px;
    border-right: 1px dashed# 751b1b;
    
}
ol>li:first-child
{
border-left :1px dashed#751b1b;
}
ol>li:hover
{
    background-color:#cf6969;
    
}
ol>li:hover>a
{
color:#451717;
    
}
ol>li>ul
{
    list-style-type: none;
    padding:0;
    margin:0;
    height:40px;
    display: none;
}
ol>li:hover>ul
{
    display: block;
    
}

ol> li> ul > li
{
    background-color:#cf6969;
    position:relative;
    z-index:100;
    border-top: 1px dashed#751b1b;
}
ol> li> ul > li:hover
{
    background-color:#c34f4f;
    
}
ol> li> ul > li:hover>a
{
    color:#451717;
    
}

Comments

Może dlatego, że masz margin:o !important; (mi to wygląda na "o" a nie na zero).
Przy okazji proszę wyświetlać kod w specjalnie przygotowanych do tego narzędziu (code snippet)

---

dalej jest tak samo, jeszcze jakieś pomysły?

---

Nie dostrzegam w Twoim kodzie stylu, który by mógł coś psuć (choć trudno to ocenić bo nie widzę kodu html w ogólnie strony). Spróbuj pokazać nam tą stronę, a jak nie da rady to użyj narzędzi developerskich np. w Chromie kliknij F12 i zbadaj poszczególne elementy strony i ich style css, powinno się wyjaśnić, dlaczego strona (bądź jej elementy uciekają w lewo)

---

link prosze zobaczyc 

---

Z całym szacunkiem, ale mi się w Firefoxie, Chromie i Operze strona wyświetla tak samo, nie widzę przesunięcia. Spróbuj może wyczyścić cache przeglądarki...

---

ale masz zielony napis na srodku strony?

---

tak mam zielony napis, i jest on w takim samym położeniu w tych przeglądarkach
nawet internet explorer wyświetla prawidłowo...

Answer 1

Różne przeglądarki w różny sposób renderują stroni internetowe. Powodem może być lekko inna interpretacja kodu CSS lub po prostu predefiniowane style nadawane przez przeglądarkę.

Warto dopiąć do projektu coś takiego jak  CSS reset.

Powinno rozwiązać to problem, przynajmniej jeśli chodzi o predefiniowane style.

Comments

Jeśli piszesz zgodnie ze standardami W3C to nie powinno być problemu, czy używasz takiej a takiej przeglądarki. Oczywiście nie mówię tu o przeglądarkach "archaicznych" typu IE 9 i niżej

---

i wpisanie tych dwóch linijek powinno rozwiązać problem z różnym wyświetlaniem przez przeglądarki?

---

O których linijkach mówisz?

O tych?

/* CSS Reset */
#element { margin:0; padding:0; font-size:100%; line-height:1; }

...
/* #element rules: */
#element { margin:5px 0 10px; font-size:13px; line-height:1.5; }

Jeśli tak to niestety

Poszukaj w necie gotowych plików CSSreset. To je trzeba dopiero dopiąć do projektu

---

Nie szukam gotowych arkuszy. Uczę się dla siebie i skopiowanie czegoś nie daje mi żadnej satysfakcji.