Get it All

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.

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;
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;
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>

Those of you who, like myself, are loyal FireFox users have by now probably fallen in love with the Awesome Bar. Despite it’s childish name the Awesome Bar really does transform the way a browser, it’s history and it’s favourite site list work for the user by making all of these things available to you in the URL bar when you start typing.

As you type in the Awesome Bar, the browser searches your history and favourites to find things you’ve used or bookmarked in the past that match. This allows you to, rather than either searching your favourites or typing whole URLs in the address bar, simply type in “wordpress function” and get the WordPress Function Reference page as the first choice, assuming you’ve been to that page, bookmarked it, and haven’t been to a bunch of other pages with similar names. Further, the Awesome Bar seems to also take into account your history of selecting it’s search results into account. I have a couple of different ways of accessing my webmail, for example, but FireFox has learned which method is my preferred method.

So, yeah. I’m a big fan of this new way of doing things. And Google’s Chrome seems to add the same functionality. But there’s a down side of which I informed Mozilla through their feedback system, for what it’s worth: the Awesome Bar has the potential to be a Christmas Spoiler Bar if they don’t make some serious improvements in the next month or so.

Imagine buying your wife a nice piece of jewelry from your favourite online store only to have her sit down to the computer later that same day and – in searching for something totally unrelated – come across an Awesome Bar result that says “thank you for your order, other people who bought ‘priceless jewelry’ also bought. . .” Not awesome. Not awesome in the slightest. In fact, it would suck.

What do you do in this case? It’s important enough that you might be tempted to dump your browser history. But wait! Isn’t that defeating the purpose of the Awesome Bar, at least a little? Of course it is. And particularly for those of us who do a fair amount of research online, the Awesome Bar is like a running dynamic notes list we can refer back to, and losing that functionality for a few months over Christmas holiday is really throwing the baby out with the bath water. But what else is there?

A better solution would be if FireFox provided a couple options:

  • Disabling History tracking for this session: Give the user the option of turning off any history tracking for a given window. They could do what they need to and close the window, effectively eliminating all “history leaks.”
  • Delete Entry: In the Awesome Bar search results, at the right of each result should be the option to delete it if you want. After all, it’s your browser and your Awesome Bar, I could see this being very useful for lots of reasons, not the least being pages you browsed without meaning to or those that didn’t add any value to your search.
  • Block Site: Finally, give us the option to specify – maybe right in the Awesome Bar search results, next to delete, along with a button somewhere – either that we don’t want a given site tracked or that we want all history entries from the site that FF already has deleted.

I think that the inclusion of these simple features would vastly improve the Awesome Bar for all of us who are slowly becoming addicted to it’s usefulness. I say “simple,” because I have no idea what it would take to make these things happen, of course.

This is really a cool development in web applications.

Mozilla Labs Blog » Blog Archive » Prism

Unlike Adobe AIR and Microsoft Silverlight, we’re not building a proprietary platform to replace the web. We think the web is a powerful and open platform for this sort of innovation, so our goal is to identify and facilitate the development of enhancements that bring the advantages of desktop apps to the web platform.

Technorati Tags: , ,

God, I just love, love, LOVE Firefox.  Is there a web developer alive out there that disagrees?

While updating my Firebug extension, I noticed that one of the bug fixes for 1.0.1 was a compatibility issue with another extension, the HTML Validator.

“Pray tell,” I asked, “what could this machine be?”  Well, as it turns out, its yet another breathtakingly useful tool in the arsenal of a web developer, this one validates a page based on the W3C standards without posting it to the W3C site for the results:

Html Validator for Firefox and Mozilla

HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing. The details of the errors are seen when looking the HTML source of the page.

Of course, this simple explanation sells the plugin somewhat short.  The big thing is this: ordinarily, you would need to go to the W3C validator and put in the URL, then it spits back a bunch of errors and warnings with line numbers.  All well and good, but now you have to go through your code to find out where that line occurs. . .  and oh, by the way, if you’re writing PHP-generated HTML, then there isn’t a standing document where you can find that line.

Aggravating?  Oh, you betcha!  But with the Validator extension, just as with FireBug, you get to see the currently-laid out HTML as it happens and find exactly what is causing the error, thus saving yourself considerable time digging through your PHP include files to figure out which one’s causing the freakin’ error message!!!

Technorati Tags: , , , ,

powered by performancing firefox