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

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 :)
 

Miko

Well-known 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%;
That does the trick nicely, thank you.

How widely is supported in older browsers?
 

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%;
 

Miko

Well-known 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%;

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

Miko

Well-known 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%;
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.
 

Kier

XenForo developer
Staff 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.
Is the width set to 99% in IE 6 and 7?
 

Miko

Well-known member
Is the width set to 99% in IE 6 and 7?
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 .....
 

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%.
 

Miko

Well-known 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%.
Unfortunately doesn't work in IE7, no matter what width I enter ... even down to *width: 60%; it keep showing 100% + 2px
 

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?
 

Miko

Well-known member
I've really no idea why the special width isn't being picked up... what does the final rendered CSS look like?
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%;

}
 

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
 
Top