Jump to content

trying to get it corrct on IE


djp1988

Recommended Posts

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:9134507aa22e6c38249f31664b8234da.pngIE7 screenshot:6d132ee2c8bfb54fb580db938c55a105.pngIE 8 screenshot:553fdf37508dcca6ac2f702a323e97d5.pngSo 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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...