Blogs

Download Code | View Source

I'm currently working on a website for the University of Colorado at Boulder (more details to come on this project) and I ran into a common problem amongst web developers, rounded corners. Sure you may think they look snazzy and coding them can't be that hard, which thanks to the new CSS 3 standards you would be correct on both accounts in a perfect world. Unfortunately we live in a world that uses Internet Explorer (IE). None of the current versions of IE support CSS 3 standards.

Let IE Suffer

I ran across an article explaining a great way to tackle this problem but unfortunately it didn't seem to work the way I had hoped. So I decided to do it the old school way in IE and use images for IE only. To accomplish this I used an IE only style sheet and placed the image replacement in there.

So to outline this you place a comment in your html head with your other style sheets like this:

<!--[if IE]>
<link type="text/css" rel="stylesheet" media="all" href="ui/css/ie.css" />
<![endif]-->

Then in the body setup your div like this:

<div id="main">
<!--[if IE]>
<div id="main-tr"> <div id="main-bl"> <div id="main-br"> <![endif]-->
<p>Content here</p>
</div><!--[if IE]> </div></div></div> <![endif]--> 

You will notice that all of the extra divs that we have to create are surrounded by a conditional comment so they will only be read by IE. This code will be a bit bloated for IE but will take advantage of CSS 3 and will run much smoother for Firefox, Safari, and Chrome without the bloat. Here's the code for a style sheet that is seen by all browsers:

#main{
	background:#ddd;
	height:100px;
	width:960px;
	padding:10px;
	/* Select all four corners for the possibility of 
	controling larger radius or only rounding certain corners */
-webkit-border-top-right-radius: 10px;    /* for Safari */
	-webkit-border-top-left-radius: 10px;    /* for Safari */
	-webkit-border-bottom-right-radius: 10px;    /* for Safari */
	-webkit-border-bottom-left-radius: 10px;    /* for Safari */
	
	-moz-border-radius-topright: 10px;       /* for Firefox */    
	-moz-border-radius-topleft: 10px;       /* for Firefox */
	-moz-border-radius-bottomright: 10px;       /* for Firefox */    
	-moz-border-radius-bottomleft: 10px;       /* for Firefox */	
}

This can be accomplished by two lines but I did it the previous way to show you how to select each corner one by one. Here's a two liner:

#main{
	background:#ddd;
	height:100px;
	width:960px;
	padding:10px;
	-webkit-border-radius: 10px;    /* for Safari */ 
	-moz-border-radius: 10px;       /* for Firefox */ 
}

Once you have the corners working with CSS3 you can open it up in firefox or safari and take a screenshot. Then open the screenshot in photoshop and grab each corner and save them individually. I named them each:

• main-tl.jpg
• main-tr.jpg
• main-bl.jpg
• main-br.jpg

Then place them in an images folder within the css folder. From there you can place the proper css inside the ie.css:

#main{
    background:#ddd url(images/main-tl.jpg) top left no-repeat;
}

#main-tr{
    background:url(images/main-tr.jpg) top right no-repeat;
}

#main-bl{
    background:url(images/main-bl.jpg) bottom left no-repeat;
}

#main-br{
    background:url(images/main-br.jpg) bottom right no-repeat;
    height:100px;
    width:960px;
}

This will work in all versions of ie including the well hated ie6, see my post on ie6 for further hate. So now you have a very sleek CSS3 solution for rounded corners that will also work in all versions of IE. This is definately bloated for IE but there's no way around using images or javascript in order to make your code happy in IE. The Pinnakl website currently uses javascript for the rounded corners which we may change some day soon. If someone has a different technique they use, please let us know in the comments.

It appears that ie6 will be dropped by Google in the beginning of March and Youtube will drop support shortly after. Many other sites have dropped support for ie6 like digg. Although these are all blows to the browser it probably will still be a few more years before it's finally insignificant enough to not worry about. Pinnakl will continue to support ie6 if it's important to our clients and their users. This browser ultimately costs our clients many more hours to support. We are very excited about html5 and css3 standards that are still in the works and of course are coding standards that ie6 will never support.

The slow and painful death of ie6 is celebrated by most developers looking forward to the future of the internet. Aside from the fact that ie6 is very difficult to get a website to look correctly it's also insecure which is what prompted Google to ultimately drop it. Google was recently hacked because of a bug in ie6, Microsoft issued a fix for this bug but this is just a band-aid on a very broken browser. What do you think? Give us your thoughts on the browser and if you still use it and if so why?

Update: Amazon, yet another large internet company, is also dropping support for ie6. Some may argue that they will lose money by not selling to this audience, but on the other hand they are also saving a lot of time, money, and energy by not supporting an old browser. These redirected resources can lead to a much better website for those of us with current browsers to enjoy.

Drupal is a CMS (Content Management System), therefore the most basic definition is it's used for managing your content on your website. So instead of using static html files and using something like Dreamweaver you can log into your website and update it from any computer with internet access. Drupal has been used in many different ways and goes beyond just a basic CMS, which makes it a little harder to define. Drupal has been used for the following types of sites:

• Digg like site
• Blog
• User site
• Portal site
• Twitter clone
• File Storage
• Wiki
• Youtube clone
• Amazon Clone
•  on and on

What does this mean?

So basically no matter how difficult or easy your project is you definitely can take advantage of a CMS system. Some clients think that they can save money on a static site which can be true in the short run, but in many cases can end up costing more in the long run. Most web sites have a need for some content changes which can cost money if you're paying a developer or company to do them for you. Also, if you ever see a need for adding features to your website (blog, shopping cart, commenting, twitter feeds, etc.) it can end up costing you much more on a static site whereas it can be a fairly simple task in Drupal.

Why Drupal?

Okay so if your still reading up to this point you may be asking yourself why should I choose Drupal? I mean there are tons of CMS's out there and finding the correct one can be a huge chore in itself. Well you can rest assured that we have been through the ringer with the whole CMS debate and have landed on Drupal with good reasoning.

There is a very large community behind drupal. This means tons of features waiting to be added to your website with little to no coding needed. This saves you lots of money and us lots of time.

Drupal is very expandable. This means that just because you don't want a shopping cart today doesn't mean you won't next year. If you go with another CMS which may work great for you in the short run, it doesn't mean it will be capable to do what you want tomorrow. A couple of CMS's that come to mind when I type this is wordpress and joomla. These are both great for what they do, but are much more limited. If you use Drupal you can rest assured that you won't be limited with what your website will be capable of in the future. Although if you don't believe your site will have any future needs of expansion and/or change we can advise you of better alternatives for your needs.

Overall Drupal is a great solution

We know Drupal isn't the end all of solutions but we do believe that it's a great choice 99% of the time. If you want us to advise you further on your website needs and how we can help you please Contact us today!

Welcome to the new Pinnakl web site. Our goal is to provide our clients with robust websites using Drupal as a platform. Our most recent projects are listed on the homepage of our site. We will provide screencasts explaining how to use certain Drupal overall and focus on different modules in an attempt to educate the public on the power of Drupal.