Get it All
Together

I’m working on redesigning the front page of this website a bit with a new theme. The new look will be based on the current design, but more flexible, a bit flashier and like my political blog’s front page, more of a representation of the website as a whole, rather than this one blog.

As I’m working along with the new design, I’ve hatched a scheme to create an interesting sidebar which reflects some different thinking than most that I’ve seen. But I’d like this sidebar to – if possible – stretch the entire height of the page. While searching for answers, a Twitter friend suggested this:

Equal height boxes with CSS | Lab | 456 Berea Street.

Great! What a perfect solution, right? Well, not quite. Internet Explorer once again lags behind the rest of the pack with CSS adoption and this CSS table design thing is not available to any browser below IE 8. Currently, IE 8 adoption is happening at a snail’s pace. Three times as many IE users are using 6 and 7 as are using 8.

Give it a few months, and this will be a non-issue. In the meanwhile, I’m thinking I’ll need to work out a CSS hack to provide an acceptable alternative to older browsers while still maintaining the option for FF and IE8 users.

A rose by any other name would smell as sweet. And a web browser lacking basic web compliance by any other name would also smell.

With it’s release of Internet Explorer, Microsoft has once again heralded it’s intentions to make the Internet less than it could be. Not much has changed yet, despite Bill Gates’ departure.

I know it’s snarky and not constructive to say. But how long is Microsoft going to drag it’s feet on standards compliance for the web? IE8 is the first browser to be – by Microsoft’s estimation, at least – fully CSS2 compliant. That’s a nearly ten year old standard and most browsers are moving on to CSS3. Not that any of us can really use the CSS3 technology without going through backflips to support the perpetual legacy technology that is IE.

According to the IE8 home page, the big improvements in this new revision include a speed boost. Interesting, inasmuch as IE7 represented a huge step backward in performance. I call this a lateral move at best. They’re also touting IE’s ability to leverage RSS feeds. Here again, this is six or seven years old, nothing new.

Finally, Microsoft touts it’s security. Well, that’s just silly. Microsoft made the security gaps that made viruses so much a part of our lives and so far, their solutions have left much to be desired. Especially since their solutions to problems often involve more code, rather than fixed code; they paper over a security flaw with still more features, all of which necessarily have the potential to become security flaws themselves.

Internet Explorer and Microsoft Windows, generally, are regrettable facts of life for web developers. But in my private life, I’m more and more thankful to be running Ubuntu Linux, warts and all.

Of course, FireFox currently supports CSS rounded corners for DIVs, but sadly, the same cannot be said for IE.  As developers and designers, we have to either accept that some people will not get the full effects of our website, or else we have to use the old methods to achieve parity for all browsers.  This post is just to show you the easiest way to get the rounded corners effect in the old-school manner.

The big thing is to plan on how big you want your rounded corners to be.  The reason is that you will have to fight with setting top and bottom margins of the same size as your corner radius, or just accept that there will be some space there.  This easy way of going about things assumes you’ll be ok with a 12px radius and a 12px margin to match.  We’re going to make a DIV 580px wide by 200px tall.

Start by opening up Adobe Illustrator or whatever other vector graphic tool you usually use for thsi type of thing and make a box that is 100px tall and 580px wide.  Fill that box with the color of your non-bubbled background – that part of the web page that lies outside your bubble, in other words.  My background color is #FFFFEE.

On a new layer, create another box with rounded corners of 12px radius, in exactly the same size.  This new box should for the most part completely cover up the old box and should be the color you want the bubble to be.  We’re assuming you want no border, but if you do, you’ll probably want to play around with this example a bit to figure out how it’s going to work best for you.

Now, you should have an image that looks like this:

Example of the DIV bubble background.

Example of the DIV bubble background.

Next we need to setup our CSS rules.  Because we have a box with all four rounded corners, there’s no need to create or load a second image for our borders, but rather set it up like this:
[code lang=”css”]
#bubble_wrap {
width: 580px;
display: block;
}

#bubble_top {
display: block;
margin: 0px;
height: 20px;
background-image: url(/wp-content/themes/akitsu_home/img/feature_bubble.gif);
background-repeat: no-repeat;
background-position: top;
}

#bubble_bottom {
display: block;
clear:both;
margin: 0px;
height: 20px;
background-image: url(/wp-content/themes/akitsu_home/img/feature_bubble.gif);
background-repeat: no-repeat;
background-position: bottom;
}

#bubble_center {
display: block;
}[/code]
We can then assemble the pieces like this:
[code lang=”html”]
<div id="bubble_wrap">
<div id="bubble_top"></div>
<div id="bubble_center">
<p>content goes here</p></div>
<div id="bubble_bottom"></div>
</div>[/code]