Results 1 to 2 of 2

Thread: How IE behaves on border corners and cutting into table cells

  1. #1
    Join Date
    Oct 2008
    Posts
    1

    How IE behaves on border corners and cutting into table cells

    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):





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

  2. #2
    Join Date
    Feb 2006
    Location
    Salisbury UK
    Posts
    4,332
    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.
    Code downloaded to my PC will be deleted in due course.
    WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
    Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •