Jump to content

trying to get it corrct on IE


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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...