Front-end UI design of a browser chat application

This is the inspiration behind the making of this blog.

I've been slogging over the UI design of a chat application for the past few weeks. The chat application is similar to the one found on facebook. In designing the UI, I decided two things:

1. That the chat windows would tile vertically instead of horizontally as traditionally done. I feel this is better for the user who wants to chat and view websites at the same time.
2. That I would create an accordion type UI with overlapping tabs as shown in the image on the right.
   

It has been my personal experience that customers.. are motivated to buy according to what they see i.e. visually pleasing UI and packaging. After finishing the shown UI on photoshop.. I proceeded to convert PSD to code.

I had to resort to using some negative margins to try and achieve the look shown in the image. Firefox/Safari - great, Chrome - NO, IE - NO and this is where I had my "@#$%" moment.

Is efficiency in code a good trade off for visually appealing features?

I am trying to get on a level where I do not have to be dealing with so much of this browser compatibility CRAP... I have decided to ditch the overlapping tab for a straight rounded corner type UI shown on the right because it is just a waste of time to be putting so much effort into including this little feature which is only there to please the eye.

There has to be a place in between that allows you to create visually appealing user interfaces without having to incorporate a number of different hacks and or style-sheets to make one feature work.

This is my eureka moment.. I am no longer interested in any type of design that will add any more strife to an already busy web design schedule. I am now in pursuit of that happy place between visually appealing and code efficient user interfaces.

Wish me luck :)