colors in forefox and colors in IE

[MisterSako]

i had to do my layout over.. long story. this is the URl

http://mrsako.gotdns.com/newest.php

if you view it in firefox it looks perfect, but in IE the colors are all messed up (and the tables arent aligned i need to look into that more)
i cant figure out why IE shows the colors so differently, before it never did this (i am using pngs and the banner is a jpeg instead of all gifs like before)

you can right clcik and view the source for the html, heres the css

A:link{color:#ADD8E6;text-decoration:underline}
A:visited{color:#ADD8E6;text-decoration:underline}
A:active{color:#ADD8E6;text-decoration:underline}
A:hover{color:#ADD8E6;text-decoration:underline}
#mastertable {max-width: 1024px;}
#max800{max-width: 800px}
#max750{max-width: 750px}
#max500{max-width: 500px}
#max400{max-width: 400px}
TD{text-align: left; }
textarea, submit{background-color:#19665a;}
table.nounderline a, table.nounderline a:link, table.nounderline a:visited, table.nounderline a:active, table.nounderline a:hover {
text-decoration:underline
}
table.trhover tr:hover {
background-color:#0b5b4e;
}

.container{
border-style: none;
border-width: thin;
padding:0;
max-width:1024px;
width: expression(document.body.clientWidth > 1024 ? "1024" : "auto" );
}
.PlainTable{
border-style: none;
padding:0;
}
.MainBanner{
border-style: none;
border-width: thin;
padding:0;
height:189px;
max-width:1024px;
width: expression(document.body.clientWidth > 1024 ? "1024" : "auto" );
background-image:url("images/banner.jpg");
background-repeat: no-repeat;
text-align:right;
vertical-align:bottom;
}
.innerBanner{
border-style: none;
border-width: thin;
padding:0;
width:294px;
height:26px;
background-image:url("images/fluid_banner.png");
background-repeat: no-repeat;
text-align:right;
vertical-align:bottom;
}
.LeftSideLinks{
border-style: none;
border-width: thin;
padding:0;
width:165px;
//min-width:165px;
//width: expression(document.body.clientWidth < 165 ? "165" : "auto" );
height:474px;
background-image:url("images/leftspace.png");
background-repeat: repeat-y;
text-align:center;
vertical-align:top;
}
.TopSpace{
border-style: none;
border-width: thin;
padding:0;
width:859px;
height:95px;
background-image:url("images/Copyoftopspace.png");
background-repeat: no-repeat;
text-align:right;
vertical-align:top;
}
.MainSpace{
border-style: none;
border-width: thin;
padding:0;
width:859px;
background-image:url("images/mainspace.png");
background-repeat: repeat-y;
text-align:left;
vertical-align:top;
}
.MainBottomBanner{
border-style: none;
border-width: thin;
padding:0;
height:107px;
max-width:1024px;
width: expression(document.body.clientWidth > 1024 ? "1024" : "auto" );
background-image:url("images/bottombanner.png");
background-repeat: no-repeat;
text-align:center;
vertical-align:top;
}

i have no idea what would cause this, any ideas?

[MisterSako]

i switched back to all gifs despite what other people have been telling me about pngs.

apparently internet explorer doesnt support pngs like its supposed to. another thing it lacks in, i don't understand how so many people liked it

[jverkoey]

IE doesn't natively have PNG support. If you want true PNG support there's a PNG "library" of javascript code you can use. There's a working example of it on the GameDev Guys Website.

pngfix.js

[MisterSako]

yeh i guessed it was something like that.

i think ill just stick with gifs since they been aroud alot longer and requires less stuff to work so there will be less complications.