OK, my site has a page “Supporters” that has some business card images on it. I have found out to have the card expand/enlarge and that works nicely, but…
Is there a better way to have the enlargement make sure it is in the browser window fully? If I get some cards on the edge, they cut off the information displayed which makes some folks to send a “bug” report to the webmaster (me).
P.S. I do NOT want to use Java/Javascript but just CSS.
Thanks
e
Hi, fredep57.
The page that you have linked to does not show any business cards. Do you have a working page that shows an example of the “buggy” view? As I recall, the images of the cards should not be clipped along the right edge, so let’s see what your code looks like with some images in it. BTW - do you know what browsers are the folks who report the problem are using?
Edit:
I just noticed the IE line in the head section.
You might try changing it to:
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
otherwise, you are forcing newer versions of IE to behave like IE9.
It’s a start.
FYI: This is your original thread. Have your requirements changed?
They don’t render, but are these the busines cards you’re talking about?
<!-- panel with buttons -->
<div class="Pictures1" id="ex2">
<ul>
<li><img src="SpecialPictures/Advertisers/McguiarsCarCarBC.jpg" ></li>
<li><img src="SpecialPictures/Advertisers/HillyardTireCenterBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/PMAutoSalesBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/JMGardensBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/LegacyVehicleAppraisalBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/SpokaneFallsInsuranceBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/FarmersInsToriDaleboutBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/OReillyAutoPartsBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/HomeEnvironmentsBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/VHUpholsteryBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/ShakeysBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/FeltmanGebhardtGreerZeimantzBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/DonutParadBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/MAACOSpokaneValleyBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/DarcysBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/WilliamsAutomotiveBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/AutoNation.png" ></li>
<li><img src="SpecialPictures/Advertisers/BronzedBeanBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/MickelDeansIceCreamBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/NorthwestPizzaSlicesBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/PhotoRodzBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/PerformanceAutoSalesBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/FlashsAutBodyBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/AAASpokaneBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/ProAutomotiveBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/BarberJoesBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/DSM Camaro Group.png" ></li>
<li><img src="SpecialPictures/Advertisers/AutoZoneSpokaneBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/TonysSteerInn_1.png" ></li>
<li><img src="SpecialPictures/Advertisers/RAMAXEngravingBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/TobysBatterAndAutoElectricBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/IllinoisAveBarAndGrillBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/SpokaneMetalFinishingBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/MasterBlastersBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/SpokaneToppersBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/LesSchwaNDivixionBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/LibertyTireProsBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/DennysArgonneBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/JimsHomeBrewBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/Kalispel_NQC_BC.png" ></li>
<li><img src="SpecialPictures/Advertisers/NAPAFrancisBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/AmericanWayAutoBodBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/CathayInnBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/AmericanTireDepotBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/CorkysRadiatorBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/BottlesBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/Skippers Card.png" ></li>
<li><img src="SpecialPictures/Advertisers/SaturdayNightIncBC.png" ></li>
<li><img src="SpecialPictures/Advertisers/LuigisBC.png" ></li>
</ul>
</div>
Somewhat but more of some “enhancements” is a better way of putting it. The page is working here but two things are “wrong”.
1 - IE enlarges the images about 2x more than Firefox, chrome and opera.
2 - Images that are close to the left/right/top/bottom of the window will be cut off - enough that there are complaints and I would like to find some kind of a solution.
So, if you click on the page link above and wait (there are about 20 images or so) you should see the card images and when hovering they expand. Hope you can see this and give me some guidance to help the issues go away.
e
Are you sure that link works? All I see even after waiting is
Please elaborate about the enhancements. What has been improved/changed? Yes, I can figure it out, but it would be faster if you explained.
Which version of IE is showing the problem? Always specify the version number when describing an IE issue. 
Thanks.
If the images are showing up as different sizes in different browsers, check the zoom settings in the browsers to assure that they are the same.
It’s good to see that AdBlock works so effectively. That’s what’s keeping the images from rendering in FF.
There are two images that are vertically aligned. They don’t exactly go with the flow. It might be better to put them last.
The reason IE (and Chrome and Opera) doubles the size of the images is most likely because of “zoom:2” in CSS. Change to “zoom:1”.
#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;
/* hack for ie8 and lower?? */
[color=red]zoom: 2[/color];
}
FYI: the way the page is designed, the images will enlarge to within no less than about 1/8 of an inch from the right edge of the browser window. If you want the images to enlarge more than they do, several adjustments will have to be made to accommodate a larger size on :hover. It is not as simple as just setting a “zoom” number larger.
Thanks Ron. I thought AdBlock did domains not images hosted on sites. But that is indeed the cause.
I thought it might be the non-fluidity of the nav and content forcing the cards to the right for narrow view-ports
But trying in Chrome, OMG, they expand to huge!
I’m out of my depth here so I’ll leave this one to others and hopefully I’ll learn something.
To enlarge the images more than 2X, change the following values:
#ex2 {
margin-left:-30px;
margin-top:[color=blue]-10px[/color]; /* changed from -20px */
}
#ex2 ul {
list-style:none;
text-align:center;
padding:[color=blue]72px 145px[/color]; /* changed from 36px 98px */
margin:0 auto;
}
and
#ex2 li:hover {
-webkit-transform: [color=blue]scale(2.5)[/color]; /* changed from (2) */
-moz-transform: [color=blue]scale(2.5)[/color];
-ms-transform: [color=blue]scale(2.5)[/color];
-o-transform: [color=blue]scale(2.5)[/color];
transform:[color=blue]scale(2.5)[/color];
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;
/* hack for ie8 and lower??
zoom: 2; */
}
IE8 is mostly broken. It does not support transforms and middle alignment of the rows is out of whack. Perhaps @Paul_O_B can help with IE8.
Don’t neglect to change the meta tag mentioned in post #2.
ronpat,
Thanks for this. I know that I can enlarge them more than 2x but what my issues are:
1 - IE enlarges them much more than Firefox and/or chrome - appears around twice or more the enlarged size.
2 - I need to make sure that IE9 is supported and the only way I can get that is with the compatibility line you say I should take out. If there is some way else, let me know please as I get a lot of complaints when I leave that out of the page from folks that still have Vista (and IE9 of course).
3 - I need to find a way to make the enlargements center in the window so the ones that are near the edges (all around) don’t get cut off.
P.S. the site is http://www.saccc567.com and go the the Supporters menu item. If the images don’t display right away, wait as I think it might take a while for 40+ images to start loading but have never done any performance testing in that area.
e
Hi,
The problem is caused by your use of zoom:2 which in IE9+ and in Chrome (chrome supports zoom) you will get a box that is twice the size and seeing as you have already scaled it by twice the size with transform then the total is four times the size of the original.
#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;
[B] /* hack for ie8 and lower?? */
zoom: 2; [/B]
}
Remove the zoom and place it in conditional comments.
If you refer to my original you will see that the zoom was sand-boxed in conditional comments so that no other browsers are affected. It was placed there for this very reason
<!--[if lte IE 8]>
<style type="text/css">
#ex2 li:hover{zoom:2}
</style>
<![endif]-->
If you follow the same procedure then you will fix ie9+ and chrome and also allow ie8 to play along with at least the zoom (although you may need to tweak positions for ie8 and under in the CCs).
Remember that conditional comments are html and should not appear inside a stylesheet.
Paul O’B
Thanks, this helped the zoom/enlargement. Sorry I missed the original stuff - or rather I edited somehow and lost the hack but now have it back.
However, my real issue is that if the enlargement is close to the edges (left, right, top or bottom) then the full image is not displayed - it is cut off. Is there any CSS way to make the card stay in the display window? I have tried f few things but they don’t work and since you have way more knowledge about the CSS stuff than I do maybe you can help out.
Thanks again for the help.
e
Once again, in an attempt to be clear, it is the behavior of IE8 that you are concerned about. IS THAT CORRECT? Because the images are all remaining ON screen (never clipped) in other browsers including IE10.
Frankly, IE8 isn’t worth the trouble of a bunch of hacks these days. Remember that support for XP ends early next month.
No, I don’t think hacking IE8 is what is necessary.
Upon further investigation, it is the last/bottom images that get cut off. If you scroll to the bottom of the images and enlarge them the bottom about 30% seems to get cut off. That is what I really believe needs to be addressed since I am getting asked about why that happens - some if the sponsors want their information to be properly displayed which would include the last part of the image with their phone number and website. So, can you help me understand how to fix this?
Thanks again
e
In IE8, the images are anchored at the top left corner of the list item. When the images enlarge, the grow to the right and down from a little below that point. All other browsers are fine. The images in the code that I gave you in the last thread remained centered over the respective small image in IE8. Admittedly it was pretty clunky code, but it worked in all browsers including IE8. Perhaps Paul can suggest a better way to accommodate IE8.
I guess I am not too clear on the IE8 thing. I am NOT concerned about IE8 and below. I do know that there are some “quirks” with IE9 but need to support IE9+ for this.
I also am seeing that the last images displayed (bottom) are enlarging but are being cut off at their bottom because they enlarge over the smaller image - which until I was informed about this was OK by me. So I am asking if there is a way to get the bottom images to be fully visible when enlarged.
Thanks all for your help on getting the zoom “fixed” but now need to fix the bottom image enlargement.
e
How are you testing IE9?
Have you checked the browser’s window Zoom feature to see that it is zero?
Please attach a full sized screen shot showing the clipped images.
You have not included
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
in the head of your code. Would you please add it?
More guesses will follow after you have explained how you are testing IE9, assured that the zoom feature is reset, and included a screen shot of the images being clipped.
Try exactly this:
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
#ex2 {
[color=blue]margin-left:-60px;[/color]
}
#ex2 ul {
list-style:none;
text-align:center;
[color=blue]padding:40px 120px 180px;[/color]
margin:0 auto;
}
If this does not render as desired, please post a screen shot showing the problem.