Negative margin for horizontal bars in header - good or bad?

upscho · #1 Feb 22, 2009, 03:13 PM

Hi,

I'm using the header area with two bars between the logo area and the image:

Code:

%pages %logo %bar1 %bar2 %image

Horizontal bar 1 with

Code:

background: #ffffff;
border-top: solid 4px #374C92;
margin-top: -45px;
margin-bottom: 41px;
position: relative;
z-index: 600;

and horizontal bar 2 with

Code:

margin-top: -41px;
margin-bottom: 0px;
background: #ffffff;
border-top: solid 41px #E8FFFA;
position: relative;
z-index: 300;

The z-index of the logo is in between the bars. So the 2nd bar is behind the logo, the 1st bar is in front of the logo.

The two stripes normally belong to the logo. But by cutting them from the logo file and adding them through the bars they dynamically cover the whole header area even if the user changes the window size (see http://baederlandschaft-waldkirch.de).

My question:

Is the usage of negative margins for the bars a "dirty trick" and do I have to fear that some browsers won't display it correctly? Or that this possibility has gone after the next update of Atahualpa? Or is it normal practice?

Best regards,
upscho