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;}
The problem is that you don’t have a doctype, so your page is using Quirks Mode.
Add this as the very first line:
This fixes the menu in Opera, and massively improves the entire page in Internet Explorer.
Always add a doctype to new sites, no exceptions.