Jquery-ui tabs CSS issues
===

I am currently struggling with the css layouts for a jquery-ui tabs. I am using two css, the first css I initially put together to get my desired look for my tabs(look at image 2). The second css named  jquery-ui-1.8rc2.custom.css was added for alert dialog boxes that I am using on my web page.  Now if I use them both css the tabs will be out disproportion (look image 2).

How can I avoid/bypass/sovle this css issue i am currently undertaking?

 

The tab CSS outlook i want:
![enter image description here][1]


The tab CSS outlook distortioned by jquery-ui-1.8rc2.custom.css:
![enter image description here][2]

Alert box in my site that uses jquery-ui-1.8rc2.custom.css:

![enter image description here][3]


  [1]: http://i.stack.imgur.com/4zHwV.jpg
  [2]: http://i.stack.imgur.com/4ImIx.jpg
  [3]: http://i.stack.imgur.com/GuwJF.jpg