• Totally fluid, as in it resizes in both axes in accordance with changing content size.
• Each corner needs actual transparency to sit on gradient backgrounds.

There are hundreds of methods posted online about how to do fancy corners on boxes using CSS, but quite a lot of them just don’t have transparency involved, or worse still use a hack here and there or use a sprinkling of absolutely positioned, empty divs.

So what to do about the boxes having exhausted quite an extensive Google search and not finding a method that really suited me? Make one up of course. For those of us still stuck supporting IE6 as well as a raft of other browsers and their various editions, while offering a text resizing facility on the site, this meant it has to be remarkably robust.

The following method is the one I made for four corners only, with no border fanciness. In fact the graphical requirements were so simple that actually all the corners are the same GIF file as a ball, used much like you would a sprite:

/* White boxes */
div.box {
width: 100%;
margin: 0 0 10px 0;
overflow: hidden;
background: url(../images/common/corners.gif) no-repeat top left;
}
div.box div {background: url(../images/common/corners.gif) no-repeat top right;}
div.box div div {background-position: bottom left;}
div.box div div div {
background-position: bottom right;
padding: 6px 0;
}
div.box div div div div {
padding: 0;
background: #fff none;
position: relative;
}
div.box div div div div div {
margin: 0 8px;
top: -6px;
}
div.box div div div div div div {
margin: 0;
top: 12px;
}
div.box div div div div div div div {
top: -6px;
overflow: auto;
background: none;
width: 100%;
}
div.box div div div div div div div div {
top: 0;
width: auto;
padding: 0;
}

And then the XHTML:

<div class="box"><div><div><div><div><div><div><div>
<strong>Some sample content<br /><br />
Additional lines.</strong>
</div></div></div></div></div></div></div></div>

Resulting in something like this:

Because I haven’t used floats or any form of containment yet this box will just happily expand to fill the width it is in, and will grow with the content inside it just like a div tag ought to. However you might like to float the outer div or give it a width in EM or percent to make use of this fluid-ness. It can be easily adapted and expanded for many cornered box purposes, since with a bit of additional markup I made one with a solid rounded corner border all the way around.

See all the older shots I’ve taken in the past in this group of Dartmoor shots.

Out of interest there are a lot of new websites appearing that make use of flickr’s APIs to display information but here is one that has been around for a while and seems to provide quite a few hits: http://fiveprime.org/hivemind/User/srjm. It also helps to remind me of old things.

Misty winter morning steps to work.

Arrival of the massive box for my new PC.

Because there was a video on YouTube of the PC game Witcher’s strange monkey creature, or Mamune which has subsequently been removed I decided to record my own and upload it.

http://www.youtube.com/watch?v=QEQlT8WVhVs

http://witcher.wikia.com/wiki/Mamune

A T-Shirt for sale with everyone’s names printed on it!

So I took this opportunity to start up my old computer, which is running a pretty much clean install of Windows 98 updated as far as it was supported, all on a Pentium 4 with 512mb of RAM and the high-end Geforce 2 GPU: astronomical power compared to what 95 and 98 were intended to work with normally. And then there is Internet Explorer 6!

I was a little bit astonished to discover that despite my fears that the new CSS would collapse in a heap, everything was generally rendering exactly where it was meant to be. The only issues were superficial ones, such as transparent PNGs rendering as grey which were easily fixed. In the end I did make an effort to ensure that users browsing with IE6 do have a reasonable experience.

For the Scripting for Digital Media coursework I created an interactive flash header for my website of the time. I created gallery and media object classes that loaded images from the server and displayed them in an attractive, fully scripted animation with a realistic reflection from a shiny surface.

Click the arrow orb, and then select which gallery to view. To change the speed of the gallery animation use the circular controller to the top left or use your keyboard’s Left and Right arrow keys. Where multiple galleries are present Up and Down may be used to flip between them.

Documentation

Related Journal posts:

Scripting for Digital Media

A Note on Actionscript Classes

Flash Actionscript Image Reflections

Finishing Scripting and Update

Scripting Finished