1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Is it possible to use xen:cal with % percentage?

Discussion in 'XenForo Development Discussions' started by Miko, Jan 31, 2011.

  1. Miko

    Miko Well-Known Member

    Does anyone knows if it's possible to use xen:cal to calculate 100% width -2px?
    I have tested
    Code:
     width: {xen:calc '100% - 2'}px;
    without luck :( in all my tests i could only get the xen:cal to work with fixed numerical value and not percentages.

    Hoping that I'm wrong and that there is a easy way of doing it :)
     
    Floris likes this.
  2. Kier

    Kier XenForo Developer Staff Member

    No, there's absolutely no way to do that. Damned CSS. if you are trying to do a width of 100% with a 1px border, try this instead:

    width: 100%;
    box-sizing: border-box;
    _width: 99%;
     
  3. Miko

    Miko Well-Known Member

    That does the trick nicely, thank you.

    How widely is supported in older browsers?
     
  4. Kier

    Kier XenForo Developer Staff Member

    CyberAP likes this.
  5. Miko

    Miko Well-Known Member

    Kier likes this.
  6. Kier

    Kier XenForo Developer Staff Member

    Of course, you've all spotted my deliberate mistake - we should be using the star hack to target IE6 and 7, as the underscore hack only targets IE6. Hence:
    Code:
    width: 100%;
    box-sizing: border-box;
    *width: 99%;
     
  7. Miko

    Miko Well-Known Member


    Not at first, but after testing it in IETester I did pick it up :)
     
  8. Miko

    Miko Well-Known Member

    Hi Kier,
    Today I did further testing and unfortunately this hack does not work in IE7 or IE6
    It does solve the issues in IE8, Firefox, Safari, Chrome and Opera

    IE7 and 6 (not that I'm supporting it) are showing the extra 2 pixels for the border on top of the 100% width.
     
  9. Kier

    Kier XenForo Developer Staff Member

    Is the width set to 99% in IE 6 and 7?
     
  10. Miko

    Miko Well-Known Member

    Exactly as below

    Code:
    width: 100%;
    box-sizing: border-box;
    *width: 99%;
    The div giving the problem is .navTabs .navTab.selected .tabLinks {

    I have added a border to the right and one to the left .....
     
  11. Mike

    Mike XenForo Developer Staff Member

    Really you just have to experiment with the percentage, since IE6 and 7 don't support the useful version of the box model (in standards mode). You probably just need to drop the percentage down to 97 or 98%.
     
  12. Miko

    Miko Well-Known Member

    Unfortunately doesn't work in IE7, no matter what width I enter ... even down to *width: 60%; it keep showing 100% + 2px
     
  13. Kier

    Kier XenForo Developer Staff Member

    I've really no idea why the special width isn't being picked up... what does the final rendered CSS look like?
     
  14. Miko

    Miko Well-Known Member

    No idea either, after you posted that CSS the other day I followed up with more research about it and it should work :p

    Code:
    .navTabs .navTab.selected .tabLinks {
    background: rgb(51, 51, 51) url('styles/something/xenforo/something.png') repeat-x 0 0;
    border-top-width: 0;
    border-right: 1px solid rgb(59, 59, 59);
    border-bottom-width: 0;
    border-left: 1px solid rgb(59, 59, 59);
    width: 100%;
    box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box;
    *width: 99%;
    
    }
     
  15. Miko

    Miko Well-Known Member

    Fixed it, with the !important declaration :)

    What is strange is that the CSS was already cascading last, I don't why it should need the !important

    Code:
    *width: 99.8% !important;


    Thank you for your help
     
  16. Kier

    Kier XenForo Developer Staff Member

    Most bizarre, but at least it works now :)
     

Share This Page