SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: table borders

  1. #1
    SitePoint Zealot
    Join Date
    Feb 2007
    Location
    East of Ottawa, ON
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    table borders

    FF and Opera won't render a border on the top (first row) and right (last row) however IE does.

    Why is that?

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    table {
    	border: hidden;
    	border-collapse: collapse;
    	width: 50%;
    	margin: 0 auto;
    	font-size: 125%;
    }
    td {
    	border-bottom: none;
    	border-left: none;
    	border-right: 1px solid #000;
    	border-top: 1px solid #000;
    	padding: 5px;
    	height: 15px;
    	text-align: center;
    }
    </style>
    </head>
    <body>
    <table summary="test">
      <tr>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
    </table>
    </body>
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Which version do you want?

    If you want Firefox to behave like IE then remove the border:hidden which IE doesn't understand.

    On the other hand if you want IE to behave like Firefox then you have to cheat and rub the border out by using the background color like this.
    Code:
    table {
        border: 1px solid #fff;
            border:hidden;
        border-collapse: collapse;
        width: 50&#37;;
        margin: 0 auto;
        font-size: 125%;
    }

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With the collapsing borders model, there's a fairly complex algorithm that decides which border will be rendered when multiple borders occurs in the same position. See Table formatting in the Ultimate CSS Reference for more details.

    To cut a long story short, any border with border-style:hidden will trump all other borders. IE doesn't work properly, but Firefox does what you tell it to do.

    As Paul said, you need to lose the hidden table border if you want another border to show.
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Zealot
    Join Date
    Feb 2007
    Location
    East of Ottawa, ON
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you gentlemen!

    Why didn't I think of that!

    Also bought a copy of your book

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hope you'll find the book useful.

    The border conflict algorithm isn't something most people are aware of, so don't beat yourself up for not thinking of it.
    Birnam wood is come to Dunsinane


Bookmarks

Posting Permissions

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