PDA

View Full Version : Tip: content-sized Button

swmr
05-03-2004, 04:52 PM
One way of styling button elements to an exact size (relative to their content); good for an ie-centric GUI, I suppose...


<html>
<head>
<title>LittleButton</title>

<style type="text/css">

button{
width:expression((offsetWidth - clientWidth) + children(0).offsetWidth);
height:expression((offsetHeight - clientHeight) + children(0).offsetHeight);
}
</style>

</head>
<body>

<button><img src="res://shell32.dll/2/230"></button>

</body>
</html>
swmr
05-03-2004, 06:06 PM
- should be a conditional expression (to avoid potential error, if no elements are contained)...


<html>
<head>
<title>LittleButton</title>

<style type="text/css">

button{
width:expression(children.length > 0 ? (offsetWidth - clientWidth) + children(0).offsetWidth : null);
height:expression(children.length > 0 ? (offsetHeight - clientHeight) + children(0).offsetHeight : null);
}
</style>

</head>
<body>

<button>
<strong>Styled</strong>
</button>
<br>
<button>
Unstyled
</button>

</body>
</html>
Choopernickel
05-03-2004, 09:05 PM
Might as well pop that style tag inside IE's conditional comments so as to avoid errors in any browser that doesn't support style expressions.
swmr
05-03-2004, 11:10 PM
- hadn't considered that (I use this in HTAs); but now that you mention it, there didn't seem to be any adverse reaction in Mozilla 1.6 (no errors reported, that is); couldn't hurt to be careful though...