CODEWITHSUNDEEP
cssmenupositioningopera
Michael Schwartz
Michael Schwartz

Reputation: 8425

CSS Menu Looks Like Crap In Opera

ok so I've been working on coding my website Alternative Apps, for a couple days, and I tested it out in Opera, and the menu is higher than what I want it to. Looks fine in FF, and Chrome, but I can't seem to figure out how to fix it for Opera. (Haven't tested it for IE yet)

Can anybody fix the issue for me, or better yet explain to me why it's like this, and how to fix it?

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;}

Upvotes: 1

Views: 324

Answers (1)

thirtydot
thirtydot

Reputation: 228182

The problem is that you don't have a doctype, so your page is using Quirks Mode.

Add this as the very first line:

<!DOCTYPE html>

This fixes the menu in Opera, and massively improves the entire page in Internet Explorer.

Always add a doctype to new sites, no exceptions.

Upvotes: 4

Related Questions