SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    clip:rect() what are permisible values?

    simple question:


    when using the clip:rect(); property are percentages allowed. I thought they were (http://www.hypergurl.com/csstutorial10.html) but whenever I do something like, it seems to ignore the clipping, if yu change the percent to some pt, px, or em it works?!:


    CSS
    * {margin: 0;padding:0}
    .double{float: left; background: orange; position: relative;color:red; margin:1em;padding:1em }
    .none{clear: both}
    p:hover.double:after{content:attr(title); position: absolute; top:0; left:0; background: yellow; color:black; padding:1em; display: block; clip: rect(auto auto 50% auto); }

    HTML
    <p class="double" title="Sample Text">Sample Text </p>
    <p class="none" title="">something else </p>
    <p class="double" title="Another">Another</p>



    what did I miss?

    Thanks all for your help

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Not all websites are correct, however there is one that is .

    Percentages on the clip property make no sense anyway
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    ryan...


    well that's why I kept googling around until I found that "erroneous" site. White W3C has examples with pixels values it does say that only px values are allowed, ot that only &#37; valuels are NOT allowed. :/ poor documenting, me thinks. and since em and pt values work, why not percentages.

    which leads me to : why would percentages make sense?

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Percentages don't make sense to me because think about it.
    What are the percentages basing hte percent off of? For widths when you use percents it bases it off the parents width.

    What would the clip percentages base the &#37;'s off of? No sense at all lol

    W3.org doesn't NOT say that percent values can't be used. On the site they give acceptable values. THey don't specifically state what value can't be used.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    so, what you are saying is that in this case:
    .double{float: left; background: orange; position: relative;color:red; margin:1em;padding:1em }
    .none{clear: both}
    .double:after{content:attr(title); position: absolute; top:0; left:0; background: yellow; color:black; padding:1em; display: block; clip: rect(auto auto 50&#37; auto); }

    what it would calculate would be 50% of the height .double:after, which is... the same height as ( I thought, the same as .double)...

    btw, when I test thsi code NOTHING happens... as if its ignoring the rule completely, which is why I thought that the err was in my use of a percent value, as the HTML validates...

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Huh? I was giving an example b efore with the width/height talk. It was an examploe to show how percentage values are calculated

    When you give a percentage it has to base that percentage off the parent (in width/height).

    Logically think about this. If a clip has a percentage value in it, what would it base that percent v alue off of?

    If you can't find an answer (if you do it's still wrong ) then that means that the percentage value can't be used.

    I've already given the answer in this thread in my last post
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    oooooooh.. so what you are saying ( for the slow/battling flu while coding... ) is that a "clip" cant calculate a percentage because it has no "parent"?

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

    The specs don't define percentages for clip so that's why they aren't available.

    I guess also that if percentages were allowed then they would have to have some special case applied because in the case of margins and padding percentage values refer to the width of the containing block (even for vertical margins/padding). This of course would not work for clipping in any usable way. It would need to have a meaning similar to height where a height percentage refers to the height of the element but that means there would also need to be a fixed height for this to work.

    I don't see why it couldn't be made to work though and the specs do hint that irregular shapes may be used in the future so perhaps things will completely change.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    The specs don't define percentages for clip so that's why they aren't available.
    I've been trying to say that but you say it clearerly

    I guess also that if percentages were allowed then they would have to have some special case applied because in the case of margins and padding percentage values refer to the width of the containing block (even for vertical margins/padding). This of course would not work for clipping in any usable way. It would need to have a meaning similar to height where a height percentage refers to the height of the element but that means there would also need to be a fixed height for this to work.

    I don't see why it couldn't be made to work though and the specs do hint that irregular shapes may be used in the future so perhaps things will completely change.
    Logically if you think about it. What would percents base the percent off of? There isn't an answer to that
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •