• 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?

Miko

Well-known member
#1
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
#3
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
#6
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
#7
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
#8
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
#9
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
#10
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
#11
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
#12
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
#13
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
#14
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
#15
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