colors in forefox and colors in IE
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
Code:
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?
