I just dont think thats the way to do it, if not that i just don’t like the way i did it. For example if you remove **position:relative**(I dont even know what it means here ..) from **#header h1** logo disappears and goes behind the nav .. Also if you remove margin-top:-100px from **.navigacija** you will see “behind the scenes”.
So can you gives give me a solution to do it better or if you can do it in codepen or something.
I wish you were right but for example if I click on logo in Firefox i get to see this outline[ PIC](http://i.imgur.com/BHpchGi.jpg “PIC”) (orange dotted )and to me that suggest something isn’t right. (this is caused by text indent probably ) but still ..
As you can see, it’s just adding two lines—since display: inline-block; doesn’t work in IE7 or below, we set display: block; with a browser hack that’ll only target IE7 and below. Then zoom: 1; triggers hasLayout and lets the element behave as if it’s inline-block (oversimplified, I could never fully wrap my head around IE and hasLayout).
@Merri, zoom: 1; is needed to even make the width register in IE7, actually. This is because we’re telling IE7 to render the element as inline, and inline elements can’t have set width’s unless they’re positioned (which takes them out of the flow, and thus they become block-level). Triggering hasLayout does this because it makes the element responsible for rendering itself and its children. This combined with a set width, allows something much like display: block;.