rotating problems - Post ID 294553

User 2816895 Photo


Guest
9 posts

Hi, I'm trying to do a flip box on http://ossianenterprisepark.com/Busines … tions.html but the wording and the background color doesn't stay the same blue no matter what browser I use. Yes, I have cleared the cache but that doesn't seem to help. If I can get some help it would be greatly appreciated.


.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
color: #ffffff;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {


position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #375BE3;
color: #fffff;
}

/* Style the back side */
.flip-card-back {
background-color: #375BE3;
color: white;
transform: rotateY(180deg);
}


<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">

<p>Single Office Space<br /> </p>
<p>hover on for details</p>
</div><!-- end of flip card front -->
<div class="flip-card-back">

<p>details and photos about this option</p>
</div><!-- end of flip card back -->
</div> <!-- end of flip card -->
</div>
User 122279 Photo


Senior Advisor
13,493 posts

The link to your site doesn't work.

I tested your code, and it is working. But that was not your question.
In the attachment, you can see the colours of text and background, from left to right upper: Ffx, Opera, IE11, and lower Edge and Chrome. Well, there is a wee bit of difference, but not something I would get caught up in. And any end-user will see this in their preferred one of the browsers, not check and compare between them all. So, does it really matter?
Attachments:
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 2816895 Photo


Guest
9 posts

This doesn't make sense because in Google Chrome the front has a grey background and office is misspelled (see attached) and in Internet Explorer11 on the back, it says Single office space hover for details is backwards. I couldn't get a screenshot of the internet explorer one.
Attachments:
User 2699991 Photo


Registered User
3,438 posts
Online Now

mindy wrote:
This doesn't make sense because in Google Chrome the front has a grey background and office is misspelled (see attached) and in Internet Explorer11 on the back, it says Single office space hover for details is backwards. I couldn't get a screenshot of the internet explorer one.

Internet explorer cannot do flip cards thingies that's why it looks backwards and I think the O in office is being covered by something

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
https://mawarputih.id
User 122279 Photo


Senior Advisor
13,493 posts

I'm aware that IE11 cannot be used, I saw the backwards text. But I replied at something past 01 this morning and was tired, so I didn't get into too much detail. I wanted to show you the colours, that was all.

As to the appearance in Chrome, could it have been a version problem? I'm running "Versjon 87.0.4280.88 (Offisiell delversjon) (64-bit)" You will have seen in the screenshot I posted, that the background was blue in all the browsers I tried. And the text was complete.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 2816895 Photo


Guest
9 posts

So, do many people use IE? If so how do I get around that? Also, what if people dont have the right version of Google Chrome?
User 122279 Photo


Senior Advisor
13,493 posts

The percentage of IE users is steadily decreasing. I think something like 1 or 2 % now, a bit more if you only count the desktop and laptop users. CC is not making special designs for IE11 any more.
And it will be people's own responsibilities to keep their software up to date, not much you can do there. I would definitely not get involved in creating special style sheets for every thinkable old browser.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 2816895 Photo


Guest
9 posts

I just found the problem! In the css there was a space after the colon and the color code. Once I fixed that, everything worked!
User 122279 Photo


Senior Advisor
13,493 posts

Good! :)
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 2816895 Photo


Guest
9 posts

Thanks for the help!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.