Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   Negative margin for horizontal bars in header - good or bad? (http://forum.bytesforall.com/showthread.php?t=500)

upscho Feb 22, 2009 03:13 PM

Negative margin for horizontal bars in header - good or bad?
 
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

Flynn Feb 22, 2009 06:15 PM

Negative margins may cause issues in IE6 under certain conditions, but usually they should work.

Alignment-wise your site looks o.k. in IE6 but you should add a IE6 PNG transparency fix for those header images.

upscho Feb 23, 2009 02:31 AM

Hi Flynn,

I've tested my pages only with Firefox3 and IE7, so I was not aware that there is a problem with PNG transparency in versions of IE prior to 7. After reading your posting I tested this behaviour in IE6. In fact all transparent sections were shown in gray. :(

I then searched the Internet and chose the solution described here. I only had to put a JavaScript file in the webpage's root directory, set file attributes to 644 and added the following lines into the section "HTML inserts: Header" of Atahualpa options:
Code:

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

Works like a charm! :) (My description may help others.)

Thanks very much for your hint.

Best regards,
upscho

upscho Feb 26, 2009 03:07 AM

One slight correction to my last posting.

I noticed that the described solution only worked for pages that I selected via the page menu bar. In case of selecting a page from the category menu bar the background of the PNG picture still was gray in IE6.

Seems that the current directory is different between page pages and category pages. Because adding a slash / as a prefix for pngfix.js helped:
Code:

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="/pngfix.js"></script>
<![endif]-->

Now the solution works for page pages as well as for category pages.

HTH,
upscho

upscho Jul 20, 2009 04:53 AM

2 Attachment(s)
I've tried the solution for the IE6 transparency with Atahualpa 3.4.2:

DONE but not tested: Add IE6 PNG transparency fix.

by disabling my solution which is described in this thread (I removed the js file and deleted the lines in "HTML inserts: Header".)

I'm sorry. But I cannot confirm that the bug is solved. (At least this way. My solution works.) The transparent areas look gray. I used IE 6.0.2900.2180.

What was done to fix the bug? Wouldn't it be an option to solve this as in the solution I use?

Best regards,
upscho


All times are GMT -6. The time now is 06:54 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.