1 Replies - 999 Views - Last Post: 25 January 2011 - 04:33 AM

#1 gmoneyjive   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 25-January 11

pngfix.js is fixing some pngs in IE6, but not all

Posted 25 January 2011 - 04:29 AM

Hi guys,

Sorry to bother you with what is probably a newb question, but I haven't been able to figure this out and I'm launching a site in a few hours. I am using pngfix.js to make .png images work with IE6 (for rounded corners/transparency, etc.). It works on most of the .pngs, but for my menu bar it doesn't. I think the reason is that I'm using 2 images for the menu bar, a light one & a dark one for when you mouse over it.

The site is actually live right now at lazyinvestors.com (I just haven't made final updates and told everyone yet). I'm not sure how this works as I've never been on this site before, but here is the code from the html file:

<!DOCTYPE html>
<title>Lazyinvestors.com - It Pays to be Lazy</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link media="only screen and (max-device-width: 480px) and (min-device-width: 320px)" href="smartphone.css" type="text/css" rel="stylesheet" />
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>


<div class="center">

<div id="navlist">
  <li id="home"><a href="index.html"></a></li>
  <li id="articles"><a href="articles.html"></a></li>
  <li id="portfolio"><a href="portfolio.html"></a></li>
  <li id="contact"><a href="contact.php"></a></li>
  <li id="rest"></a></li>
<br /><br /><br /><br />

<div class="dialog">
 <div class="content">
  <div class="t"></div>
  <br />
   <h1>Welcome to Lazyinvestors.com!</h1><br />
		<p>What if we told you that you could beat professional money managers year after year without even thinking about it?  Wall Streetís dirty little secret is the vast majority of professional money managers underperform the S&P 500 index.  Approximately three quarters of mutual fund managers fail to beat the index each year, and over the long term almost nine out of 10 (88%) have failed to beat the index since 1970. We take great pleasure in the fact that lazy investors can easily beat professionals who do this for a living simply by buying a single Exchange Traded Fund (ETF) and forgetting about it. Which ETF to buy, you ask?  To find out, check out our <a href="marketdirection.html"/>thoughts on the market</a>.</p><br /><br />
		<table class="tablepos">
				<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Flazyinvestors.com&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=dark&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
 <div class="b"><div></div></div>

And here is the code from the CSS file:

body {background: url('1280a.jpg') fixed black center top; font-size:100%; font-family: Helvetica,Arial,sans-serif; color:white; }
p {font-size:0.875em;}
a {color:white;}
#menu {text-decoration:none; color:white; font-weight: bold;}

#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:60px;display:block;}
#home{background:url('menubar2.png') 0 0;}
#home a:hover{background: url('menubar3.png') 0 0;}
#articles{background:url('menubar2.png') -66px 0;}
#articles a:hover{background: url('menubar3.png') -66px 0;}
#portfolio{background:url('menubar2.png') -131px 0;}
#portfolio a:hover{background: url('menubar3.png') -131px 0;}
#contact{background:url('menubar2.png') -204px 0;}
#contact a:hover{background: url('menubar3.png') -204px 0;}
#rest{background:url('menubar2.png') -273px 0;}
#rest a:hover{background: url('menubar3.png') -273px 0;}

.right{position:absolute; right:10px; top:10px;}
.center {margin:auto; width:738px;}
.center1 {margin:auto; width:450px;}
.center2{position:relative; left:2px;}
.left{position:absolute; left:-138px; top:2px;}
.right1{position:absolute; right:-120px; top:2px;}
.floatright{float:right; margin: 0 14px 0 8px;}
.floatleft{float:left; margin: 0 10px 0 0;}
.top{position:relative; top:-10px;}
.tablepos{position:relative; left:0px;}

/*Style for lower blue boxes*/
.dialog {position:relative; margin:0px auto; min-width:8em;
max-width:728px; /* based on image dimensions - not quite consistent with drip styles yet */
color:#fff; z-index:1; margin-left:12px; /* default, width of left corner */
margin-bottom:0.5em; /* spacing under dialog */}
.dialog .content, .dialog .t, .dialog .b, .dialog .b div {background:transparent url(blue1.png) no-repeat top right;
.dialog .content {position:relative; zoom:1; _overflow-y:hidden; padding:0px 17px 0px 0px;}
.dialog .t {/* top+left vertical slice */
position:absolute; left:0px; top:0px; width:12px; /* top slice width */
margin-left:-12px; height:100%; _height:4800px; /* arbitrary long height, IE 6 */
background-position:top left;}
.dialog .b {/* bottom */
position:relative; width:100%;}
.dialog .b, .dialog .b div {height:30px; /* height of bottom cap/shade */
.dialog .b {background-position:bottom right;}
.dialog .b div {position:relative; width:12px; /* bottom corner width */
margin-left:-12px; background-position:bottom left;}
.dialog h1, .dialog p {margin:0px; /* margins will blow out backgrounds, leaving whitespace. */
padding:.5em 0px .5em 0px;}
.dialog h1 {padding-bottom:0px;}

If anyone can help me out with this, I'd greatly appreciate it!!

Is This A Good Question/Topic? 0
  • +

Replies To: pngfix.js is fixing some pngs in IE6, but not all

#2 EnvXOwner   User is offline

  • D.I.C Lover
  • member icon

Reputation: 358
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: pngfix.js is fixing some pngs in IE6, but not all

Posted 25 January 2011 - 04:33 AM

I think that you should worry less about IE6. It's outdated and anyone who uses it needs to update. It's expected that the website won't look 100% the same across different browsers especially when they're that old.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1