Меню CSS выглядит как дерьмо в Opera - PullRequest
Новая
       21

Меню CSS выглядит как дерьмо в Opera

1 голос
/ 06 сентября 2011

хорошо, так что я работал над кодированием моего сайта Альтернативные приложения , в течение пары дней, и я протестировал его в Opera, и меню выше, чем я хочу. Выглядит хорошо в FF и Chrome, но я не могу понять, как это исправить для Opera. (Еще не проверял его на IE)

Кто-нибудь может решить эту проблему для меня, или еще лучше объяснить мне, почему это так и как это исправить? 

div#topnav {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:25px;
    background-image:-webkit-linear-gradient(#00fcff, #000);
    background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#00fcff), to(#000));
    background-image:-moz-linear-gradient(#00fcff, #000);
    background-image:-o-linear-gradient(#00fcff, #000);
    font-family:Arial;
    font-size:12px;
    color:silver;
    text-align:right;
    z-index:1000;
    box-shadow:0px 0px 16px #000;
    text-shadow:0px 0px 2px #000;}

div#topnav button {
    cursor:pointer;
    font-family:Arial;
    font-size:12px;
    color:silver;
    text-decoration:none;
    border:0px;
    height:25px;
    background-color:transparent;
    text-shadow:0px 0px 2px #000;
    transition:all 250ms ease-in-out;
    -webkit-transition:all 250ms ease-in-out;
    -moz-transition:all 250ms ease-in-out;
    -o-transition:all 250ms ease-in-out;
    -ms-transition:all 250ms ease-in-out;}

div#topnav button:hover {
    color:#fff;
    background-color:rgba(0, 0, 0, 0.2);}

div#topnav button:active {
    background-color:rgba(0, 0, 0, 0.5);}

ul#menu {
    list-style:none;}

ul#menu li {
    display:block;
    float:right;
    margin-top:-14px;
    padding-right:10px;
    cursor:pointer;}

1 Ответ

4 голосов
/ 06 сентября 2011

Проблема в том, что у вас нет типа документа, поэтому ваша страница использует Режим причуд .

Добавьте это как самую первую строку: 

<!DOCTYPE html>

Это исправляет меню в Opera, а массово улучшает всю страницу в Internet Explorer.

Всегда добавлять doctype на новые сайты, без исключений.

...