Debbie-Leigh Posted June 12, 2011 Share Posted June 12, 2011 Hi, I'm trying to get top both corners of my table header row to have a rounded corner each, but only one is appearing. The HTML is: <tr> <td width="12%" class="tbl-col cnr-tl">Col 1</td> <td width="20%" class="tbl-col">Col 2</td> <td width="20%" class="tbl-col">Col 3</td> <td width="30%" class="tbl-col">Col 4</td> <td width="12%" class="tbl-col cnr-tr">Col 5</td> </tr> and the css is: .tbl-col { background-color : #FFDA99; color : #C00000; font-size : 15px; font-style : italic; font-weight : bold; height : 25px; text-align : center; } .cnr-tl { border-top-left-radius : 10px; -moz-border-radius-topleft : 10px; -webkit-border-top-left-radius : 10px; } .cnr-tr { border-top-right-radius : 10px; -moz-border-radius-topright : 10px; -webkit-border-top-right-radius : 10px; } When the styles are in this order, the right hand column has a rounded corner, but if you swap the order of .cnr-tl and .cnr-tr, the left hand column has a rounded corner, but I can't get both end columns to have rounded corners at the same time. Putting both corner styles on one column does work, though, but I'd like to have both end columns to have rounded corners and the middle columns to have straight corners. Does anyone know how to do this? Debbie Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted June 13, 2011 Share Posted June 13, 2011 It shows up fine here. (firefox 4 )MAybe try out my testing file. Note though i added table tags and since you use width as attribute i also added a transitional doctype. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link type="text/css" rel="stylesheet" href="css/style.css" /> <title></title> <style type="text/css"> .tbl-col { background-color : #FFDA99; color : #C00000; font-size : 15px; font-style : italic; font-weight : bold; height : 25px; text-align : center; } .cnr-tl { border-top-left-radius : 10px; -moz-border-radius-topleft : 10px; -webkit-border-top-left-radius : 10px; } .cnr-tr { border-top-right-radius : 10px; -moz-border-radius-topright : 10px; -webkit-border-top-right-radius : 10px; } </style> </head> <body> <table> <tr> <td width="12%" class="tbl-col cnr-tl">Col 1</td> <td width="20%" class="tbl-col">Col 2</td> <td width="20%" class="tbl-col">Col 3</td> <td width="30%" class="tbl-col">Col 4</td> <td width="12%" class="tbl-col cnr-tr">Col 5</td> </tr> </table> </body> </html> Give it a try Quote Link to comment Share on other sites More sharing options...
Debbie-Leigh Posted June 13, 2011 Author Share Posted June 13, 2011 Yes, agreed. It does work. Hmmm, I guess I have a bunch more debugging ahead of me. Trouble is, I've run out of ideas. Oh well, onwards and upwards. Thanks for the help, anyway. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted June 13, 2011 Share Posted June 13, 2011 Well if you have an online example of your code i am pretty sure the reason why it happens is spot-able. Happy to look at it Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.