Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

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?


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Feb 22, 2009, 03:13 PM
upscho's Avatar
upscho
 
30 posts · Feb 2009
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
  #2  
Old Feb 22, 2009, 06:15 PM
Flynn's Avatar
Flynn
 
3,754 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.
  #3  
Old Feb 23, 2009, 02:31 AM
upscho's Avatar
upscho
 
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:
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
  #4  
Old Feb 26, 2009, 03:07 AM
upscho's Avatar
upscho
 
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:
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
  #5  
Old Jul 20, 2009, 04:53 AM
upscho's Avatar
upscho
 
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,
upscho
Attached Thumbnails
Click image for larger version

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

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

Bookmarks

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 11:06 PM.


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