djp1988 Posted June 7, 2008 Share Posted June 7, 2008 Hello, i have a problem,two actually, I have made a template for a site and I'm just trying to get it looking right in IE, my firt problem is IE 6 not displaying the transparent .png edges correctly, and the other problems:1. IE 6 is not displaying the transparent png correctly and has put my middle div out of line with the top and bottom div's2. IE 7 has also displayed my middle div out of line3. IE 8 looks good :| Surprised because not so long ago this was a rubbish browser... here is my html for the layout: <div id="one"> </div><div id="main"><div id="content"> <h1>Titre</h1><p>Paragraphe</p><h2>Titre</h2><p>Paragraphe</p><h3>Titre</h3><p>Paragraphe</p> </div></div><div id="two"> </div> My CSS: body { background-image:url(Files/bg.jpg); }#main { background-image:url(Files/middle.png); background-position:center; background-repeat:repeat-y; width:907px; margin-left:auto; margin-right:auto; }#one { background-image:url(Files/top.png); background-position:center; background-repeat:no-repeat; line-height:169px; margin-top:0px; margin-bottom:0px; }#two { background-image:url(Files/bottom.png); background-position:center; background-repeat:no-repeat; line-height:47px; }#content { padding-left:20px; } IE 6 screenshot:IE7 screenshot:IE 8 screenshot:So is there a bypass for IE 6 way of handling .png's ?And why is my middle div not in line ?It appears there is a javascript code to correct IE 6 transparency, but it doesn't work for the css background-image png's see http://homepage.ntlworld.com/bobosola/pnginfo.htmthanks Link to comment Share on other sites More sharing options...
BlueDigit Posted June 8, 2008 Share Posted June 8, 2008 Unless I should just stop posting…One way I know of is to add this… body{text-align: center;} and then for anything that you don't want centered, add this: #name1, #name2, #name3{text-align: left;} Though, if you plan on having a lot of content where you'd have to repeat this process, it'd propably just easier to put #two within it's own holder <div>, like this:CSS: #two_holder{text-align: center;}#two{text-align: left;} HTML: <div id="two_holder"><div id="two"></div></div> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.