SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Threaded View

  1. #1
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 2D transform working in FF, IE9, O, but not Webkit?

    I'm baffled by this one. I want to apply a CSS skew transform to the <li>'s in a horizontal menu of links. And the code I've written works (the skew is applied) in three of the five latest browsers: FF, IE9, and Opera -- but not Chrome or Safari!?!

    Here is an example of the test HTML:
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Skew Test</title>
    <link rel="stylesheet" href="test.css" type="text/css" />
    </head>
    
    <body>
    <nav>
    <ul>
    <li>
    <a href="#">link 1</a>
    </li>
    <li>
    <a href="#">link 2</a>
    </li>
    <li>
    <a href="#">link 3</a>
    </li>
    </ul>
    </nav>
    <nav>
    <ul>
    <li class="skewed">
    <a href="#">link 1</a>
    </li>
    <li class="skewed">
    <a href="#">link 2</a>
    </li>
    <li class="skewed">
    <a href="#">link 3</a>
    </li>
    </ul>
    </nav>
    </body>
    </html>
    And here is the CSS:
    Code:
    nav {
        display:block;
        margin:15px;
        padding:15px;
        height:100px;
    }
    
    ul {
        list-style-type:none;
        margin:25px 0px;
        padding:0;
    }
    
    li {
        display:inline;
        background:#0C3;
        width: 30px;
        height:50px;
        margin: 15px 5px;
        padding:10px 10px;
        border:#F03 thick solid;
    }
    
    .skewed {
      /* skew the object horizontally by 20 degrees clockwise */
      -moz-transform: skew(-20deg, 0deg);
      -ms-transform: skew(-20deg, 0deg);
      -o-transform: skew(-20deg, 0deg);
      -webkit-transform: skew(-20deg, 0 deg);
      transform: skew(-20deg, 0 deg);
    }
    As I said, this works for me -- the <li>'s all skew properly -- in 3 browsers, but not in the ones that were first to come out with CSS transformations (Webkit)!
    What in the world am I doing wrong? Where is the bug in my css?
    Last edited by Paul O'B; Apr 27, 2011 at 02:33. Reason: code tags added


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •