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 Link to comment https://forums.phpfreaks.com/topic/239175-border-radius-conflict/ 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 Link to comment https://forums.phpfreaks.com/topic/239175-border-radius-conflict/#findComment-1228854 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. Link to comment https://forums.phpfreaks.com/topic/239175-border-radius-conflict/#findComment-1228868 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 Link to comment https://forums.phpfreaks.com/topic/239175-border-radius-conflict/#findComment-1228898 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.