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

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.

It will be quite a simple structure of 5 pages (four plus a link to a CV download) as requested, tabbed, and with two main content columns that serve different purposes on each page. For the CSS aspect of this design I have experimented with fluid column widths on both sides, where the content is grouped clearly in two blocks but they centre and expand within their columns with the resizing of the page.

Tabs

Here is a screenshot of the site’s tabs I have been drawing out in their original vector format.

Naturally they will feature three states, an active tab that merges with the current page, an inactive tab and a highlighted inactive tab when a user moves their mouse over it.

Now I could tag these sites using del.icio.us under something like ‘inspiration’ but I think I would rather also have more specific information or notes and possibly a screenshot to add some context.

So I shall be recording these websites on a page here.

So at the top of my page, an area that is pushing boundaries anyway by being dynamically resized via flash and javascript, I wanted a nice curved appearance instead of boxes, so that I could reveal more of my page’s background image. Below is a comparison between the way IE7 and Opera treats my curved transparent top (I’m afraid this might be difficult to see on some monitors with low contrast):

When I view it across my four test browsers, IE7 displays a significantly darker image than the others. But wait, this gets weirder. More annoyingly I find is that while IE7 was getting it noticeably wrong (#181818 as #111111), Opera, Safari and Firefox are also rendering the colour which should be #181818 as #171717, but this only becomes apparent when I take a screenshot of the page.

Some information on PNG

I think I shall go back to designing without PNG transparency in mind.

So instead I dropped that dream of two sets of images, one at the top left, the other at the bottom right and cheated and decided on using only the top left set, and a bottom right aligned background image to allude to the visual effect. Only I thought perhaps having a nice pyramidal effect would look good. And it should be easily achieved in CSS using a float and clear mechanism.

Only Internet Explorer had different ideas. Above is how a lot of browsers rendered the floats, including Safari, Opera and Firefox. Below is how IE thinks it should look, so now I am left trying to find out a solution as to why only the images with the CLEAR parameter are being moved down and not the images following on. Something to do with displaying inline or block perhaps… If and when I find a solution I will update this.

http://css-class.com/articles/explorer/floats/floatandcleartest1.htm

Update:

I have fixed this problem by using what I would consider a pretty brute-force method in the CSS world and that is using three specifically sized divs to create the text wrapping effect and then used position:absolute to place each image individually where I want it.

It looks exactly the same in all the browsers and now IE can join the club.