SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You have 2 spaces before the deg unit which webkit doesn't like and you have set the element to inline and webkit won't apply this property to inline elements. The element needs to be block or inline-block in order for dimensions to be applied anyway.

    This is working.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Skew Test</title>
    <link rel="stylesheet" href="test.css" type="text/css" />
    <style>
    nav {
        display:block;
        margin:15px;
        padding:15px;
        height:100px;
    }
    
    ul {
        list-style-type:none;
        margin:25px 0px;
        padding:0;
    }
    
    li {
        display:inline-block;
        background:#0C3;
        width: 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, 0deg);
      transform: skew(-20deg, 0deg);
    }
    
    </style>
    </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>

  3. #3
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you! That got it - and taught me something I didn't know (that dimensions are not applied to inline li elements).


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
  •