Hi fredep57.
It looks like you are still having a problem with images being clipped at the right edge and bottom of the Supporters page.
Here are two versions of your page. The first offers 2x enlargement on :hover. The second offers 2.5x enlargement on :hover.
No images should be clipped in any browser. Let me know if they are.
2x enlargement on hover:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>SACCC Supporters (2x)</title>
<link rel="shortcut icon" type="image/x-icon" href="images/SACCC.ico">
<style media="screen" type="text/css">
html, body, h1, p {
margin:0;
padding:0;
}
body {
background: url("images/saccc5bg.jpg") fixed repeat 0 0;
font-family: Arial, Helvetica, sans-serif;
}
#Wrapper {
display:table;
width:96%;
margin:20px auto; /* am assuming you wanted to center this*/
border-top: 1px transparent solid;
}
#leftcol {
width:160px;
float:left;
}
#center-col {
margin-left:160px;
}
#header {
color:#000;
margin: 0px 8% 0 5%;
font-size: 1.1em;
padding: 0;
text-align: center;
background-color: #00CC33;
border: 1px solid green;
vertical-align: middle;
}
.mainNav {
/* font-size: 20px; */
font-style: normal;
font-weight: bold;
font-family: Trebuchet MS, sans-serif;
background-repeat: no-repeat;
list-style-type: none;
list-style-position: outside;
text-decoration: none;
display: inline-block;
width: 155px;
padding:0;
margin:10px 0 0;
}
ul.mainNav li a {
background-image: url("images/ChevySACCCr100x43.gif");
background-repeat: no-repeat;
/* // 4/25/2012 added below to size the image slightly bigger??? */
background-size: 110px;
background-position: 50% 80%;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
font-stretch: normal;
font-style: normal;
font-weight: bold;
display: block;
height: 42px;
line-height: 39px;
/* padding: 15px 0; */
text-align: center;
text-decoration: none;
}
ul.mainNav li a:hover {
color: red;
/* changing from 75x33 per request */
background-image: url("images/SACCC_BG2_100x42.gif");
background-repeat: no-repeat;
background-position: 50% 80%;
}
#ex2 {
margin-left:-40px;
}
#ex2 ul {
list-style:none;
text-align:center;
padding:80px 120px 160px;
margin:0 auto;
}
#ex2 li {
display:inline-block;
vertical-align:middle;
margin:20px 2px;
}
#ex2 li img {
display:block;
width:180px;
}
#ex2 li:hover {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform:scale(2);
box-shadow:15px 15px 2px rgba(0,0,0,0.5);
position:relative;
background:#f2f2f2;
-webkit-transition:transform .15s;
-moz-transition:transform .15s;
-ms-transition:transform .15s;
-o-transition:transform .15s;
transition:transform .15s;
}
#PageHome #nav-home,
#PageHistory #nav-history,
#PageOfficers #nav-officers,
#PageSponsors #nav-sponsors,
#supportersPage #nav-supporters,
#PagePictures #nav-pictures,
#PageEvents #nav-events,
#PageNewsletter #nav-Newsletter,
#PageLinks #nav-links {
color: white;
background-image: url(images/SACCC_BG2_100x42.gif);
background-repeat: no-repeat;
background-position: 50% 80%;
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
#ex2 li:hover{zoom:2}
</style>
<![endif]-->
<!---
Google Analytic Code for tracking
--->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-28020915-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body id = "supportersPage">
<div id="leftcol" style="text-align:center;">
<p><img src="../../images/SACCC_Color.gif" alt="SACCC Logo" width="160"/></p>
<ul class="mainNav">
<li class="homePage"> <a id="nav-home" href="../ccount/click.php?id=1">Home</a> </li>
<li class="historyPage"> <a id="nav-history" href="../ccount/click.php?id=3">History</a></li>
<li class="supportersPage"> <a id="nav-supporters" href="../ccount/click.php?id=12">Supporters</a> </li>
<li class="sponsorPage"> <a id="nav-sponsors" href="../ccount/click.php?id=4">Sponsors</a> </li>
<li class="picturePage"> <a id="nav-pictures" href="../ccount/click.php?id=2">Pictures</a> </li>
<li class="eventPage"> <a id="nav-events" href="../ccount/click.php?id=5">Events</a> </li>
<li class="newsletterPage"> <a id="nav-Newsletter" href="../ccount/click.php?id=6">Newsletter</a></li>
<li class="linksPage"> <a id="nav-links" href="../ccount/click.php?id=7">Links</a> </li>
<li class="officersPage"> <a id="nav-officers" href="../ccount/click.php?id=10">Officers</a> </li>
<!-- <li class="CarShowInfo"> <a id="nav-ShowInfo" href="../ccount/click.php?id=8">Show Info</a> </li> -->
<li class="CarShowInfo"> <a id="nav-ShowInfo" href="../ccount/click.php?id=11">Show Info</a> </li>
</ul>
</div>
<!-- end left column -->
<div id="center-col">
<div id="header">
<h1 class="SACCCWelcome">Spokane Area Classic Chevy Club</h1>
<h1 class="SACCCWelcome">Supporters</h1>
<div class="Mission">
<p>The following are businesses and individuals that<br>help support our club<br><br>
<span style="font-size=.7em">Please visit these supporters<br>and remember to mention you saw their ad at<br>
SPOKANE AREA CLASSIC CHEVY CLUB website!</span></p>
</div>
</div>
<!-- panel with buttons -->
<div class="Pictures1" id="ex2">
<ul>
<li><img src="SpecialPictures/Advertisers/TexasRoadhouseBC.png" ></li> <li><img src="SpecialPictures/Advertisers/BarberJoesBC.png" ></li> <li><img src="SpecialPictures/Advertisers/NAPAFrancisBC.png" ></li> <li><img src="SpecialPictures/Advertisers/PMAutoSalesBC.jpg" ></li> <li><img src="SpecialPictures/Advertisers/AmericanWayAutoBodBC.png" ></li> <li><img src="SpecialPictures/Advertisers/TonysSteerInn_1.png" ></li> <li><img src="SpecialPictures/Advertisers/FlashsAutBodyBC.png" ></li> <li><img src="SpecialPictures/Advertisers/MAACOSpokaneValleyBC.png" ></li> <li><img src="SpecialPictures/Advertisers/JimsHomeBrewBC.png" ></li> <li><img src="SpecialPictures/Advertisers/VHUpholsteryBC.png" ></li> <li><img src="SpecialPictures/Advertisers/PhotRodzBC.png" ></li> <li><img src="SpecialPictures/Advertisers/DSM Camaro Group.png" ></li> <li><img src="SpecialPictures/Advertisers/McguiarsCarCarBC.jpg" ></li> <li><img src="SpecialPictures/Advertisers/HomeEnvironmentsBC.png" ></li> <li><img src="SpecialPictures/Advertisers/LibertyTireProsBC.png" ></li> <li><img src="SpecialPictures/Advertisers/LegacyVehicleAppraisalBC.png" ></li> <li><img src="SpecialPictures/Advertisers/NorthwestPizzaSlicesBC.png" ></li> <li><img src="SpecialPictures/Advertisers/TobysBatterAndAutoElectricBC.png" ></li> <li><img src="SpecialPictures/Advertisers/BottlesBC.png" ></li> <li><img src="SpecialPictures/Advertisers/MasterBlastersBC.png" ></li> <li><img src="SpecialPictures/Advertisers/CorkysRadiatorBC.png" ></li> <li><img src="SpecialPictures/Advertisers/AutoNation.png" ></li> <li><img src="SpecialPictures/Advertisers/DonutParadBC.png" ></li> <li><img src="SpecialPictures/Advertisers/SpokaneMetalFinishingBC.png" ></li> <li><img src="SpecialPictures/Advertisers/IllinoisAveBarAndGrillBC.png" ></li> <li><img src="SpecialPictures/Advertisers/AAASpokaneBC.png" ></li> <li><img src="SpecialPictures/Advertisers/DarcysBC.png" ></li> <li><img src="SpecialPictures/Advertisers/CathayInnBC.png" ></li> <li><img src="SpecialPictures/Advertisers/LesSchwaNDivixionBC.png" ></li> <li><img src="SpecialPictures/Advertisers/SpokaneFallsInsuranceBC.png" ></li> <li><img src="SpecialPictures/Advertisers/ShakeysBC.png" ></li> <li><img src="SpecialPictures/Advertisers/MickelDeansIceCreamBC.png" ></li> <li><img src="SpecialPictures/Advertisers/BronzedBeanBC.png" ></li> <li><img src="SpecialPictures/Advertisers/LuigisBC.png" ></li> <li><img src="SpecialPictures/Advertisers/FarmersInsToriDaleboutBC.png" ></li> <li><img src="SpecialPictures/Advertisers/SaturdayNightIncBC.png" ></li> <li><img src="SpecialPictures/Advertisers/DennysArgonneBC.png" ></li> <li><img src="SpecialPictures/Advertisers/OReillyAutoPartsBC.png" ></li> <li><img src="SpecialPictures/Advertisers/WilliamsAutomotiveBC.png" ></li> <li><img src="SpecialPictures/Advertisers/Skippers Card.png" ></li> <li><img src="SpecialPictures/Advertisers/JM GardenBC.png" ></li> <li><img src="SpecialPictures/Advertisers/AmericanTireDepotBC.png" ></li> <li><img src="SpecialPictures/Advertisers/PerformanceAutoSalesBC.png" ></li> <li><img src="SpecialPictures/Advertisers/ProAutomotiveBC.png" ></li> <li><img src="SpecialPictures/Advertisers/HillyardTireCenterBC.png" ></li> <li><img src="SpecialPictures/Advertisers/AutoZoneSpokaneBC.png" ></li> <li><img src="SpecialPictures/Advertisers/Kalispel_NQC_BC.png" ></li> <li><img src="SpecialPictures/Advertisers/RAMAXEngravingBC.png" ></li> <li><img src="SpecialPictures/Advertisers/SpokaneToppersBC.png" ></li> <li><img src="SpecialPictures/Advertisers/FeltmanGebhardtGreerZeimantzBC.png" ></li>
</ul>
</div>
</div>
</body>
</html>
2.5x enlargement on hover:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>SACCC Supporters (2.5x)</title>
<link rel="shortcut icon" type="image/x-icon" href="images/SACCC.ico">
<style media="screen" type="text/css">
html, body, h1, p {
margin:0;
padding:0;
}
body {
background: url("images/saccc5bg.jpg") fixed repeat 0 0;
font-family: Arial, Helvetica, sans-serif;
}
#Wrapper {
display:table;
width:96%;
margin:20px auto; /* am assuming you wanted to center this*/
border-top: 1px transparent solid;
}
#leftcol {
width:160px;
float:left;
}
#center-col {
margin-left:160px;
}
#header {
color:#000;
margin: 0px 8% 0 5%;
font-size: 1.1em;
padding: 0;
text-align: center;
background-color: #00CC33;
border: 1px solid green;
vertical-align: middle;
}
.mainNav {
/* font-size: 20px; */
font-style: normal;
font-weight: bold;
font-family: Trebuchet MS, sans-serif;
background-repeat: no-repeat;
list-style-type: none;
list-style-position: outside;
text-decoration: none;
display: inline-block;
width: 155px;
padding:0;
margin:10px 0 0;
}
ul.mainNav li a {
background-image: url("images/ChevySACCCr100x43.gif");
background-repeat: no-repeat;
/* // 4/25/2012 added below to size the image slightly bigger??? */
background-size: 110px;
background-position: 50% 80%;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
font-stretch: normal;
font-style: normal;
font-weight: bold;
display: block;
height: 42px;
line-height: 39px;
/* padding: 15px 0; */
text-align: center;
text-decoration: none;
}
ul.mainNav li a:hover {
color: red;
/* changing from 75x33 per request */
background-image: url("images/SACCC_BG2_100x42.gif");
background-repeat: no-repeat;
background-position: 50% 80%;
}
#ex2 {
margin-left:-60px;
}
#ex2 ul {
list-style:none;
text-align:center;
padding:80px 180px 240px;
margin:0 auto;
}
#ex2 li {
display:inline-block;
vertical-align:middle;
margin:20px 2px;
}
#ex2 li img {
display:block;
width:180px;
}
#ex2 li:hover {
-webkit-transform: scale(2.5);
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
transform:scale(2.5);
box-shadow:15px 15px 2px rgba(0,0,0,0.5);
position:relative;
background:#f2f2f2;
-webkit-transition:transform .15s;
-moz-transition:transform .15s;
-ms-transition:transform .15s;
-o-transition:transform .15s;
transition:transform .15s;
}
#PageHome #nav-home,
#PageHistory #nav-history,
#PageOfficers #nav-officers,
#PageSponsors #nav-sponsors,
#supportersPage #nav-supporters,
#PagePictures #nav-pictures,
#PageEvents #nav-events,
#PageNewsletter #nav-Newsletter,
#PageLinks #nav-links {
color: white;
background-image: url(images/SACCC_BG2_100x42.gif);
background-repeat: no-repeat;
background-position: 50% 80%;
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
#ex2 li:hover{zoom:2}
</style>
<![endif]-->
<!---
Google Analytic Code for tracking
--->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-28020915-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body id = "supportersPage">
<div id="leftcol" style="text-align:center;">
<p><img src="../../images/SACCC_Color.gif" alt="SACCC Logo" width="160"/></p>
<ul class="mainNav">
<li class="homePage"> <a id="nav-home" href="../ccount/click.php?id=1">Home</a> </li>
<li class="historyPage"> <a id="nav-history" href="../ccount/click.php?id=3">History</a></li>
<li class="supportersPage"> <a id="nav-supporters" href="../ccount/click.php?id=12">Supporters</a> </li>
<li class="sponsorPage"> <a id="nav-sponsors" href="../ccount/click.php?id=4">Sponsors</a> </li>
<li class="picturePage"> <a id="nav-pictures" href="../ccount/click.php?id=2">Pictures</a> </li>
<li class="eventPage"> <a id="nav-events" href="../ccount/click.php?id=5">Events</a> </li>
<li class="newsletterPage"> <a id="nav-Newsletter" href="../ccount/click.php?id=6">Newsletter</a></li>
<li class="linksPage"> <a id="nav-links" href="../ccount/click.php?id=7">Links</a> </li>
<li class="officersPage"> <a id="nav-officers" href="../ccount/click.php?id=10">Officers</a> </li>
<!-- <li class="CarShowInfo"> <a id="nav-ShowInfo" href="../ccount/click.php?id=8">Show Info</a> </li> -->
<li class="CarShowInfo"> <a id="nav-ShowInfo" href="../ccount/click.php?id=11">Show Info</a> </li>
</ul>
</div>
<!-- end left column -->
<div id="center-col">
<div id="header">
<h1 class="SACCCWelcome">Spokane Area Classic Chevy Club</h1>
<h1 class="SACCCWelcome">Supporters</h1>
<div class="Mission">
<p>The following are businesses and individuals that<br>help support our club<br><br>
<span style="font-size=.7em">Please visit these supporters<br>and remember to mention you saw their ad at<br>
SPOKANE AREA CLASSIC CHEVY CLUB website!</span></p>
</div>
</div>
<!-- panel with buttons -->
<div class="Pictures1" id="ex2">
<ul>
<li><img src="SpecialPictures/Advertisers/TexasRoadhouseBC.png" ></li> <li><img src="SpecialPictures/Advertisers/BarberJoesBC.png" ></li> <li><img src="SpecialPictures/Advertisers/NAPAFrancisBC.png" ></li> <li><img src="SpecialPictures/Advertisers/PMAutoSalesBC.jpg" ></li> <li><img src="SpecialPictures/Advertisers/AmericanWayAutoBodBC.png" ></li> <li><img src="SpecialPictures/Advertisers/TonysSteerInn_1.png" ></li> <li><img src="SpecialPictures/Advertisers/FlashsAutBodyBC.png" ></li> <li><img src="SpecialPictures/Advertisers/MAACOSpokaneValleyBC.png" ></li> <li><img src="SpecialPictures/Advertisers/JimsHomeBrewBC.png" ></li> <li><img src="SpecialPictures/Advertisers/VHUpholsteryBC.png" ></li> <li><img src="SpecialPictures/Advertisers/PhotRodzBC.png" ></li> <li><img src="SpecialPictures/Advertisers/DSM Camaro Group.png" ></li> <li><img src="SpecialPictures/Advertisers/McguiarsCarCarBC.jpg" ></li> <li><img src="SpecialPictures/Advertisers/HomeEnvironmentsBC.png" ></li> <li><img src="SpecialPictures/Advertisers/LibertyTireProsBC.png" ></li> <li><img src="SpecialPictures/Advertisers/LegacyVehicleAppraisalBC.png" ></li> <li><img src="SpecialPictures/Advertisers/NorthwestPizzaSlicesBC.png" ></li> <li><img src="SpecialPictures/Advertisers/TobysBatterAndAutoElectricBC.png" ></li> <li><img src="SpecialPictures/Advertisers/BottlesBC.png" ></li> <li><img src="SpecialPictures/Advertisers/MasterBlastersBC.png" ></li> <li><img src="SpecialPictures/Advertisers/CorkysRadiatorBC.png" ></li> <li><img src="SpecialPictures/Advertisers/AutoNation.png" ></li> <li><img src="SpecialPictures/Advertisers/DonutParadBC.png" ></li> <li><img src="SpecialPictures/Advertisers/SpokaneMetalFinishingBC.png" ></li> <li><img src="SpecialPictures/Advertisers/IllinoisAveBarAndGrillBC.png" ></li> <li><img src="SpecialPictures/Advertisers/AAASpokaneBC.png" ></li> <li><img src="SpecialPictures/Advertisers/DarcysBC.png" ></li> <li><img src="SpecialPictures/Advertisers/CathayInnBC.png" ></li> <li><img src="SpecialPictures/Advertisers/LesSchwaNDivixionBC.png" ></li> <li><img src="SpecialPictures/Advertisers/SpokaneFallsInsuranceBC.png" ></li> <li><img src="SpecialPictures/Advertisers/ShakeysBC.png" ></li> <li><img src="SpecialPictures/Advertisers/MickelDeansIceCreamBC.png" ></li> <li><img src="SpecialPictures/Advertisers/BronzedBeanBC.png" ></li> <li><img src="SpecialPictures/Advertisers/LuigisBC.png" ></li> <li><img src="SpecialPictures/Advertisers/FarmersInsToriDaleboutBC.png" ></li> <li><img src="SpecialPictures/Advertisers/SaturdayNightIncBC.png" ></li> <li><img src="SpecialPictures/Advertisers/DennysArgonneBC.png" ></li> <li><img src="SpecialPictures/Advertisers/OReillyAutoPartsBC.png" ></li> <li><img src="SpecialPictures/Advertisers/WilliamsAutomotiveBC.png" ></li> <li><img src="SpecialPictures/Advertisers/Skippers Card.png" ></li> <li><img src="SpecialPictures/Advertisers/JM GardenBC.png" ></li> <li><img src="SpecialPictures/Advertisers/AmericanTireDepotBC.png" ></li> <li><img src="SpecialPictures/Advertisers/PerformanceAutoSalesBC.png" ></li> <li><img src="SpecialPictures/Advertisers/ProAutomotiveBC.png" ></li> <li><img src="SpecialPictures/Advertisers/HillyardTireCenterBC.png" ></li> <li><img src="SpecialPictures/Advertisers/AutoZoneSpokaneBC.png" ></li> <li><img src="SpecialPictures/Advertisers/Kalispel_NQC_BC.png" ></li> <li><img src="SpecialPictures/Advertisers/RAMAXEngravingBC.png" ></li> <li><img src="SpecialPictures/Advertisers/SpokaneToppersBC.png" ></li> <li><img src="SpecialPictures/Advertisers/FeltmanGebhardtGreerZeimantzBC.png" ></li>
</ul>
</div>
</div>
</body>
</html>
PS: I think a box shadow around the entire image would look better than the offset box shadow currently in use. The tops of the cards would be visually separated from the cards around them. As it is, sometimes they tend to run together on the top and left.