try running this page in FF2 and IE7 and try to explain me why the border-top is invisible in IE7. <!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"> <!-- .kaki { line-height: 1.6em; border-bottom: 1px solid #aaa; border-collapse: collapse; font-size: 13px; } .kaki th, .kaki td { padding: 0 .5em; } .kaki th { color: #222; line-height: 1.8em; background-color: #ADD8E6; border: 10px solid #222; border-top: 10px solid #222; text-align: left; } .kaki th a { color: #000000; text-decoration: underline; } .kaki th a:hover { text-decoration: underline; } .kaki tr.d { background-color: #f0f1f2; } .kaki tr:hover, .kaki tr.hovered { background-color: #d0d7e2; } .kaki .n { font-weight: bold; } .kaki td { border-left: 1px solid #aaa; border-right: 1px solid #aaa; } --> </style> </head> <body> <table class="kaki" width="100%" frame="box" border="1" cellpadding="0" cellspacing="0"> <tr> <th scope="col">blah;</th> <th scope="col">asdsajk;</th> <th scope="col">asdkaskd</th> </tr> <tr> <td>sdfsdf</td> <td>sdf</td> <td>sdfsdf</td> </tr> <tr> <td>df</td> <td>sdfsdf</td> <td> </td> </tr> <tr> <td>sdf</td> <td>sdfsdf</td> <td>dsfsdf</td> </tr> <tr> <td>sdf</td> <td>dsfsdf</td> <td>df</td> </tr> <tr> <td>dsf</td> <td>df</td> <td>sdf</td> </tr> </table> </body> </html> HTML: tnx, Yoda
It most likely has to do with conflicting properties, specifically that you are using cellpadding, cellspacing and border with border-collapse:collapse; - they are mutually exclusive to each-other. Declaring a bottom border in the CSS actually SHOULD override the border="1" so you only have a bottom border - which is why border should be declared in the CSS NOT in your HTML... that whole separation of presentation from content thing. Really all you should be using is <table class="kaki"> and that's it. You also have a few other 'issues' such as psuedoclasses that do not exist hovered?)... there is no property 'frame' on tables in HTML/XHTML, etc, etc. Even so, borders on tables are ALWAYS unpredictable cross-browser. The closest you are likely to come with this is: <!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"><!-- * { margin:0; padding:0; } body { padding:8px; } .kaki { font:normal 13px/1.6em arial,helvetica,sans-serif; border-collapse:collapse; width:100%; table-layout:fixed; } .kaki th, .kaki td { padding:0 0.5em; } .kaki th { color:#222; line-height:1.8em; background:#ADD8E6; border:10px solid #222; text-align:left; } .kaki th { } .kaki th a { color:#000; text-decoration:underline; } .kaki th a:active, .kaki th a:focus, .kaki th a:hover, { text-decoration:underline; } .kaki tr.d { background:#F0F1F2; } .kaki tr:active, .kaki tr:focus, .kaki tr.hover { background:#D0D7E2; } .kaki .n { font-weight:bold; } .kaki td { border:1px solid #AAA; } --></style> </head><body> <table class="kaki"> <tr> <th>blah;</th> <th>asdsajk;</th> <th>asdkaskd</th> </tr> <tr> <td>sdfsdf</td> <td>sdf</td> <td>sdfsdf</td> </tr> <tr> <td>df</td> <td>sdfsdf</td> <td> </td> </tr> <tr> <td>sdf</td> <td>sdfsdf</td> <td>dsfsdf</td> </tr> <tr> <td>sdf</td> <td>dsfsdf</td> <td>df</td> </tr> <tr> <td>dsf</td> <td>df</td> <td>sdf</td> </tr> </table> </body></html> Code (markup): Which you'll notice puts the borders for the table INSIDE the table in IE, but half inside half outside in RoW (rest of world)