[Forum] Why can't I add border-radius to tables in vB4?

[Mark.B]

Perhaps someone knows the answer to this as it has me stumped.

In vB3, I added rounded corners to many tables by creating the following css class:

.roundedcat {
-moz-border-radius-topleft: 5px 5px;
-moz-border-radius-topright: 5px 5px;
-webkit-border-radius-topleft: 5px 5px;
-webkit-border-radius-topright: 5px 5px;
border-radius-topleft: 5px 5px;
border-radius-topright: 5px 5px;
}

I can then do something like this:

<table class="tborder roundedcat">
<tr>
<td class="thead roundedcat">

...etc

Now, in vb4 I have recreated the tborder class and added the exact same "roundedcat" css class.

However, no matter what I do, tables will not display with rounded corners at the top like they do in vB3.

I've even tried doing away with tborder and adding a border manually as a test, but still no joy.

there must be something in vB4's css that stops border radiuses working in tables.

I know my class is correct as it works in divs.

Anyone know what's stopping this from working? It's bizzarre!

[Lynne]

Link? (Yes, you may PM it to me.)

[Riasat]

border radius corner properties are different in w3c and mozilla.

w3c rec: -ven-border-top-left-radius
moz: -moz-border-radius-topleft

Moreover, firefox 4 (beta and/or nightly) has dropped -moz.
So your above code will ONLY work for firefox 3.x provided everything else is ok.

Finally, unless you give out full css/html structure or a link to original page, it is really hard to help with these kinda issues.

[Riasat]

just a tip: border radius combined with box shadow implementation is seriously buggy in table elements. Some things work in ff/chrome only, some work in ie/opera/chorme only, some work differently in ff and others. It's a nightmare.
So try not to use these together on table.

[Mark.B]

just a tip: border radius combined with box shadow implementation is seriously buggy in table elements. Some things work in ff/chrome only, some work in ie/opera/chorme only, some work differently in ff and others. It's a nightmare.
So try not to use these together on table.

Thanks...yes it can be tricky...although, I always found it worked as expected in vb3.....that's what's baffling me....it *should* work, but it doesn't.

[Mark.B]

border radius corner properties are different in w3c and mozilla.

w3c rec: -ven-border-top-left-radius
moz: -moz-border-radius-topleft

Moreover, firefox 4 (beta and/or nightly) has dropped -moz.
So your above code will ONLY work for firefox 3.x provided everything else is ok.

Finally, unless you give out full css/html structure or a link to original page, it is really hard to help with these kinda issues.

Cheers...I've got (currently) all three browsers that support it at all covered (webkit, gecko, Opera) but will update when FF4 goes Gold, same with IE9.

I appreciate this is a difficult one to resolve without posting all the CSS I'm using in vB4 which would be a bit mind numbing.

What I do know, is even if I strip it down to a default style with no parent, I still can't make it work. So it's something in vB4's default css.