Basically, any areas in a 32 bit png that should have transparency will look like a light, solid color in IE 6. That's the "ugly" part about IE6's rendering of the page.
32 bit pngs can use 8 bit alpha transparency, which allows for variable levels of transparency. Index transparency, which is what gifs use, only allows for two levels of transparency, either complete transparency or none at all.
Cary
Ambassador
1,073 posts
Jo Rice
Senior Advisor
10,951 posts
so if I take all my .png's and save them as .gif's and do what you suggest that should fix it?
Cary
Ambassador
1,073 posts
I've made new images for use with IE6, but you'll still need the ones you have for other browsers. Well, maybe with the exception of the title image which is replaced with a smaller png file that's compatible with IE6. It's 8 bit instead of 32 bit, but it was exported using a background matte color setting similar to your page's background color, so the index transparency doesn't create a jagged edge around the letters of the image. So here's the new code and some pics.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AotW Extra Page Template</title>
<style type="text/css" media="screen">
html, body {
margin: 0;
padding: 0;
}
body {
color: #2D0334;
background: url('images/mback10b.jpg') repeat;
font: 12px Helvetica, Arial, sans-serif;
line-height: 18px;
}
h2 {
color: #333;
}
a {
color: #337810;
}
p {
margin: 0 0 34px;
} /* adjusts the space between content and footer */
img {
border:none; /* so you don't need to use border="0" with images */
}
#wrapper {
width:960px;
text-align: left;
padding: 19px 0 0;
margin:0 auto;
}
#logoarea {
text-align:center;
}
/* Header */
#header {
height:82px;
width:930px;
padding:15px 15px 63px;
text-align: center;
/* background image settings for header */
background-image: url(images/bar_gold.png);
background-repeat: no-repeat;
} /* padding changes the gap between header and content area */
* html #header {
background-image: url(images/bar_gold.jpg);
}
#header h1 {
color: #660066;
margin: 0 0 3px;
padding: 25px 18px 0;
} /* padding changes the gap between header and content area */
#header p {
color: #006666;
font-size: 11px;
font-weight: bold;
padding: 0 18px;
}
/* Content Style */
#content {
background:url(images/infogral_gold_top_new.png) no-repeat left top;
padding-top: 32px;
}
* html #content {
background-image:url(images/infogral_gold_top_new.jpg);
}
#content div {
background:url(images/infogral_gold_bottom_new.png) no-repeat left bottom;
padding-bottom: 33px;
}
* html #content div {
background-image:url(images/infogral_gold_bottom_new.jpg);
}
#content div div {
background:url(images/infogral_gold_middle.png) repeat-y left top;
padding:0 15px;
height:1%;
}
* html #content div div {
background-image:url(images/infogral_gold_middle.jpg);
}
#content div div div {
background-image:none; /* so other divs within #content won't have background images unless applied later in the CSS */
}
#extra {
margin-left:20px; /* padding on the side you are floating toward causes the doubled-margin float bug in IE6 */
float: left;
width: 175px;
padding-top:20px;
} /* background image settings for extra can go here */
#extra small {
font-size: 11px;
line-height: 18px;
}
#main p, #extra p {
padding-right: 18px;
}
/* Content Positioning & Size */
#main {
float:left;
margin: 0px;
width: 650px;
margin-left:20px; /* padding on the side you are floating toward causes the doubled-margin float bug in IE6 */
padding-top:20px;
}
/* Footer */
#footer {
color: #316A79;
clear:both;
text-align:center;
}
#footer a {
color: #316A79;
}
#footer p {
color: #316A79;
font-weight: bold;
text-align: right;
margin: 0;
}
#footer ul {
border-bottom: 0px solid #316A79;
list-style: none;
text-align: center;
margin: 0px;
}
#footer li {
display: inline;
color: #316A79;
font-weight: bold;
}
</style>
<!--[if IE]>
<style type="text/css">
/* #navigation, #content, #extra { margin-top: 20px; } */
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="logoarea">
<img src="images/aotwfull3d4_new.png" width="50%" alt="Accessories of the World" />
</div><!-- Closes logoarea -->
<div id="header">
<h1>Welcome to Wolverana’s Lair</h1>
<p class="description">Usually some sort of tagline or description is placed here.</p>
</div><!-- Closes header -->
<div id="content"><!-- holds top background image -->
<div><!-- holds bottom background image -->
<div><!-- holds repeating background image, and controls left and right padding for content -->
<div id="main">
<h2>Content Goes Here</h2>
<p>Cue the obligatory <em>Lorem Ipsum</em> riff-raff type text, Followed by an example of a link. There are many uses for <em>Lorem Ipsum</em>, using it as filled text isn't recommended. Make sure to always use actual content when building your websites! It just makes more sense. Now for the lipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p></p>
</div><!-- Closes main -->
<div id="extra">
<h2>Extra Stuff Goes Here</h2>
<p>Sometimes this would be called a <em>sidebar</em>, but it doesn't always have to be on the side to be called a <em>sidebar</em>. Sidebars can be on tops of things, below things, but they are usually beside things – hence it being a called a sidebar.</p>
<p><small></small></p>
</div><!-- Closes extra -->
<div id="footer"> Website designed by Jo Ann Rice, Owner & Operator of Accessories of the World.<br />
Email me at webmaster067@gmail.com for site problems and broken links.<br />
Copyright © 2009 Accessories of the World
<ul>
<li><a href="">Shop Home</a></li>
<li><a href="">Categories</a></li>
<li><a href="">Navigation 3</a></li>
<li><a href="">Navigation 4</a></li>
<li><a href="">View Cart</a></li>
<li><a href="">Contact us</a></li>
</ul>
</div><!-- Closes footer -->
</div>
</div>
</div><!-- Closes content -->
</div><!-- Closes wrapper -->
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AotW Extra Page Template</title>
<style type="text/css" media="screen">
html, body {
margin: 0;
padding: 0;
}
body {
color: #2D0334;
background: url('images/mback10b.jpg') repeat;
font: 12px Helvetica, Arial, sans-serif;
line-height: 18px;
}
h2 {
color: #333;
}
a {
color: #337810;
}
p {
margin: 0 0 34px;
} /* adjusts the space between content and footer */
img {
border:none; /* so you don't need to use border="0" with images */
}
#wrapper {
width:960px;
text-align: left;
padding: 19px 0 0;
margin:0 auto;
}
#logoarea {
text-align:center;
}
/* Header */
#header {
height:82px;
width:930px;
padding:15px 15px 63px;
text-align: center;
/* background image settings for header */
background-image: url(images/bar_gold.png);
background-repeat: no-repeat;
} /* padding changes the gap between header and content area */
* html #header {
background-image: url(images/bar_gold.jpg);
}
#header h1 {
color: #660066;
margin: 0 0 3px;
padding: 25px 18px 0;
} /* padding changes the gap between header and content area */
#header p {
color: #006666;
font-size: 11px;
font-weight: bold;
padding: 0 18px;
}
/* Content Style */
#content {
background:url(images/infogral_gold_top_new.png) no-repeat left top;
padding-top: 32px;
}
* html #content {
background-image:url(images/infogral_gold_top_new.jpg);
}
#content div {
background:url(images/infogral_gold_bottom_new.png) no-repeat left bottom;
padding-bottom: 33px;
}
* html #content div {
background-image:url(images/infogral_gold_bottom_new.jpg);
}
#content div div {
background:url(images/infogral_gold_middle.png) repeat-y left top;
padding:0 15px;
height:1%;
}
* html #content div div {
background-image:url(images/infogral_gold_middle.jpg);
}
#content div div div {
background-image:none; /* so other divs within #content won't have background images unless applied later in the CSS */
}
#extra {
margin-left:20px; /* padding on the side you are floating toward causes the doubled-margin float bug in IE6 */
float: left;
width: 175px;
padding-top:20px;
} /* background image settings for extra can go here */
#extra small {
font-size: 11px;
line-height: 18px;
}
#main p, #extra p {
padding-right: 18px;
}
/* Content Positioning & Size */
#main {
float:left;
margin: 0px;
width: 650px;
margin-left:20px; /* padding on the side you are floating toward causes the doubled-margin float bug in IE6 */
padding-top:20px;
}
/* Footer */
#footer {
color: #316A79;
clear:both;
text-align:center;
}
#footer a {
color: #316A79;
}
#footer p {
color: #316A79;
font-weight: bold;
text-align: right;
margin: 0;
}
#footer ul {
border-bottom: 0px solid #316A79;
list-style: none;
text-align: center;
margin: 0px;
}
#footer li {
display: inline;
color: #316A79;
font-weight: bold;
}
</style>
<!--[if IE]>
<style type="text/css">
/* #navigation, #content, #extra { margin-top: 20px; } */
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="logoarea">
<img src="images/aotwfull3d4_new.png" width="50%" alt="Accessories of the World" />
</div><!-- Closes logoarea -->
<div id="header">
<h1>Welcome to Wolverana’s Lair</h1>
<p class="description">Usually some sort of tagline or description is placed here.</p>
</div><!-- Closes header -->
<div id="content"><!-- holds top background image -->
<div><!-- holds bottom background image -->
<div><!-- holds repeating background image, and controls left and right padding for content -->
<div id="main">
<h2>Content Goes Here</h2>
<p>Cue the obligatory <em>Lorem Ipsum</em> riff-raff type text, Followed by an example of a link. There are many uses for <em>Lorem Ipsum</em>, using it as filled text isn't recommended. Make sure to always use actual content when building your websites! It just makes more sense. Now for the lipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p></p>
</div><!-- Closes main -->
<div id="extra">
<h2>Extra Stuff Goes Here</h2>
<p>Sometimes this would be called a <em>sidebar</em>, but it doesn't always have to be on the side to be called a <em>sidebar</em>. Sidebars can be on tops of things, below things, but they are usually beside things – hence it being a called a sidebar.</p>
<p><small></small></p>
</div><!-- Closes extra -->
<div id="footer"> Website designed by Jo Ann Rice, Owner & Operator of Accessories of the World.<br />
Email me at webmaster067@gmail.com for site problems and broken links.<br />
Copyright © 2009 Accessories of the World
<ul>
<li><a href="">Shop Home</a></li>
<li><a href="">Categories</a></li>
<li><a href="">Navigation 3</a></li>
<li><a href="">Navigation 4</a></li>
<li><a href="">View Cart</a></li>
<li><a href="">Contact us</a></li>
</ul>
</div><!-- Closes footer -->
</div>
</div>
</div><!-- Closes content -->
</div><!-- Closes wrapper -->
</body>
</html>
Cary
Ambassador
1,073 posts
More pics...
Jo Rice
Senior Advisor
10,951 posts
Wow, that's a lot of work you went through just for me Cary thank you again! I have one question though, is it possible for you to just post the code that needs to be changed because i've changed my page considerably since I posted this and I just spent the last 2 days positioning everything lol, so I can't just pop this in there, I'll take a look though and see if what you did is obvious, but I dont' want to miss something that might not be either. Thanks again, this is way more than I expected and you surely have helped immensely.
Jo Rice
Senior Advisor
10,951 posts
Cary on second thought I think I am going to pass on the new setup here because I don't want to lose the nice looks that the transparent graphics do. As much as I appreciate all your help, and I surely do, I can't see making all these changes that downgrade the looks, just for those that aren't up to date on their browsers. I'll add a comment on the pages somewhere that says it's best viewed in IE7+ or FF browsers and call it good. I'm sure there are lots of IE6 users out there, but they just need to get with the program and update lol.
Thanks again for all your wonderful help, and I'm sorry to have put you through all that extra stuff in the end there since I didn't understand what you meant on the graphics types.
Thanks again for all your wonderful help, and I'm sorry to have put you through all that extra stuff in the end there since I didn't understand what you meant on the graphics types.
Cary
Ambassador
1,073 posts
No problem. Actually, with a program like Fireworks, these images are easy.
Jo Rice
Senior Advisor
10,951 posts
yeah I have that program, but I know nothing about flash and haven't taken any time to mess with it yet. I will eventually though hehe. Thanks again for all your help and should I decide to go for it at I did save the code above and the graphics for future reference 
Cary
Ambassador
1,073 posts
I think you may be thinking of Firestarter 
Jo Rice
Senior Advisor
10,951 posts
haha ok, not that I know the difference LOL. I have a few different graphics programs I use for the most part, Paint Shop Pro Ultimate X2, Photo Shop Elements 2 & 7, Xara3d (which is fairly useless other than a logo lol) and a couple animation editors. Other than that I dunno most of the other ones hehe.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
