Magento header jumping

Question

I have strange bug where while browsing through categories on the magento webshop header of the webshop changes height on different pages (http://shop.tvornica-snova.hr/index.php/)

Ie if you are on the homepage, and click on some of the categories the header extends for additinal 10px in height and kind of pushes the content down.

I seem to have same html structure and layout for the both homepage and categories so I cannot figure out where is the bug.

Can someone help?

Answer 1

Check out the header-top section of your markup for a normal page, and for the "jumping" page.

Normal:

<div class="logo">
    <strong>Magento Commerce</strong>
    <a href="http://shop.tvornica-snova.hr/index.php/" title="Magento Commerce" class="logo">
        <img src="http://shop.tvornica-snova.hr/skin/frontend/default/f002_yellow/images/logotvornica.png" alt="Magento Commerce">
    </a>
</div>

Jumping:

<a href="http://shop.tvornica-snova.hr/index.php/" title="Magento Commerce" class="logo">
    <strong>Magento Commerce</strong>
    <img src="http://shop.tvornica-snova.hr/skin/frontend/default/f002_yellow/images/logotvornica.png" alt="Magento Commerce">
</a>

The first one contains two references to class="logo", which has a defined rule of margin-top: -10px;. This is the case for any of your pages where the header is the closest to the top of the page - it is being pulled up by 20px

The second one is marked up slightly differently, and contains just one reference to the class - hence the 10px shift you see.