Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

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

Old Feb 22, 2009, 03:13 PM
upscho's Avatar
30 posts · Feb 2009

I'm using the header area with two bars between the logo area and the image:
%pages %logo %bar1 %bar2 %image
Horizontal bar 1 with
background: #ffffff;
border-top: solid 4px #374C92;
margin-top: -45px;
margin-bottom: 41px;
position: relative;
z-index: 600;
and horizontal bar 2 with
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,
Old Feb 22, 2009, 06:15 PM
Flynn's Avatar
3,768 posts · Oct 2008
Munich, Germany
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.
Old Feb 23, 2009, 02:31 AM
upscho's Avatar
30 posts · Feb 2009
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:
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
Works like a charm! (My description may help others.)

Thanks very much for your hint.

Best regards,
Old Feb 26, 2009, 03:07 AM
upscho's Avatar
30 posts · Feb 2009
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:
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="/pngfix.js"></script>
Now the solution works for page pages as well as for category pages.

Old Jul 20, 2009, 04:53 AM
upscho's Avatar
30 posts · Feb 2009
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,
Attached Thumbnails
Click image for larger version

Name:	IE6-TransparencyScreenShot.png
Views:	1066
Size:	65.4 KB
ID:	195  Click image for larger version

Name:	IE6-VersionInfo.png
Views:	1061
Size:	21.3 KB
ID:	196  


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
Horizontal Bars & Other Stuff too NoVegans Header configuration & styling 5 Apr 12, 2010 06:40 AM
How do I add spacing (padding?) between the horizontal bars and header image? ftkeeper Header configuration & styling 0 May 16, 2009 11:41 PM
centering the horizontal bars interage Header configuration & styling 2 Apr 25, 2009 08:45 AM
Bad Post Header Links in 3.3 BradBrown Atahualpa 3 Wordpress theme 4 Mar 30, 2009 09:00 PM
Text/images between horizontal bars in header? robertayers Header configuration & styling 5 Mar 14, 2009 09:24 AM

All times are GMT -6. The time now is 10:57 PM.

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