Welcome to WebmasterWorld Guest from 54.145.71.115

Forum Moderators: not2easy

Message Too Old, No Replies

Maths in CSS

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

     
12:01 am on Aug 7, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 21, 2002
posts:977
votes: 0


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.
6:45 am on Aug 7, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:June 7, 2002
posts:475
votes: 0


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.

6:51 am on Aug 7, 2002 (gmt 0)

Full Member

10+ Year Member

joined:Mar 14, 2002
posts:325
votes: 0


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

7:15 am on Aug 7, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 21, 2002
posts:977
votes: 0


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.
7:43 am on Aug 7, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:June 7, 2002
posts:475
votes: 0


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.

12:23 pm on Aug 7, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 10, 2001
posts:793
votes: 0


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

11:27 pm on Aug 7, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 21, 2002
posts:977
votes: 0


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 :)
8:56 am on Aug 8, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 10, 2001
posts:793
votes: 0


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...
12:06 pm on Aug 8, 2002 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 5, 2002
posts:142
votes: 0


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?

10:23 pm on Aug 8, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 21, 2002
posts:977
votes: 0


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).
3:49 am on Aug 15, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 21, 2002
posts:977
votes: 0


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. :(

11:10 am on Aug 15, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 10, 2001
posts:793
votes: 0


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)