Member Avatar for harveylester

Hi guys,

I recently paid for a Wordpress theme, which I intend to customize extensively, but I've run into an issue that I've never come across before. I'm not a complete newbie but since I've never had this problem before, I don't know where to begin or what might be causing it, and I thought maybe you guys could help me.

When I view my site in the latest version of Opera, every time I move the mouse cursor over the header div, a top margin is created (See screenshot). Does anybody know what might be causing this and how I can fix it? It doesn't happen in Firefox, Chrome or Internet Explorer.

My URL is: http://www.projectdisobey.com

Thanks in advance!

  • 2 Contributors
  • 2 Replies
  • 113 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by harveylester

Dani AI

Generated

As pointed out and confirmed, the visual jump was caused by an element whose vertical margin affected the header layout. That symptom — a header moving when the mouse passes over it in one browser but not others — is commonly due to vertical margin collapse or a slight layout reflow triggered by a style change on hover.

Vertical margins between a parent and its first/last child can collapse into one another; browsers handle reflow and repaint timing differently, so a hover or tiny computed-style change can make the collapse appear or disappear. See MDN for a clear explanation of margin collapsing: Mastering margin collapsing.

Practical fixes that avoid removing structural markup:

  • Prevent margin collapse by making the parent establish a new block formatting context (BFC):
    .header { overflow: hidden; /* or auto */ }
  • Give the parent a non-visible border so margins don’t escape:
    .header { border-top: 1px solid transparent; }
  • Add a small padding on the parent instead of leaving the child margin to touch the parent:
    .header { padding-top: 1px; }

    Any of these will keep a child margin from pushing the parent and will be stable across browsers. Using display:inline-block or floating the child also prevents collapse but can affect layout.

Quick troubleshooting checklist:

  • In Opera dev tools, toggle suspected rules (margins, borders, overflow) to see which change removes the shift.
  • Temporarily add colored borders/backgrounds to isolate which element moves.
  • Search the stylesheet for :hover rules that add borders/margins or change display/overflow.

Don’t remove needed markup just to stop the symptom; apply one of the CSS fixes above so the layout remains semantic and cross-browser stable.

Recommended Answers

All 2 Replies

Member Avatar for teedoff

Within your header, you have another div:

<div class="top_navigation clearfix">	 </div>

In firefox, if I remove that whole line, the page moves up 5px. The div is styled with a 5px bottom-margin.

Try removing it and testing in Opera. I dont have Opera on my laptop here at home, so I cant test it. Otherwise, I dont see where a mouse hover would be causing your problem.

Member Avatar for harveylester

Teedoff: Thanks for your help but I already managed to fix the problem myself, by doing exactly the same thing that you suggested!

I appreciate the response though.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.