> Marc, I have no idea of what you are planning with the transparencies, but i've made a RealSimpleSample of how i approach headers in general- starting in FF, then making what ever hacks are needed for ie6 in a separate css http://www.roxstyle.com/projects/testing/test-080820.html
i general i try to stay away from absolute positioning - unless necessary. In the sample i have changed positioning to floats that can be set with margins and padding and achieve similar results in FF, IE7, and Safari. And i always start out with Eric Meyer global reset http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ as this will give the browsers a more equal starting point. Hope this makes sense. Also noticed that you had the #logo wrapping everything. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Test</title> <style type="text/css"> #wrapper { margin: auto; margin-top: 10px; width: 97%; max-width: 950px; background: #eee; <!-- background: transparent url(../images/logo3.png) no-repeat left top; --> } #header { position: relative; height: 145px; background: transparent; overflow: hidden; /*to wrap and clear before next content container*/ } #logo { position: relative; float: left; width: 300px; height: 80px; margin: 0 0 0 0; /*use margins and padding to position*/ padding: 0 0 0 0; background: #ccc; overflow: hidden; <!-- background: url(../images/cool.png) no-repeat 0 0; --> } #logo h1 { float: left; width: 300px; height: auto; font-style: italic; color: #FF0033; font-size: 24px; background: yellow; overflow: hidden; } #quote { float: right; width: 200px; height: auto; margin: 10px 20px 0 0; /*use margins to offset from logo and banner*/ padding: 4px; /* background: url(../images/shipping.png) no-repeat 0 0;*/ background: #999; z-index: 1000; } #banner { float: right; width: 160px; height: 40px; margin: 0 0 0 0; /*use margins to offset from logo*/ padding: 0 0 0 0; background: #666; <!-- background: url(../images/places.png) no-repeat left top; --> } p { margin: 0; padding: 4px 0; } #wrapper, #logo, #banner, #quote, #header{ behavior: url(iepngfix.htc)} </style> </head> <body> <div id="wrapper"> <div id="header"> <div id="logo"> <h1>Site Name.com</h1> </div> <div id="banner">banner</div> <div id="quote"><p>Quote: Lorem ipsum dolor sit amet, consectetur adipisicing elit.<p></div> </div> </div> </body> </html> > Message: 23 > Date: Sun, 17 Aug 2008 09:05:32 -0700 > From: Marc Hilt <[EMAIL PROTECTED]> > Subject: [css-d] iepng fix spacing > To: [email protected] > Message-ID: <[EMAIL PROTECTED]> > Content-Type: text/plain; charset="us-ascii"; format=flowed > > This is my first post, I did try to find the answer through the > archives > but came up empty. > I am attempting to use some transparent png graphics, when I use the > behavior to get IE6 (I do not have 7 on my machine) to handle the > transparent png's IE shifts everything around, for some reason it > ties the > #quote to the H1. I came up with the underscore fix to make > everything line > up almost as close as in firefox. > The question is should I proceed this way, I am not sure of the pit > falls. > Thank you for your time. > Marc > #wrapper{ > margin:auto; > margin-top:10px; > width:97%; > max-width:950px; > background: transparent url(../images/logo3.png) no-repeat > left top; > } > /*************head***********************/ > #header > {height: 145px; background:transparent; > } > #logo { > position: relative; > width: 70px; > height: 80px; > background-image: url(../images/cool.png); > background-repeat: no-repeat; > } > > #logo h1 { > position: absolute; > left: 50px; > top: 70px; > width: 300px;_width:800px; > height: auto; > font-style:italic; color: #FF0033; font-size:24px; > } > > #quote { > position: absolute; > left: 500px; > _left:550px; > top: 20px;_top: -10px; > width: 200px; > height: 50px; > background: url(../images/shipping.png) no-repeat; > z-index: 1000; > } > > #banner { > position: absolute; > right: -220px;_right: -120px; > top: 10px;_top:-95px; > width: 160px; > height:40px; > background: url(../images/places.png) no-repeat left top; > } > #wrapper, #logo, #banner, #quote, #header{ behavior: > url(iepngfix.htc)} > /*********************end head region, begin top > nav******************/ > > HTML > <div id="header"> > <div id="logo"> > <h1>Site Name.com</h1> > <div id="quote"></div> > <div id="banner"></div> > </div></div> > > > > > End of css-d Digest, Vol 69, Issue 14 > ************************************* ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
