Back to YAP Forum
0

Bug with CSS property background-position

This is a pretty nit-pick issue but the caja parser throws an error if you try to set the xpos to "left" or "right" with the CSS property background-position.

DOES NOT WORK:
background: url(http://www.example.com/path/to/image.png) #fff no-repeat center left;
background: url(http://www.example.com/path/to/image.png) #fff no-repeat center right;

(Throws the "Fatal Exception: java.lang.ClassCastException: ModuleEnvelope" error.)

WORKS:
background: url(http://www.example.com/path/to/image.png) #fff no-repeat center center;

I tried splitting up the background properties into the following but it still resulted in the same error:

background: url(http://www.example.com/path/to/image.png);
background-color: #fff;
background-repeat: no-repeat;
background-position: center left;
background-attachment: fixed;

Is there a work-around for this?

by
Report Abuse
5 Replies
  • Good catch burntber. I ran a few tests on my apps and was able to duplicate the issue as well. I'll file a bug against the platform this morning to remedy this problem.

    Thanks.

    Jonathan LeBlanc
    Senior Software Engineer
    Yahoo! Developer Network

    QUOTE (burntber @ Feb 12 2009, 02:53 PM) <{POST_SNAPBACK}>
    This is a pretty nit-pick issue but the caja parser throws an error if you try to set the xpos to "left" or "right" with the CSS property background-position.

    DOES NOT WORK:
    background: url(http://www.example.com/path/to/image.png) #fff no-repeat center left;
    background: url(http://www.example.com/path/to/image.png) #fff no-repeat center right;

    (Throws the "Fatal Exception: java.lang.ClassCastException: ModuleEnvelope" error.)

    WORKS:
    background: url(http://www.example.com/path/to/image.png) #fff no-repeat center center;

    I tried splitting up the background properties into the following but it still resulted in the same error:

    background: url(http://www.example.com/path/to/image.png);
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center left;
    background-attachment: fixed;

    Is there a work-around for this?
    Report Abuse
    0
  • I took another quick look at the W3C specs for the background shorthand notation here: http://www.w3.org/TR/css3-background/#the-...ground-position and I think I see the issue. It looks like the x-pos and y-pos elements in the shorthand are swapped in the CSS samples. x-pos and y-pos share "center" as an attribute so that's why that is working. The following CSS worked for me:

    CODE
    background: url(http://www.example.com/path/to/image.png) #fff left center no-repeat
    background: url(http://www.example.com/path/to/image.png) #fff right center no-repeat


    Hope that helps,
    Jon
    Report Abuse
    0
  • Excellent, thank you. That works for me too.
    Report Abuse
    0
  • I'm having a related issue with the border-top property.

    I'm trying to set the following via java script:

    document.getElementById('element_id').style.borderTop = '1px solid #ccc';

    OR

    document.getElementById('element_id').style.borderTop = 'none';

    I get the errors:
    bad value '1px solid #ccc' for CSS property borderTop
    bad value 'none' for CSS property borderTop
    Report Abuse
    0
  • You're coming across some interesting CSS issues with Caja. I tried to get the shorthand notation to work but I hit the same walls as you. I'm going to explore this a little bit more but here's the solution so you can keep going. I set the properties individually and it worked for me, like so:

    CODE
    var elem = document.getElementById('element_id');
    elem.style.borderWidth = "1px 0 0 0";
    elem.style.borderStyle = "solid none none none";
    elem.style.borderColor = "#ccc";


    - Jon

    QUOTE (burntber @ Feb 13 2009, 01:17 PM) <{POST_SNAPBACK}>
    I'm having a related issue with the border-top property.

    I'm trying to set the following via java script:

    document.getElementById('element_id').style.borderTop = '1px solid #ccc';

    OR

    document.getElementById('element_id').style.borderTop = 'none';

    I get the errors:
    bad value '1px solid #ccc' for CSS property borderTop
    bad value 'none' for CSS property borderTop
    Report Abuse
    0
Ask a Question

Recent Posts

in YAP