Having some trouble with Opera not displaying my HTML5 site correctly. Everything looks good in Safari, Chrome, IE9, Firefox 3.5+ and more. Wondering if anyone has encountered this before and found a solution. Here's the breakdown of my setup:
In the main directory, there's a folder named fonts containing all font files along with a stylesheet called stylesheet.css:
@font-face {
font-family: 'LeagueGothicRegular';
src: url('League_Gothic-webfont.eot');
src: url('League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
url('League_Gothic-webfont.woff') format('woff'),
url('League_Gothic-webfont.ttf') format('truetype'),
url('League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
font-weight: normal;
font-style: normal;
}
The homepage is linking to this stylesheet as follows:
<link rel="stylesheet" href="fonts/stylesheet.css" type="text/css"/>
I have a navigation menu structured like this:
<nav>
<div class="main_nav">
<div class="nav_button">
<ul>
<li class="red"><a href="index.htm">HOME</a>
<ul>
<li><a href="about.htm">ABOUT</a>
<ul>
<li><a href="history.htm">History</a></li>
<li><a href="management.htm">Management</a></li>
</ul>
</li>
</ul>
</li>
</ul>
...
</div>
</div>
</nav>
The CSS styles for the navigation menu are stored in another file like so:
.nav_button {height:110px; margin:0px 1px 0px 0px; font: 34px 'LeagueGothicRegular', Arial, sans-serif; letter-spacing: 0; line-height:34px; float:left;}
.nav_button ul {
margin: 0px 0px 0px 0px;
padding: 0px;
display:block;
float: left;
position: relative;
list-style: none;
cursor:pointer;
}
.nav_button ul li {
margin: 0px 0px 0px 0px;
padding: 0px;
float: left;
position: relative;
list-style: none;
}
All works smoothly on other browsers except for Opera 11.x where it's failing to render properly. Any suggestions would be highly appreciated!