Forum Moderators: open
Here is a simple piece of HTML that of course works properly in Firefox but fails in IE6 and 7.
The problem is in the corners of the HTML table - which render perfectly in FF but fail miserably in IE. I really don't see the reason why. Better to see than to explain - try yourself - paste the code below into empty file and try it in both browsers.
Basically - all cells are in single color which is replaced on some borders with another color (bold color).
Note: use enlarged view in browser to see the problem.
Any ideas how to make these 2-colored borders but to render them properly in IE? I tried some layers one on top of other and like zilliun combos of borders etc. The idea is to use border NOT the background because BG won't print by default.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" /><style type="text/css" media="all">
.t { border-collapse:collapse }
.t td { border:#ddd solid 1px }
.t td.rt { border-top: 2px solid black; }
.t td.rb { border-bottom: 2px solid black; }
.t td.rl { border-left: 2px solid black; }
.t td.rr { border-right: 2px solid black; }
</style>
</head><body>
<table class="t"><tr >
<td>1</td>
<td class="rb rr">2</td>
<td>3</td>
</tr><tr>
<td>4</td>
<td class="rb rl">5</td>
<td>6</td>
</tr><tr>
<td>7</td>
<td class="rr">8</td>
<td>9</td>
</tr></table>
</body>
</html>
At first glance this looks like its caused by the way different browsers draw borders.
A visual example and explanantion can be found by searching for "stu nicholls", then check out "Boxes" then "Border Colours".
the problem is with the corners of borders which are supposed to be square but IE for some reason chooses to do square at one corner, round at other, messed up at third and non existent corner at fourth (or any other combination) - the best is to view this on example.
i tried some alternate approaches - for example creating a div within a div and "simulating" table. while this works somewhat ok in IE7, IE6 has odd rendering. And i'm quite sure that this can be done, i just need an idea ;)
try zooming it to see the difference.
have you tried zooming with CTRL and + ? you must notice the difference.
if that doesn't work - try print preview and in print preview window zoom to 500% for example to see it clearly...
