infobubble tab rounded conrners on firefox and IE are not working

[GoogleCodeExporter]

I'm using infobubble with tabs, but I really don't understand why, tab the 
rounded corners are properly showed only on Chrome browser. Instead on Firefox 
and IE they are squared. Is it a bug?

Thanks in advance.

Giovanni.

Original issue reported on code.google.com by giovanni...@gmail.com on 4 Jan 2013 at 6:05

[GoogleCodeExporter]

I am having this same problem. Any suggestions?

Original comment by samcatas...@gmail.com on 6 Mar 2013 at 7:05

[GoogleCodeExporter]

Unfortunately not! I haven't spent any more time on this issue! Let me know if 
you'll get a solution. 

Original comment by giovanni...@gmail.com on 7 Mar 2013 at 8:08

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

I just noticed the same behavious as described by Giovanni. I looked through 
the code but could not immediately find a solution, but there is an easy 
workaround / fix for it. 

In the options for your infobubble set a class name for the tabs so you can 
style them with css:

infoBubble = new InfoBubble({       
        tabClassName: 'some_name' // <- set this 
        })

Then set it in your css file:

.some_name {border-top-right-radius:5px; border-top-left-radius:5px;}

Works for me in Firefox, IExplorer and doesn't break anything in Chrome.

Cheers, 
Stefan

Original comment by stefan.h...@gmail.com on 11 Mar 2013 at 1:56

[GoogleCodeExporter]

Hi Stefan,

Great job, your solution works properly.

Thanks again for sharing your solution.

Cheers,
Giovanni.

Original comment by giovanni...@gmail.com on 11 Mar 2013 at 3:13

[GoogleCodeExporter]

Thanks, that does work great. Are you having an issue in IE where the tabs are 
stacked vertically instead of horizontally?

Original comment by samcatas...@gmail.com on 14 Mar 2013 at 2:00

[GoogleCodeExporter]

@samcatas: Indeed, in the beginning I had a problem like you describe... You 
might want to try decreasing the font size of the tab headers. Try with Firebug 
or Chrome Developer Tools and play around to see if it makes a difference. What 
works for me is setting "font-size:90%;" in the same css class as mentioned 
above.

Original comment by stefan.h...@gmail.com on 14 Mar 2013 at 4:08

[GoogleCodeExporter]

Thank you! Thank you! Thank you! I had these tabs stacking and spent hours 
pulling my hair out to figure out hwo to fix it (it only does it in Firefox).  
Your solution worked perfectly!

Original comment by andru...@gmail.com on 20 Apr 2013 at 12:22