Menu icon Foundation
Profile Card and IE

SOLVED for IE8 - but now broken in IE11! Please read the final section of my text if you would like to see how I fixed this and got the profile card to work in IE8. I love the "profile card" and it looks great in Chrome and Firefox. Sadly (no surprise), when I use in IE11 compatibility view (IE9/8), the circular "window" for the image and the borders with shading disappear. I'm using the recommended shivs from the IE8 thread on this forum so foundation grid itself works. I have the same issue with the other "box" type css styling. I'm using exactly what was published for the profile cards - nothing extra. Can someone point me to a place where I could possibly either learn how to overcome this or suggest any close alternative for the profile cards? I can just fuss with the existing code and make these into colored flat panels and use images that I have created in a circular size, but sure would love to use the existing CSS instead. I've attached images first of how it looks in IE and then the second is how it appears in Chrome. Thanks for any advice.

Iecompatibility

Chrome

http://zurb.com/building-blocks/profile-card-302c756e-ff66-4aee-a359-277dd90765d2 is where you can find the .profile-card css. It is a really nice layout. I had to use PIE.htc to get the box-shadow and box-radius to work in IE8. It still looks great in Chrome, Firefox and Safari - but not in IE11. The others ignore the PIE entries in the CSS. I'll likely just create a secondary css file for the IE8 as the original works great for IE11. Here is the modified CSS. Please note that PIE is available at http://css3pie.com/ and also at GitHub. I used only the htc method described. As it turned out, there was nothing wrong with my html and I closed a separate post. Initially, when creating the four entries, my next row of grid was getting stacked and the card on the far right would slide up under the others. The z-index and position: relative for the .profile-card fixed all that. I did have to give up on the nicer box-shadow for the card that is in the original css - but it still came out looking very nice for the use these will have on our site.

@charset "utf-8";
/* Profile Card for Foundation ZURB */
.profile-card {
padding: 1rem;
box-shadow: 0 2px 5px #888888;
position: relative;
z-index: 1;
behavior: url(/docs/laborTab/styles/pie/PIE.htc);
margin: 2rem 0;
background-color: #fff; }
.profile-card img {
width: 8rem;
display: block;
margin: 2rem auto;
text-align: center;
border-radius: 50%;
behavior: url(/docs/laborTab/styles/pie/PIE.htc);
position: relative;
z-index: 1;
box-shadow: 2px 2px 5px #888888;
behavior: url(/docs/laborTab/styles/pie/PIE.htc);
}
.profile-card .profile-info {
padding: 1rem; }
.profile-card .profile-info h4 {
margin-top: 0;
text-align: center;
text-transform: uppercase; }
.profile-card .profile-info p {
text-align: center; }
.profile-card .profile-info .inline-list {
text-align: center;
margin-bottom: 1rem; }
.profile-card .profile-info .inline-list li {
float: none;
display: inline-block; }
.profile-card .profile-info .inline-list i.fi-social-facebook {
font-size: 1.5rem;
color: #3b5998; }
.profile-card .profile-info .inline-list i.fi-social-facebook:hover {
transform: scale(1.5);
transition: all .5s ease-in-out; }
.profile-card .profile-info .inline-list i.fi-social-twitter {
font-size: 1.5rem;
color: #55acee; }
.profile-card .profile-info .inline-list i.fi-social-twitter:hover {
transform: scale(1.5);
transition: all .5s ease-in-out; }
.profile-card .profile-info .inline-list i.fi-social-linkedin {
font-size: 1.5rem;
color: #0077b5; }
.profile-card .profile-info .inline-list i.fi-social-linkedin:hover {
transform: scale(1.5);
transition: all .5s ease-in-out; }
.profile-card .profile-info .inline-list i.fi-social-github {
font-size: 1.5rem;
color: #333; }
.profile-card .profile-info .inline-list i.fi-social-github:hover {
transform: scale(1.5);
transition: all .5s ease-in-out; }
.profile-card .profile-info .inline-list i.fi-social-youtube {
font-size: 1.5rem;
color: #cc181e; }
.profile-card .profile-info .inline-list i.fi-social-youtube:hover {
transform: scale(1.5);
transition: all .5s ease-in-out; }

ie8.profile-cardbuilding blocksz-indexbox-shadowbox-radius

SOLVED for IE8 - but now broken in IE11! Please read the final section of my text if you would like to see how I fixed this and got the profile card to work in IE8. I love the "profile card" and it looks great in Chrome and Firefox. Sadly (no surprise), when I use in IE11 compatibility view (IE9/8), the circular "window" for the image and the borders with shading disappear. I'm using the recommended shivs from the IE8 thread on this forum so foundation grid itself works. I have the same issue with the other "box" type css styling. I'm using exactly what was published for the profile cards - nothing extra. Can someone point me to a place where I could possibly either learn how to overcome this or suggest any close alternative for the profile cards? I can just fuss with the existing code and make these into colored flat panels and use images that I have created in a circular size, but sure would love to use the existing CSS instead. I've attached images first of how it looks in IE and then the second is how it appears in Chrome. Thanks for any advice.

Iecompatibility

Chrome

http://zurb.com/building-blocks/profile-card-302c756e-ff66-4aee-a359-277dd90765d2 is where you can find the .profile-card css. It is a really nice layout. I had to use PIE.htc to get the box-shadow and box-radius to work in IE8. It still looks great in Chrome, Firefox and Safari - but not in IE11. The others ignore the PIE entries in the CSS. I'll likely just create a secondary css file for the IE8 as the original works great for IE11. Here is the modified CSS. Please note that PIE is available at http://css3pie.com/ and also at GitHub. I used only the htc method described. As it turned out, there was nothing wrong with my html and I closed a separate post. Initially, when creating the four entries, my next row of grid was getting stacked and the card on the far right would slide up under the others. The z-index and position: relative for the .profile-card fixed all that. I did have to give up on the nicer box-shadow for the card that is in the original css - but it still came out looking very nice for the use these will have on our site.

@charset "utf-8";
/* Profile Card for Foundation ZURB */
.profile-card {
padding: 1rem;
box-shadow: 0 2px 5px #888888;
position: relative;
z-index: 1;
behavior: url(/docs/laborTab/styles/pie/PIE.htc);
margin: 2rem 0;
background-color: #fff; }
.profile-card img {
width: 8rem;
display: block;
margin: 2rem auto;
text-align: center;
border-radius: 50%;
behavior: url(/docs/laborTab/styles/pie/PIE.htc);
position: relative;
z-index: 1;
box-shadow: 2px 2px 5px #888888;
behavior: url(/docs/laborTab/styles/pie/PIE.htc);
}
.profile-card .profile-info {
padding: 1rem; }
.profile-card .profile-info h4 {
margin-top: 0;
text-align: center;
text-transform: uppercase; }
.profile-card .profile-info p {
text-align: center; }
.profile-card .profile-info .inline-list {
text-align: center;
margin-bottom: 1rem; }
.profile-card .profile-info .inline-list li {
float: none;
display: inline-block; }
.profile-card .profile-info .inline-list i.fi-social-facebook {
font-size: 1.5rem;
color: #3b5998; }
.profile-card .profile-info .inline-list i.fi-social-facebook:hover {
transform: scale(1.5);
transition: all .5s ease-in-out; }
.profile-card .profile-info .inline-list i.fi-social-twitter {
font-size: 1.5rem;
color: #55acee; }
.profile-card .profile-info .inline-list i.fi-social-twitter:hover {
transform: scale(1.5);
transition: all .5s ease-in-out; }
.profile-card .profile-info .inline-list i.fi-social-linkedin {
font-size: 1.5rem;
color: #0077b5; }
.profile-card .profile-info .inline-list i.fi-social-linkedin:hover {
transform: scale(1.5);
transition: all .5s ease-in-out; }
.profile-card .profile-info .inline-list i.fi-social-github {
font-size: 1.5rem;
color: #333; }
.profile-card .profile-info .inline-list i.fi-social-github:hover {
transform: scale(1.5);
transition: all .5s ease-in-out; }
.profile-card .profile-info .inline-list i.fi-social-youtube {
font-size: 1.5rem;
color: #cc181e; }
.profile-card .profile-info .inline-list i.fi-social-youtube:hover {
transform: scale(1.5);
transition: all .5s ease-in-out; }

This post has been closed. No new replies can be added.

Rafi Benkual over 2 years ago

Just so everyone knows what you're referring to - http://zurb.com/building-blocks/profile-card-302c756e-ff66-4aee-a359-277dd90765d2

Border-radius is not supported in IE8 - http://caniuse.com/#feat=border-radius
Box-shadow is not supported in IE8 - http://caniuse.com/#search=box-shadow

Also, there are no vendor prefixes added. You can add them yourself manually, use a tool like http://leaverou.github.io/prefixfree/ or auto-prefixer https://github.com/postcss/autoprefixer

This should help with most browser inconsistencies.

Sherry Bradford over 2 years ago

Thank you! Needless to say, will be sooooo glad when we move off IE8.....