Strange thing, Logo hopping around after clicking

Permalink
Hey there,

I am encountering a strange thing which i do not understand. I am building a site based on greekyoghurt, but I am customizing the theme a lot.

First, what I want:

A fixed header with a nav that is divided by the Logo, just like: Nav1 Logo Nav2
The Logo shall overlap the header and lap onto the following content (transparency PNG)

How I did it: (how is the markup)

1. create a div for the header, fixed-top, width 100%
2. create a div for restraining the elements to site width, width 960px, margin 0 auto
3. global area for nav1 (filled with content-stack that links to the pages)
4. global area for site titel, wrapped in div "logo" (display:inline, position: absolute, float: left)
5. div "logo" has position: absolute, and margin-left, so it stays in the middle
6. global area for nav2 (filled with content-stack that links to the pages)

So what is happening... when I click on one of the Links in the headernav, the Logo jumps to the right, aligned with nav2 and overlapping it.

When i refresh the page 2 times, the Logo is back on the position where it should be. Strange thing :)

Anybody having ideas about that :-)

 
mhawke replied on at Permalink Reply
mhawke
Is there a URL we could check out. It's pretty tough to diagnose this without seeing the real html+css
Cahueya replied on at Permalink Reply
I'll send you a PM :-)
Cahueya replied on at Permalink Reply
Still no updates, haven't figured out what is going on so far...
mhawke replied on at Permalink Reply
mhawke
Sorry, I thought I had replied to this a while ago but obviously not!

If I remember correctly, I think the issue was that you have conflicting css rules for 'on hover' on nav items to the right of the logo. Most of the rules you have for hover are not needed and I think there's a 'piling on' effect where rules are being applied on top of the basic rules.

I'll have another look at it and try to post my findings.