problem with css3 transform

I have a website which works fine in chrome29 on the mac but on the latest pc version it isn't working properly.. the 2 photos show the issue. both have latest versions

1. on mac version. when you hover over the box it spins round to show the options
2. on the pc version, it doesn't show options but does show text, mirrored backwards

any ideas?

thanks
11.png
22.png
maddisoncrAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

COBOLdinosaurCommented:
So we are supposed to guess what the code look like based on nothing but images and just use our imagination as to what the transition looks like?

Post a link please.

Cd&
0
Kyle HamiltonData ScientistCommented:
you need to provide either a link to the page or the code you are using.

also, what browser on pc?

it probably has to do with backface-visibily. but like i said, w/o posting your code you leave people guessing
0
maddisoncrAuthor Commented:
It's using the latest version of Chrome on both the PC and Mac, here's the css and the html

thanks

css

@charset "UTF-8";
/* CSS Document */

.page_main_squares{
      display:-webkit-flex;
      -webkit-flex-flow: row wrap;
      height:100%;
      width:100%;
}

.square{
      height:33.33%;
      width:25%;
      display:-webkit-flex;
      -webkit-flex-flow: column;
      -webkit-perspective: 1000;
      -moz-perspective: 1000;
      -o-perspective: 1000;
      perspective: 1000;
      border-bottom:1px white solid ;
      border-right:1px white solid ;
      
      
}

.sq1, .sq2, .sq3, .sq4
{
      border-top:1px white solid ;
      
}

.sq1, .sq5, .sq9
{
      border-left:1px white solid ;
}

.square, .front, .back
{
      position:relative;
      margin:0;
      padding:0;
}

.front, .back{
      height:100%;
      width:100%      
}

 .square .flipper .front .squarediv{
      display:-webkit-flex;
      -webkit-flex-flow: column;
      -webkit-justify-content: center;
      position:absolute;      
      bottom:2px;
      background-color:rgba(51,51,51,.2);
      left:3px;
      right:0;
      color:white;
      height:15%;
      font-size:1.2em;
      font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}

/* flip the pane when hovered -*/
.square:hover .flipper, .square.hover .flipper {
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
      transform: rotateY(180deg);
}

/* flip speed goes here */
.flipper {
      -webkit-transition: 0.6s;
      -webkit-transform-style: preserve-3d;
      -moz-transition: 0.6s;
      -moz-transform-style: preserve-3d;
      -o-transition: 0.6s;
      -o-transform-style: preserve-3d;
      transition: 0.6s;
      transform-style: preserve-3d;
      position: relative;
      height:100%;
}

/* hide back of pane during swap */
.front, .back {
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -o-backface-visibility: hidden;
      backface-visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;
      /*-moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;*/
      /*-webkit-box-shadow: 1px 2px 20px rgba(255, 255, 255, .6) inset, 1px 2px 5px 1px rgba(0, 0, 0, 0.5);
      -moz-box-shadow: 1px 2px 20px rgba(255,255,255,.6) inset, 1px 2px 5px 1px rgba(0,0,0,0.5);
      box-shadow: 1px 2px 20px rgba(255, 255, 255, .6) inset, 1px 2px 5px 1px rgba(0, 0, 0, 0.5);*/
}

/* front pane, placed above back */
.front {
      z-index: 2;
}

/* back, initially hidden pane */
.back {
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
      transform: rotateY(180deg);
      background-color: white;      
/*      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px; */
}

.square .flipper .front
{
      height:100%;
      width:100%;
      background-repeat:no-repeat;
}

.square .flipper .back
{
      height:100%;
      width:100%;
}

.square .flipper .back ol{
      padding:2px 5px 2px 5px;
      cursor:pointer;
}

 .square .flipper .back ol li
{
      height:20%;
      width:25%;
      margin:1px;
}

 .square .flipper .back ol li
{
      background-color:rgba(51,51,51,.2);
      padding:2px 0 2px 0;
      margin:2px 0 2px 0;
      font-size:1em;
      width:100%;
      color:white;
      font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}

  .sq1 .flipper .front
{
      background-image:url(../images/menu_lib.png), -webkit-linear-gradient(left top, #bf1818,#e55151); /* Red */
      background-image:url(../images/menu_lib.png), -moz-linear-gradient(left top, #bf1818,#e55151); /* Red */
      
      background-position:center center;
}

  .sq1 .flipper .back
{
      background-image:-webkit-linear-gradient(left top, #bf1818,#e55151); /* Red */
      background-image:-moz-linear-gradient(left top, #bf1818,#e55151); /* Red */
}

  .sq2 .flipper .front
{
      background-image:url(../images/menu_doc.png), -webkit-linear-gradient(left top, #2734b0,#5664e5); /* Dark Blue */
      background-image:url(../images/menu_doc.png), -moz-linear-gradient(left top, #2734b0,#5664e5); /* Dark Blue */
      background-position:center center;
}

  .sq2 .flipper .back
{
      background-image:-webkit-linear-gradient(left top, #2734b0,#5664e5); /* Dark Blue */
      background-image:-moz-linear-gradient(left top, #2734b0,#5664e5); /* Dark Blue */
}

  .sq3 .flipper .front
{
      background-image:url(../images/menu_rep.png), -webkit-linear-gradient(left top, #e75302,#f57c3b); /* Orange */
      background-image:url(../images/menu_rep.png), -moz-linear-gradient(left top, #e75302,#f57c3b); /* Orange */
      background-position:center center;
}

  .sq3 .flipper .back
{
      background-image:-webkit-linear-gradient(left top, #e75302,#f57c3b); /* Orange */
      background-image:-moz-linear-gradient(left top, #e75302,#f57c3b); /* Orange */
}

  .sq4 .flipper .front
{
      background-image:url(../images/menu_new.png), -webkit-linear-gradient(left top, #4796ef,#7bb2f1); /* Light Blue */
            background-image:url(../images/menu_new.png), -moz-linear-gradient(left top, #4796ef,#7bb2f1); /* Light Blue */
      background-position:center center;
}

  .sq4 .flipper .back
{
      background-image:-webkit-linear-gradient(left top, #4796ef,#7bb2f1); /* Light Blue */
            background-image:-moz-linear-gradient(left top, #4796ef,#7bb2f1); /* Light Blue */
}

  .sq5 .flipper .front
{
      background-image:url(../images/menu_enq.png), -webkit-linear-gradient(left top, #8b552a,#ac7345); /* Brown */
      background-image:url(../images/menu_enq.png), -moz-linear-gradient(left top, #8b552a,#ac7345); /* Brown */
      background-position:center center;
}

  .sq5 .flipper .back
{
      background-image:-webkit-linear-gradient(left top, #8b552a,#ac7345); /* Brown */
      background-image:-moz-linear-gradient(left top, #8b552a,#ac7345); /* Brown */
}

  .sq6 .flipper .front
{
      background-image:url(../images/menu_equ.png), -webkit-linear-gradient(left top, #28b55d,#49d87f); /* Green */
      background-image:url(../images/menu_equ.png), -moz-linear-gradient(left top, #28b55d,#49d87f); /* Green */
      background-position:center center;
}

  .sq6 .flipper .back
{
      background-image:-webkit-linear-gradient(left top, #28b55d,#49d87f); /* Green */
            background-image:-moz-linear-gradient(left top, #28b55d,#49d87f); /* Green */
}

  .sq7 .flipper .front
{
      background-image:url(../images/menu_est.png), -webkit-linear-gradient(left top, #fbcf00,#f1d659); /* Yellow */
            background-image:url(../images/menu_est.png), -moz-linear-gradient(left top, #fbcf00,#f1d659); /* Yellow */
      background-position:center center;
}

  .sq7 .flipper .back
{
      background-image:-webkit-linear-gradient(left top, #fbcf00,#f1d659); /* Yellow */
      background-image:-moz-linear-gradient(left top, #fbcf00,#f1d659); /* Yellow */
}

  .sq8 .flipper .front
{
      background-image:url(../images/menu_hea.png), -webkit-linear-gradient(left top, #28b55d,#49d87f); /* Green */
      background-image:url(../images/menu_hea.png), -moz-linear-gradient(left top, #28b55d,#49d87f); /* Green */
      background-position:center center;
}

  .sq8 .flipper .back
{
      background-image:-webkit-linear-gradient(left top, #28b55d,#49d87f); /* Green */
            background-image:-moz-linear-gradient(left top, #28b55d,#49d87f); /* Green */
}

  .sq9 .flipper .front
{
      background-image:url(../images/menu_inv.png), -webkit-linear-gradient(left top, #ca0021,#f03b59); /* Claret */
      background-image:url(../images/menu_inv.png), -moz-linear-gradient(left top, #ca0021,#f03b59); /* Claret */
      background-position:center center;
}

  .sq9 .flipper .back
{
      background-image:-webkit-linear-gradient(left top, #ca0021,#f03b59); /* Claret */
      background-image:-moz-linear-gradient(left top, #ca0021,#f03b59); /* Claret */
}

  .sq10 .flipper .front
{
      background-image:url(../images/menu_per.png), -webkit-linear-gradient(left top, #4796ef,#7bb2f1); /* Light Blue */
      background-image:url(../images/menu_per.png), -moz-linear-gradient(left top, #4796ef,#7bb2f1); /* Light Blue */
      background-position:center center;

}

  .sq10 .flipper .back
{
      background-image:-webkit-linear-gradient(left top, #4796ef,#7bb2f1); /* Light Blue */
      background-image:-moz-linear-gradient(left top, #4796ef,#7bb2f1); /* Light Blue */

}

  .sq11 .flipper .front
{
      background-image:url(../images/menu_pur.png), -webkit-linear-gradient(left top, #bf1818,#e55151); /* Red */
      background-image:url(../images/menu_pur.png), -moz-linear-gradient(left top, #bf1818,#e55151); /* Red */
      background-position:center center;
}

  .sq11 .flipper .back
{
      background-image:-webkit-linear-gradient(left top, #bf1818,#e55151); /* Red */
      background-image:-moz-linear-gradient(left top, #bf1818,#e55151); /* Red */
}


  .sq12 .flipper .front
{
      background-image:url(../images/menu_pro.png), -webkit-linear-gradient(left top, #2d5ec1,#4e7ad5); /* Med Blue */
      background-image:url(../images/menu_pro.png), -moz-linear-gradient(left top, #2d5ec1,#4e7ad5); /* Med Blue */
      background-position:center center;
}

  .sq12 .flipper .back
{
      background-image:-webkit-linear-gradient(left top, #2d5ec1,#4e7ad5); /* Med Blue */
      background-image:-moz-linear-gradient(left top, #2d5ec1,#4e7ad5); /* Med Blue */
}











<?php

session_start();

// If the user is logged in, the user_id cookie will be set
if (!isset($_SESSION['userid'])) {
    exit;
  }
 
?>
 
<!doctype html>




<html><head>
<meta charset="UTF-8">
<title>Cloud Contractor</title>

<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/cc_main.css">
<link rel="stylesheet" type="text/css" href="css/cc_main_menu.css">

<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
<script src="js/browser_detect.js"></script>

<script>
      $(document).ready(function() {
            $('.clients').click(function(){
                  
                  window.location.href = "scripts/clienttableload.php";
                  //$('.page_main').load('scripts/clienttableload.php');
                  
            });
        
      }); // end ready
</script>

<style>

</style>

</head>

<body>


    <section id="big_page">
   
        <section class="page_header">
              <img src="images/cc_logo.png"  alt="Cloud Contractor" />
        </section>
   
        <div class="page_main_wrapper">
            <section class="page_main">
                <section class="page_main_squares">
                   
                    <section class="sq1 square">
                        <div class="flipper">
                            <div class="front">
                                <!-- front content -->
                                <div class="squarediv">
                                    <p>Library</p>
                                 
                                </div>
                            </div>
                            <div class="back">
                                <!-- back content -->  
                                <ol>
                                    <li class="clients">Clients</li>
                                    <li>Contracts</li>
                                    <li>Suppliers</li>
                                    <li>Option 1</li>
                                    <li>Option 1</li>
                                </ol>
                            </div>
                        </div>
                    </section>
                   
                    <section class="sq2 square">
                        <div class="flipper">
                            <div class="front">
                                <!-- front content -->
                                <div class="squarediv">
                                    <p>Documents</p>
                                 
                                </div>
                            </div>
                            <div class="back">
                                <!-- back content -->  
                                <ol>
                                    <li class="clients">Clients</li>
                                    <li>Contracts</li>
                                    <li>Suppliers</li>
                                    <li>Option 1</li>
                                    <li>Option 1</li>
                                </ol>
                            </div>
                        </div>
                    </section>
                   
                    <section class="sq3 square">
                        <div class="flipper">
                            <div class="front">
                                <!-- front content -->
                                <div class="squarediv">
                                    <p>Reports</p>
                                 
                                </div>
                            </div>
                            <div class="back">
                                <!-- back content -->  
                                <ol>
                                    <li class="clients">Clients</li>
                                    <li>Contracts</li>
                                    <li>Suppliers</li>
                                    <li>Option 1</li>
                                    <li>Option 1</li>
                                </ol>
                            </div>
                        </div>
                    </section>
                   
                    <section class="sq4 square">
                        <div class="flipper">
                            <div class="front">
                                <!-- front content -->
                                <div class="squarediv">
                                    <p>News</p>
                                 
                                </div>
                            </div>
                            <div class="back">
                                <!-- back content -->  
                                <ol>
                                    <li class="clients">Clients</li>
                                    <li>Contracts</li>
                                    <li>Suppliers</li>
                                    <li>Option 1</li>
                                    <li>Option 1</li>
                                </ol>
                            </div>
                        </div>
                    </section>
                   
                    <section class="sq5 square">
                        <div class="flipper">
                            <div class="front">
                                <!-- front content -->
                                <div class="squarediv">
                                    <p>Enquiries</p>
                                 
                                </div>
                            </div>
                            <div class="back">
                                <!-- back content -->  
                                <ol>
                                    <li class="clients">Clients</li>
                                    <li>Contracts</li>
                                    <li>Suppliers</li>
                                    <li>Option 1</li>
                                    <li>Option 1</li>
                                </ol>
                            </div>
                        </div>
                    </section>
                   
                    <section class="sq6 square">
                        <div class="flipper">
                            <div class="front">
                                <!-- front content -->
                                <div class="squarediv">
                                    <p>Equipment</p>
                                 
                                </div>
                            </div>
                            <div class="back">
                                <!-- back content -->  
                                <ol>
                                    <li class="clients">Clients</li>
                                    <li>Contracts</li>
                                    <li>Suppliers</li>
                                    <li>Option 1</li>
                                    <li>Option 1</li>
                                </ol>
                            </div>
                        </div>
                    </section>
                   
                    <section class="sq7 square">
                        <div class="flipper">
                            <div class="front">
                                <!-- front content -->
                                <div class="squarediv">
                                    <p>Estimating</p>
                                 
                                </div>
                            </div>
                            <div class="back">
                                <!-- back content -->  
                                <ol>
                                    <li class="clients">Clients</li>
                                    <li>Contracts</li>
                                    <li>Suppliers</li>
                                    <li>Option 1</li>
                                    <li>Option 1</li>
                                </ol>
                            </div>
                        </div>
                    </section>
                   
                    <section class="sq8 square">
                        <div class="flipper">
                            <div class="front">
                                <!-- front content -->
                                <div class="squarediv">
                                    <p>Health & Safety</p>
                                 
                                </div>
                            </div>
                            <div class="back">
                                <!-- back content -->  
                                <ol>
                                    <li class="clients">Clients</li>
                                    <li>Contracts</li>
                                    <li>Suppliers</li>
                                    <li>Option 1</li>
                                    <li>Option 1</li>
                                </ol>
                            </div>
                        </div>
                    </section>
                   
                    <section class="sq9 square">
                        <div class="flipper">
                            <div class="front">
                                <!-- front content -->
                                <div class="squarediv">
                                    <p>Invoicing</p>
                                 
                                </div>
                            </div>
                            <div class="back">
                                <!-- back content -->  
                                <ol>
                                    <li class="clients">Clients</li>
                                    <li>Contracts</li>
                                    <li>Suppliers</li>
                                    <li>Option 1</li>
                                    <li>Option 1</li>
                                </ol>
                            </div>
                        </div>
                    </section>
                   
                    <section class="sq10 square">
                        <div class="flipper">
                            <div class="front">
                                <!-- front content -->
                                <div class="squarediv">
                                    <p>Personnel</p>
                                 
                                </div>
                            </div>
                            <div class="back">
                                <!-- back content -->  
                                <ol>
                                    <li class="clients">Clients</li>
                                    <li>Contracts</li>
                                    <li>Suppliers</li>
                                    <li>Option 1</li>
                                    <li>Option 1</li>
                                </ol>
                            </div>
                        </div>
                    </section>
                   
                    <section class="sq11 square">
                        <div class="flipper">
                            <div class="front">
                                <!-- front content -->
                                <div class="squarediv">
                                    <p>Purchasing</p>
                                 
                                </div>
                            </div>
                            <div class="back">
                                <!-- back content -->  
                                <ol>
                                    <li class="clients">Clients</li>
                                    <li>Contracts</li>
                                    <li>Suppliers</li>
                                    <li>Option 1</li>
                                    <li>Option 1</li>
                                </ol>
                            </div>
                        </div>
                    </section>
                   
                    <section class="sq12 square">
                        <div class="flipper">
                            <div class="front">
                                <!-- front content -->
                                <div class="squarediv">
                                    <p>Project Management</p>
                                 
                                </div>
                            </div>
                            <div class="back">
                                <!-- back content -->  
                                <ol>
                                    <li class="clients">Clients</li>
                                    <li>Contracts</li>
                                    <li>Suppliers</li>
                                    <li>Option 1</li>
                                    <li>Option 1</li>
                                </ol>
                            </div>
                        </div>
                    </section>
               
                </section>
            </section>
        </div>
   
        <section class="page_footer">
   
        </section>
   
    </section>

</body>

</html>
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Kyle HamiltonData ScientistCommented:
a link to the page would be better.

with that code alone, only a blank page is displayed.

I know this doesn't actually answer your question, but you are welcome to have a look at a flipper I made that works on MAC and PC, and see if you can spot where the differences are:

http://candpgeneration.com/toys/memory.php
0
maddisoncrAuthor Commented:
thank you.. i'll have a quick look now.. failing that i'll get a link posted
0
maddisoncrAuthor Commented:
sorry about the delay with the link but i was having an issue getting onto my server..

http://cloud-contractor.co.uk/test.php
0
Kyle HamiltonData ScientistCommented:
I rewrote your cc_main_menu.css. THe flipping code is up at the top, and your custom styles follow. I might have messed up some styling in the process, but that should be easily fixable. Also, I don't have all the vendor prefixes, so you might need to add those back in:

/* 
    Document   : card-flip
    Created on : Jun 11, 2012, 9:48:18 AM
    Author     : kylehamilton
    Description:
        Purpose of the stylesheet follows.
*/




.flipper {
    float: left;
    height: 100%;
    position: relative;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
}

.flipper .front {
    float: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    width: inherit;
    height: inherit;
    -webkit-transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;

    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;

    cursor:pointer;
}
.flipper:hover .front {
    z-index: 900;
    border-color: #eee;
    -webkit-transform: rotateY(180deg);
}

.flipper .back {
    float: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 800;
    width: inherit;
    height: inherit;


    -webkit-transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
}

.flipper:hover .back {
    z-index: 1000;
    -webkit-transform: rotateY(0deg);
    box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
}



/********* STYLING ********/
.square, .front, .back
{
    position:relative;
    margin:0;
    padding:0;
}

.front, .back{
    margin:0;
    padding:0;
    height:100%;
    width:100%;
    top: 0;
    left: 0;
}

 .square .flipper .front .squarediv{
    display:-webkit-flex;
    -webkit-flex-flow: column; 
    -webkit-justify-content: center;
    position:absolute;  
    bottom:2px;
    background-color:rgba(51,51,51,.2);
    left:3px;
    right:0;
    color:white;
    height:15%;
    font-size:1.2em;
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}

.page_main_squares{
    display:-webkit-flex;
    -webkit-flex-flow: row wrap; 
    height:100%;
    width:100%;
}

.square{
    height:33.33%;
    width:25%;
    display:-webkit-flex;
    -webkit-flex-flow: column; 

    border-bottom:1px white solid ;
    border-right:1px white solid ;
    
    
}

.sq1, .sq2, .sq3, .sq4
{
    border-top:1px white solid ;
    
}

.sq1, .sq5, .sq9
{
    border-left:1px white solid ;
}

.square .flipper .front
{
    height:100%;
    width:100%;
    background-repeat:no-repeat;
}

.square .flipper .back
{
    height:100%;
    width:100%;
}

.square .flipper .back ol{
    padding:2px 5px 2px 5px;
    cursor:pointer;
}

 .square .flipper .back ol li
{
    height:20%;
    width:25%;
    margin:1px;
}

 .square .flipper .back ol li 
{
    background-color:rgba(51,51,51,.2);
    padding:2px 0 2px 0;
    margin:2px 0 2px 0;
    font-size:1em;
    width:100%;
    color:white;
    font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}

  .sq1 .flipper .front
{
    background-image:url(../images/menu_lib.png), -webkit-linear-gradient(left top, #bf1818,#e55151); /* Red */
    background-image:url(../images/menu_lib.png), -moz-linear-gradient(left top, #bf1818,#e55151); /* Red */
    
    background-position:center center;
}

  .sq1 .flipper .back
{
    background-image:-webkit-linear-gradient(left top, #bf1818,#e55151); /* Red */
    background-image:-moz-linear-gradient(left top, #bf1818,#e55151); /* Red */
}

  .sq2 .flipper .front
{
    background-image:url(../images/menu_doc.png), -webkit-linear-gradient(left top, #2734b0,#5664e5); /* Dark Blue */
    background-image:url(../images/menu_doc.png), -moz-linear-gradient(left top, #2734b0,#5664e5); /* Dark Blue */
    background-position:center center;
}

  .sq2 .flipper .back
{
    background-image:-webkit-linear-gradient(left top, #2734b0,#5664e5); /* Dark Blue */
    background-image:-moz-linear-gradient(left top, #2734b0,#5664e5); /* Dark Blue */
}

  .sq3 .flipper .front
{
    background-image:url(../images/menu_rep.png), -webkit-linear-gradient(left top, #e75302,#f57c3b); /* Orange */
    background-image:url(../images/menu_rep.png), -moz-linear-gradient(left top, #e75302,#f57c3b); /* Orange */
    background-position:center center;
}

  .sq3 .flipper .back
{
    background-image:-webkit-linear-gradient(left top, #e75302,#f57c3b); /* Orange */
    background-image:-moz-linear-gradient(left top, #e75302,#f57c3b); /* Orange */
}

  .sq4 .flipper .front
{
    background-image:url(../images/menu_new.png), -webkit-linear-gradient(left top, #4796ef,#7bb2f1); /* Light Blue */
        background-image:url(../images/menu_new.png), -moz-linear-gradient(left top, #4796ef,#7bb2f1); /* Light Blue */
    background-position:center center;
}

  .sq4 .flipper .back
{
    background-image:-webkit-linear-gradient(left top, #4796ef,#7bb2f1); /* Light Blue */
        background-image:-moz-linear-gradient(left top, #4796ef,#7bb2f1); /* Light Blue */
}

  .sq5 .flipper .front
{
    background-image:url(../images/menu_enq.png), -webkit-linear-gradient(left top, #8b552a,#ac7345); /* Brown */
    background-image:url(../images/menu_enq.png), -moz-linear-gradient(left top, #8b552a,#ac7345); /* Brown */
    background-position:center center;
}

  .sq5 .flipper .back
{
    background-image:-webkit-linear-gradient(left top, #8b552a,#ac7345); /* Brown */
    background-image:-moz-linear-gradient(left top, #8b552a,#ac7345); /* Brown */
}

  .sq6 .flipper .front
{
    background-image:url(../images/menu_equ.png), -webkit-linear-gradient(left top, #28b55d,#49d87f); /* Green */
    background-image:url(../images/menu_equ.png), -moz-linear-gradient(left top, #28b55d,#49d87f); /* Green */
    background-position:center center;
}

  .sq6 .flipper .back
{
    background-image:-webkit-linear-gradient(left top, #28b55d,#49d87f); /* Green */ 
        background-image:-moz-linear-gradient(left top, #28b55d,#49d87f); /* Green */ 
}

  .sq7 .flipper .front
{
    background-image:url(../images/menu_est.png), -webkit-linear-gradient(left top, #fbcf00,#f1d659); /* Yellow */
        background-image:url(../images/menu_est.png), -moz-linear-gradient(left top, #fbcf00,#f1d659); /* Yellow */
    background-position:center center;
}

  .sq7 .flipper .back
{
    background-image:-webkit-linear-gradient(left top, #fbcf00,#f1d659); /* Yellow */
    background-image:-moz-linear-gradient(left top, #fbcf00,#f1d659); /* Yellow */
}

  .sq8 .flipper .front
{
    background-image:url(../images/menu_hea.png), -webkit-linear-gradient(left top, #28b55d,#49d87f); /* Green */
    background-image:url(../images/menu_hea.png), -moz-linear-gradient(left top, #28b55d,#49d87f); /* Green */
    background-position:center center;
}

  .sq8 .flipper .back
{
    background-image:-webkit-linear-gradient(left top, #28b55d,#49d87f); /* Green */
        background-image:-moz-linear-gradient(left top, #28b55d,#49d87f); /* Green */
}

  .sq9 .flipper .front
{
    background-image:url(../images/menu_inv.png), -webkit-linear-gradient(left top, #ca0021,#f03b59); /* Claret */
    background-image:url(../images/menu_inv.png), -moz-linear-gradient(left top, #ca0021,#f03b59); /* Claret */
    background-position:center center;
}

  .sq9 .flipper .back
{
    background-image:-webkit-linear-gradient(left top, #ca0021,#f03b59); /* Claret */
    background-image:-moz-linear-gradient(left top, #ca0021,#f03b59); /* Claret */
}

  .sq10 .flipper .front
{
    background-image:url(../images/menu_per.png), -webkit-linear-gradient(left top, #4796ef,#7bb2f1); /* Light Blue */
    background-image:url(../images/menu_per.png), -moz-linear-gradient(left top, #4796ef,#7bb2f1); /* Light Blue */
    background-position:center center;

}

  .sq10 .flipper .back
{
    background-image:-webkit-linear-gradient(left top, #4796ef,#7bb2f1); /* Light Blue */
    background-image:-moz-linear-gradient(left top, #4796ef,#7bb2f1); /* Light Blue */

}

  .sq11 .flipper .front
{
    background-image:url(../images/menu_pur.png), -webkit-linear-gradient(left top, #bf1818,#e55151); /* Red */
    background-image:url(../images/menu_pur.png), -moz-linear-gradient(left top, #bf1818,#e55151); /* Red */
    background-position:center center;
}

  .sq11 .flipper .back
{
    background-image:-webkit-linear-gradient(left top, #bf1818,#e55151); /* Red */
    background-image:-moz-linear-gradient(left top, #bf1818,#e55151); /* Red */
}


  .sq12 .flipper .front
{
    background-image:url(../images/menu_pro.png), -webkit-linear-gradient(left top, #2d5ec1,#4e7ad5); /* Med Blue */
    background-image:url(../images/menu_pro.png), -moz-linear-gradient(left top, #2d5ec1,#4e7ad5); /* Med Blue */
    background-position:center center;
}

  .sq12 .flipper .back
{
    background-image:-webkit-linear-gradient(left top, #2d5ec1,#4e7ad5); /* Med Blue */
    background-image:-moz-linear-gradient(left top, #2d5ec1,#4e7ad5); /* Med Blue */
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
maddisoncrAuthor Commented:
Fantastic thank you.. i'll have a look through and try and figure out where it was going wrong.. but thanks again
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.