tables...

[tcollins412]

I am writing aa table with two td's and i need help.
here is the html:

<table>
<td style='width: 100px; height: 100px; background-color: green;'></td><td style='width: 100px; height: 100px; background-color: green;'></td>

and i want to be able to make the first td's left corners rounded and the second td's right corners rounded.
how would i do this without images

[tcollins412]

oops forgot to end the td sorry

[FutureWebDev]

If its only going to be for this one page try using an internal CSS stylesheet with the following:

CSS

#tdleft {
width: 100px;
height: 100px;
background-color: green;
border-radius: 10px 0px 0px 0px;
-moz-border-radius: 10px 0px 0px 0px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;

}

#tdright {
width: 100px;
height: 100px;
background-color: green;
border-radius: 0px 10px 0px 0px;
-moz-border-radius: 0px 10px 0px 0px;
-webkit-border-top-right-radius: 10px;

}

This would be your code:

<table>
<td id="tdleft"></td>
<td id="tdright"></td>

(Probably not the best way to get it done but it should get it done.)

FWD

[tcollins412]

how would you do it with i.e.?

[FutureWebDev]

how would you do it with i.e.?

Update I.E. to version 9 Beta?

If it doesn't work now it should work when Beta testing is done and the full version is released.

I would test it on Firefox and I.E. 9 beta. Don't worry if it doesn't display right on I.E. 9 because 1. Not everyone uses I.E. 2. If they do then they will likely be updated to I.E. 9 full version soon after it comes out.

If its for a client or for school and your worried about how it's displayed to your audience then I would forget using CSS and just go with an image placed in table. Just make sure the boarder is invisible.

FWD

[JRM]

oops forgot to end the td sorry

Looks like you forgot the as well.

The rounded corner CSS is not widely supported at this time, which means that not everyone will be seeing the same thing. You have to design websites to accommodate the least common denominator of browsers tht may still be in widespread use.

The suggestion of using an image for the desired effect is your best option.

[FutureWebDev]

Looks like you forgot the as well.

The rounded corner CSS is not widely supported at this time, which means that not everyone will be seeing the same thing. You have to design websites to accommodate the least common denominator of browsers that may still be in widespread use.

The suggestion of using an image for the desired effect is your best option.

Opera (version 10.5 onward), Safari (version 5 onward) and Chrome (version 5 onward)

Firefox has supported it since version 1.0 in one form or the other

And I.E. 9 will support it. I'm not sure if the Beta version supports it yet.

That's pretty wide support isn't it? I may be wrong. What do you mean by "widely supported"?

[cfajohnson]

If its only going to be for this one page try using an internal CSS stylesheet with the following:

CSS

#tdleft {
width: 100px;
height: 100px;
background-color: green;
border-radius: 10px 0px 0px 0px;
-moz-border-radius: 10px 0px 0px 0px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;

}

#tdright {
width: 100px;
height: 100px;
background-color: green;
border-radius: 0px 10px 0px 0px;
-moz-border-radius: 0px 10px 0px 0px;
-webkit-border-top-right-radius: 10px;

}

This would be your code:

<table>
<td id="tdleft"></td>
<td id="tdright"></td>

(Probably not the best way to get it done but it should get it done.)

FWD

[indent]
Too verbose.

td {
 width: 100px;
 height: 100px;
 background-color: green;
 border-radius: 10px 0px 0px 0px;
 -moz-border-radius: 10px 0px 0px 0px;
 -webkit-border-top-right-radius: 0px;
 -webkit-border-bottom-right-radius: 0px;
 -webkit-border-bottom-left-radius: 0px;
}

td + td {
 border-radius: 0px 10px 0px 0px;
 -moz-border-radius: 0px 10px 0px 0px;
 -webkit-border-top-right-radius: 10px;
}

<table>
  <tr>
    <td>a</td>
    <td>b</td>
</table>

[/indent]

[FutureWebDev]

[indent] Too verbose.

td {
 width: 100px;
 height: 100px;
 background-color: green;
 border-radius: 10px 0px 0px 0px;
 -moz-border-radius: 10px 0px 0px 0px;
 -webkit-border-top-right-radius: 0px;
 -webkit-border-bottom-right-radius: 0px;
 -webkit-border-bottom-left-radius: 0px;
}

td + td {
 border-radius: 0px 10px 0px 0px;
 -moz-border-radius: 0px 10px 0px 0px;
 -webkit-border-top-right-radius: 10px;
}

<table>
  <tr>
    <td>a</td>
    <td>b</td>
</table>

[/indent]

cfajohnson,

Wouldn't your suggestion apply to all td tags on the page? I think he only wants the one table with its two cells to have the rounded corners.

FWD

[cfajohnson]

cfajohnson,

Wouldn't your suggestion apply to all td tags on the page? I think he only wants the one table with its two cells to have the rounded corners.

[indent]
If there's more than one table on the page, then a class should be added to those tables that are to be styled, and a class selector added to the CSS.
[/indent]

[JRM]

Opera (version 10.5 onward), Safari (version 5 onward) and Chrome (version 5 onward)

Firefox has supported it since version 1.0 in one form or the other

And I.E. 9 will support it. I'm not sure if the Beta version supports it yet.

That's pretty wide support isn't it? I may be wrong. What do you mean by "widely supported"?

The world that is looking at your website is not necessarily using cutting edge browsers, so your site may display in unexpected ways on a large number of screens. For example,IE is only getting on board now. Will they mess it up?

I like my websites to display as intended on 95% of the computers by using "long adopted" versions. If you only want "techies" to see the site as intended, then you will be fine with the "latest and greatest".

[FutureWebDev]

[indent] If there's more than one table on the page, then a class should be added to those tables that are to be styled, and a class selector added to the CSS. [/indent]

So if there isn't more than one table you would use the id selector right?

[FutureWebDev]

The world that is looking at your website is not necessarily using cutting edge browsers, so your site may display in unexpected ways on a large number of screens. For example,IE is only getting on board now. Will they mess it up?

I like my websites to display as intended on 95% of the computers by using "long adopted" versions. If you only want "techies" to see the site as intended, then you will be fine with the "latest and greatest".

I wonder if there is a site that estimates the usage of browser versions in order to give developers an idea of what would be a safe implementation of their code.

Side Note: Microsoft has actually promised to support rounded corners in I.E. 9.

FWD

[Arkinder]

I'm going to quote a mentor of mine for this,

"IE9, when it's released next year, will be 2-3 years behind ALL other browsers TODAY and then it won't be updated for at least 3 years after that while all other browsers will have incremental updates several times each year. Microsoft loves to conveniently show what they support while ignoring what they don't." - Doc

Regards, Arkinder

[FutureWebDev]

I'm just gonna run some simple tests.

[FutureWebDev]

I'm going to quote a mentor of mine for this,

"IE9, when it's released next year, will be 2-3 years behind ALL other browsers TODAY and then it won't be updated for at least 3 years after that while all other browsers will have incremental updates several times each year. Microsoft loves to conveniently show what they support while ignoring what they don't." - Doc

Regards, Arkinder

W3C has done recent tests on browser compatibility for HTML5 and CSS3.

The best performer...... IE 9. True story. I know its hard to believe but apparently Microsoft is getting there stuff together.

FWD

[FutureWebDev]

Ok I tested Firefox 3.6 and I tested IE9 beta. Both rendered the code I suggested in my first post.

I've attached screen-shots of both renderings. Take a look.

FWD

[shaya4207]

Opera (version 10.5 onward), Safari (version 5 onward) and Chrome (version 5 onward)

Firefox has supported it since version 1.0 in one form or the other

And I.E. 9 will support it. I'm not sure if the Beta version supports it yet.

That's pretty wide support isn't it? I may be wrong. What do you mean by "widely supported"?

This code is a CSS3 'hack', which in it for itself is not the greatest thing to get used to, having said that, if it doesn't work in IE6,7 and 8 then automatically it's not widely supported. As much as people (read: developers) hate IE, the general population uses IE since it comes preinstalled in every PC, the best practice is to learn to write IE6 compliant code.

Now regarding the OP, to the best of my knowledge there's no CSS2 way to do that, is there any specific reason you don't want to use an image saved as PNG-8, so that the transparency works in IE6 too?

[FutureWebDev]

This code is a CSS3 'hack', which in it for itself is not the greatest thing to get used to, having said that, if it doesn't work in IE6,7 and 8 then automatically it's not widely supported. As much as people (read: developers) hate IE, the general population uses IE since it comes preinstalled in every PC, the best practice is to learn to write IE6 compliant code.

Now regarding the OP, to the best of my knowledge there's no CSS2 way to do that, is there any specific reason you don't want to use an image saved as PNG-8, so that the transparency works in IE6 too?

You make a good point but the OP asked how to do it without images. My code is how you do it without images.

Thats why in my original post I suggested that the OP consider exactly what the purpose of the rounded corners was and who would be viewing it.

Is it for a school project and it's a requirement to not use images?

Is it for an Intranet site for a company that uses the latest browser technology?

Etc. Etc.

[shaya4207]

You make a good point but the OP asked how to do it without images. My code is how you do it without images.

Thats why in my original post I suggested that the OP consider exactly what the purpose of the rounded corners was and who would be viewing it.

Is it for a school project and it's a requirement to not use images?

Is it for an Intranet site for a company that uses the latest browser technology?

Etc. Etc.

All I was saying is, that CSS3 doesn't work inmost browsers, and as you said, depending who they're writing it for, it might not work...