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

}
 
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 Bottom