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 Code:
background: #ffffff; Code:
margin-top: -41px; 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 |
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. |
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.]> Thanks very much for your hint. Best regards, upscho |
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.]> HTH, upscho |
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 03:18 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.