WebKit/KHTML/Opera Browsers (Initially) Render Navigation in Wrong Place
I have a webpage over at http://www.raven.dima.neoturbine.net/ that I am working on. The top navigation renders "correctly" to the right of the site logo in IE 8, Firefox 3.6 and Dolphin Browser开发者_StackOverflow社区 for Android but not in Chrome 8 or Opera Mini for Android, where it is rendered ON TOP of the logo. Strangely, at least in Chrome, when you visit any link after landing on the website for the first time, the menu goes to the correct position for the duration of the visit to the website.
I am a little stumped as to what the issue is, as I was sure I wasn't using any controversial CSS selectors. Anyone want to point the bug out to me?
Edit: Fixed.
You have some extraneous styles which seem like you just placed them there for no particular reason. (maybe something to do with the mobile browsers?)
You have this exact CSS in your file twice, for some reason:
#header H1
{
padding: 10px 10px 30px;
display: inline;
float: left;
}
To make this work in Firefox and Chrome (and IE8), I removed these styles:
From #header h1
:
display: inline
From #nav ul
:
position: absolute
display: inline
Then, I added to #nav ul
: float: left
.
精彩评论