PDA

View Full Version : How IE behaves on border corners and cutting into table cells



phz
03 Oct 2008, 08:11 AM
Hi people,

This one might seem easy one but I've spent a lot of hours on it. I need some ideas how to solve this in a different way.

The problem is easier to see than to describe. It occurs in IE6 and IE7. Firefox works perfecly.

Any ideas???

Check these images that display the issue - you need to ZOOM the display to see it - it looks hardly visible on screen but the issue is with printint it out (therefore I can't use background images or similar hacks):

http://img205.imageshack.us/img205/358/cornersdf5.th.gif (http://img205.imageshack.us/my.php?image=cornersdf5.gif)

http://img524.imageshack.us/img524/1659/cuttingintoeo0.th.gif (http://img524.imageshack.us/my.php?image=cuttingintoeo0.gif)




<!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>

Wickham
03 Oct 2008, 01:11 PM
Thick borders do suffer from the diagonal split at corners, I thought it only happened over 2px but I see that your borders are 2px.

You can use an image instead of color for borders. See http://www.css3.info/preview/border-image/ border-image tutorial.

I haven't tested these to see if they work like background-images so I don't know if they will print out but it may be worth experimenting.