Donaldini Posted April 10, 2012 Share Posted April 10, 2012 I have a page with tables that render perfectly in Chrome and Firefox, but as usual IE is causing some problems. First I lose my border-radius on the table rows, not a biggie, but then I also lose my margin-bottom of 8px and my rows are stuck together.The strange thing is that the IE Developer tools register the 8px, but don't show it. Is there anyone who knows what the cause may be? Link to comment Share on other sites More sharing options...
Ingolme Posted April 10, 2012 Share Posted April 10, 2012 I don't think table rows work with with much CSS. You could try putting the margin on the cells instead though I'm not sure how well they work with margins and padding. CSS3 border radius is not supported by older versions of Internet Explorer. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 10, 2012 Share Posted April 10, 2012 IF the height of cells is fixed, you could used this, works in all browser, including ie9, and works in ie7/8, with square corners, but had to use different approach to get same result in IE7, with condition to apply this styling <!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" /><title>Untitled Document</title><style type="text/css">table, tr, td { padding:0; margin:0; border: none;}table {border-collapse:collapse;}table td {height:50px; width:32%; position:relative; display:block; border-spacing:0; margin: 3px 1px; float:left;}table td p {position: absolute; height:100%; width: 100%; line-height: 23px; }table td p span {margin:0 5px;display:block; }table tr.odd p { background-color:#BDD732;}table tr.even p {background-color:#748D26;}table td.first_td p {position: absolute; height:100%; width: 100%; border-radius: 10px 0 0 10px; line-height:50px;}table td.last_td p {position: absolute; height:100%; width: 100%; border-radius: 0 10px 10px 0;}</style><!--[if IE 7]><style type="text/css">table td p{border: 2px solid #fff; border-width: 5px 2px;}</style><![endif]--> </head><body><table width="960" border="0" cellspacing="0" cellpadding="0"><tr class="odd"><td class="first_td"><p><span>18 tot 07 December 2012</span></p></td><td><p><span>tyutyutyu ytu <br />dfgdfgdfg</span></p></td><td class="last_td"><p><span>tyutyutyu ytu <br />dfgdfgdfg</span></p></td></tr><tr class="even"><td class="first_td"><p><span>18 tot 07 December 2012</span></p></td><td><p><span>tyutyutyu ytu <br />dfgdfgdfg</span></p></td><td class="last_td"><p><span>tyutyutyu ytu <br />dfgdfgdfg</span></p></td></tr></table> </body></html> Edit: you can get away with applying classes to first cell and last cell by using table td:first-child p {position: absolute; height:100%; width: 100%; border-radius: 10px 0 0 10px; line-height:50px;}table td:last-child p {position: absolute; height:100%; width: 100%; border-radius: 0 10px 10px 0;} instead of table td.first_td p {position: absolute; height:100%; width: 100%; border-radius: 10px 0 0 10px; line-height:50px;} table td.last_td p {position: absolute; height:100%; width: 100%; border-radius: 0 10px 10px 0;} Link to comment Share on other sites More sharing options...
Donaldini Posted April 13, 2012 Author Share Posted April 13, 2012 I was able to fix it using conditional stylesheets and adding a white border below the TR, kind of a cheat, but visually it looks exactly the same Thanks for the help and inspiration! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.