Maths in CSS

Wouldn't it be great! - Dynamic Properties for CSS

[Purple Martin]

I've just found myself thinking for the zillionth time that it would be great if we could use maths in CSS, like this:

.myclass {
 width: 100% - 40px;
}

Oh well. I can dream.

[rewboss]

In fact, you don't need that. Theoretically at least, you should be able to write:

.myclass{
left: 0; right: 40px;
}

That places the left-hand edge on the left-hand edge of the containing element and the right-hand edge 40 pixels from the right-hand edge of the containing element.

[Duckula]

What would be great would be to set variables, like 'colorone = #f0f0f0' at the beginning, to make easier to change the global layout. And make the variable assignation available through the XHTML API on the <link /> tag.

And yes, I know that all that is possible using javascript and the 'style=' keyword. Let me dream :)

[Purple Martin]

rewboss, yes in theory that should work.

Unfortunately it's not working in this situation: I've got a DIV that contains a 20px image floated left, another 20px image floated right, and a centered DIV containing text. It goes something like this:

<DIV id="tab1" onClick="tab(1,true)" class="tab">
<IMG class="picL" SRC="images/tabl.gif" WIDTH="20" HEIGHT="20" BORDER="0" ALT="">
<IMG class="picR" SRC="images/tabr.gif" WIDTH="20" HEIGHT="20" BORDER="0" ALT="">
<DIV id="text1" class="text">Tab 1</DIV>
</DIV>
 

And in the stylesheet:

 
.tab {
position: absolute;
top: 0px;
width: 100%;
left: 0px;
height: 20px;
margin: 0px;
padding: 0px;
cursor: pointer;
}
.text {
position: absolute;
border-color: #FFFFFF #FFFFFF #666666 #FFFFFF;
border-style: solid;
border-width: 1px 0px 1px 0px;
background-color: #CECECE;
font-size: 14px;
text-align: center;
top: 0px;
left: 20px;
right: 20px;
height: 20px;
margin: 0px;
padding: 0px;
}
.picL {
float: left;
margin: 0px;
padding: 0px;
}
.picR {
float: right;
margin: 0px;
padding: 0px;
}

This application is for IE5.0 only :) and the HTML doesn't have line-breaks (I added them for the post to this board).

I don't know if it's the floated images, but: the images are floating correctly, the left edge of the "text1" DIV is snugly against the edge of the left image where it should be (at 20px), the text is left-aligned (not centered), and the right edge is not 20px from the right, it is where the text finishes (far further left than it should be).

There's an ugly JavaScript dynamic work-around but I'm still miffed about the CSS.

[rewboss]

That's an MSIE misfeature, not a problem with the CSS itself. Basically, if you define both left-hand and right-hand edges of an element, MSIE interprets the right-hand edge property to be the furthest it's allowed to go.

The same goes, incidentally, for top and bottom.

[joshie76]

IE5+ does support 'maths' in CSS. It's called dynamic properties [msdn.microsoft.com].

Example:

<div style="width:expression(document.body.clientWidth/2)">

They're incredibly powerful and can be very useful if you get the opportunity to code for IE5+ only. If only they were a standard (or something similar).

[Purple Martin]

joshie, that's brilliant, thanks very much.

I've solved the problem using dynamic properties by setting the left of the "text1" DIV to 20px, and the width to 40 less than the container's width. As the container is 100% of the body, the relevant bit of CSS looks like this:

left: 20px;
width: expression(document.body.offsetWidth - 40);

The great thing about this is that it's liquid! As the window gets resized, the div changes width smoothly. I'm so lucky the project is for an IE5 only environment :)

[joshie76]

I did post more about dynamic properties here in the Browser forum a month or two ago (in reply to another thread). I can't find the post anywhere...

[DrOliver]

I'm so lucky the project is for an IE5 only environment

Just my 2 cents: how can you be sure that is still so in lets say 12 to 24 months from now on? And you are maybe not with this company anymore by then and they need to change and have no clue what this code piece is all about? Well, okay, you might be gone by then so you possibly couldn't care any less, but then again...

So if you can't or don't want to go for "official" standards, write a documentation of how it's done and how it's supposed to work. That could even give you some extra credit. "See, it's browser specific, here's how it's done". To me, that sounds an awful lot better than "it's browser specific but that's no problem since there's only IE 5.x in this company".

Does that make sense?

[Purple Martin]

Yes DrOliver that does make sense. There really is no chance of the client changing to something other than IE, they are so ultra-conservative. As for what happens when I'm gone and someone else needs to update my work, don't worry I always comment my code (a habit I got into back in my VB days).

[Purple Martin]

A quick word of warning to anyone using Dynamic Properties. I've just stumbled across a nasty little bug/feature.

Let's look at the example already given:

width: expression(document.body.offsetWidth - 40);

If the offsetWidth is less than 40 then we're trying to set the width to a negative value, and obviously it won't work. But instead of just ignoring it, IE gives a JavaScript error message telling the whole world that there is an "Invalid argument". Not pretty. :(

[joshie76]

IE 6.0 (and maybe 5.5?) does seem to ignore such exceptions.

However, it's best to code around them by calling a function that ensures only *sensible* values are set, eg:

style="width:expression(getWidth();)" 
... 
<script type="text/javascript"> 
function getWidth() 
{ 
var returnWidth 
if ((document.body.offsetWidth - 40) < 0) 
{ 
returnWidth = 0; 
} 
else 
{ 
returnWidth = document.body.offsetWidth - 40; 
} 
return returnWidth 
} 
</script> 

Simple exception like this example can also be handled in-line with an immediate if, eg:

width:expression((document.body.offsetWidth-40) < 0 ? 0 : document.body.offsetWidth-40)