SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26

Hybrid View

  1. #1
    SitePoint Wizard
    Join Date
    Oct 2001
    Posts
    2,686
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wiew border around empty cells

    Does anybody knows if there is a way, using style-sheets, to wiew the border around empty cells. I think I remember (or maybe I just so wrong) somthing like
    Code:
    td {empty-cells: visible;}
    But I can't remember exactly. I have tried different spellings, but nothing seems to work. I have also tried to find somthing in the documentation at w3c

    And yes i'm aware of the 'nbsp' with a '&'
    But the 'empty-cells' thing would be so much easier way to do it.

    -Helge

  2. #2
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess I'm confused about what you are trying to accomplish. Are you trying to get a border around all empty cells using CSS?

    Sketch
    Aaron Brazell
    Technosailor



  3. #3
    SitePoint Wizard
    Join Date
    Oct 2001
    Posts
    2,686
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes.
    I'm pulling some information out from a db. And some of the cells are empty. Now I check for empty cells trough some if-statements, but it would have been so much easier if I could do this trough css.
    Last edited by Helge; Nov 27, 2001 at 13:47.

  4. #4
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, okay, but before going farther....are you putting the same border around cells with content too? My point is why don't you just do something like this in your stylesheet:
    Code:
    td {
      border: 0;
      border-color: #000066; //or whatever you choose
    }
    That would give all your cells a border of 0 and a dark blue border...although the border-color is optional and you could use any color you wanted.

    Is this what you were looking for?

    Sketch
    Aaron Brazell
    Technosailor



  5. #5
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but you could just do:
    Code:
    td { empty-cells: show }
    That is what you were trying to accomplish. However, if you want borders around all the cells, try my first suggestion.

    sketch
    Aaron Brazell
    Technosailor



  6. #6
    SitePoint Wizard
    Join Date
    Oct 2001
    Posts
    2,686
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for trying to help me out, even if I don't explain myself to good. Sorry.

    I'm trying to have the same border-width, -style, -color to all the cells in the table. These values are already set for every tablecell, trough an css.
    The thing is that the empty cells becoms invisible, unless I insert the nbsp-thing. But what I'm trying to do, is to avvoid nbsp in the empty cells and do all the style trough css.

    -Helge
    Last edited by Helge; Nov 27, 2001 at 13:04.

  7. #7
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah, ok. That's fine.

    Add the empty-cells: show; to your td definition in your stylesheet.
    Aaron Brazell
    Technosailor



  8. #8
    SitePoint Wizard
    Join Date
    Oct 2001
    Posts
    2,686
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. But I' sorry to tell you that I still can't see any changes in the webpage.
    Here's a part of my css:
    Code:
    table {
      font-size: 12px;
      border: double thin #dddddd;
      border-width: 5px;
    }
    th, td {
      empty-cells: show;
      border: dashed thin #dddddd;
      border-width: 1px;
    }
    Am I doing anything wrong? On this computer there's only IE 5.5, so I can't check with other browsers.
    -Helge

  9. #9
    SitePoint Wizard
    Join Date
    Oct 2001
    Posts
    2,686
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is my site, if you want to have a look http://www.stud.ntnu.no/~austerhe/re...dmin/test.php3. it's in norwegian only, but I don't think that matter.

    -Helge
    Last edited by Helge; Nov 27, 2001 at 14:02.

  10. #10
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try this:

    Code:
    table {
      font-size: 12px;
      border: double thin #dddddd;
      border-width: 5px;
    }
    td {
      empty-cells: show;
      border: dashed thin #dddddd;
      border-width: 1px;
    }
    th {
      empty-cells: show;
      border: dashed thin #dddddd;
      border-width: 1px;
    }
    Sketch
    Aaron Brazell
    Technosailor



  11. #11
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...I see what you mean...hold on. Working on it.
    sketch
    Aaron Brazell
    Technosailor



  12. #12
    SitePoint Wizard
    Join Date
    Oct 2001
    Posts
    2,686
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, still doesn't seem to work.

    I'm really greatful that you are trying to help my out on this!

    -Helge

  13. #13
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hedge...

    I'm afraid to tell you that I think you need to put a blank gif or an   in each cell. Although I am not able ti find out about any known browser bugs, I am using IE 6 and you are using IE 5.5 and neither of us can get this thing to work right. The syntax is right, but I'm not sure what's glitching it up.

    Sorry I can't be of more help. I'm trying...

    Sketch
    Aaron Brazell
    Technosailor



  14. #14
    SitePoint Wizard
    Join Date
    Oct 2001
    Posts
    2,686
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, thank you anyway for trying this hard!

    -Helge

  15. #15
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Helge,

    I believe you need to specify the diplay property to "table-cell" in order to use the empty-cells property.

    Code:
    td
      {
      display: table-cell;
      empty-cells: show;
      }
    I've never used it so I'm not sure about browser support for this, but I think thats the way it should work.

    From the CSS-2 spec:

    'empty-cells'
    Value: show | hide | inherit
    Initial: show
    Applies to: 'table-cell' elements
    Inherited: yes
    Percentages: N/A
    Media: visual

    HTH

  16. #16
    SitePoint Wizard
    Join Date
    Oct 2001
    Posts
    2,686
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for giving this a shot, isotope235!'
    But I'm sorry to tell that your suggestion did't change anything.

    Here's a from the css2 spec:
    In the separated borders model, this property controls the rendering of borders around cells that have no visible content. Empty cells and cells with the 'visibility' property set to 'hidden' are considered to have no visible content.

    So I tried to set the visibility of the table cells to 'hidden' The content got invisible, but the borders were still not drawn, even not around thoose cells that have a content when the 'visibility' is set to 'visible'.

    So now I'm confused.

    -Helge

  17. #17
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I might have steered you wrong. Try using
    Code:
    table
      {
      border-collapse: separate;
      }
    td
      {
      display: table-cell;
      empty-cells: show;
      }
    Also try checking if these properties are supported by your test browser.
    WebReview has a good compatibilty chart I tried to check, but the page kept "hanging". Might be my ISP though, worth a shot.

    Its late, I'll try to mess with it some tomorrow.

  18. #18
    SitePoint Wizard
    Join Date
    Oct 2001
    Posts
    2,686
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK. I hopfully did some steps in the right direction.
    I added this to the css:
    Code:
    table {border-collapse: collapse}
    That gave me this result: Test2, wich is not exactly what I want. I would like the borders to be like in the example Test

    But if I use
    Code:
    table {border-collapse: separate}
    it makes no difference. See Test

    It would be great if anyone could explain why this is happening. I've tried to read about 'border-collapse in the css2-reference but I don't understand how and why that is affecting the border.

    I really appreciate that you are helping me out isotop235, but don't bother if it's to much of a drudgery.
    I checked out both the compatibilty chart on css1 and css2 from WebReview but I didn't find anything about 'empty-cells', 'border-collapse' or 'display'.

    -Helge

  19. #19
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK,

    lets give it another shot:

    If I'm following you, you want the borders between the cells to be spaced apart?

    Try adding

    Code:
      {
      border-spacing:foo;
      }
    to the table declaration

    More fun f/ the CSS-2 spec:
    'border-spacing'
    Value: <length> <length>? | inherit
    Initial: 0
    Applies to: 'table' and 'inline-table' elements
    Inherited: yes
    Percentages: N/A
    Media: visual

    The lengths specify the distance that separates adjacent cell borders. If one length is specified, it gives both the horizontal and vertical spacing. If two are specified, the first gives the horizontal spacing and the second the vertical spacing. Lengths may not be negative.

    In this model, each cell has an individual border. The 'border-spacing' property specifies the distance between the borders of adjacent cells. This space is filled with the background of the table element. Rows, columns, row groups, and column groups cannot have borders (i.e., user agents must ignore the border properties for those elements).

    Originally posted by Helge
    I really appreciate that you are helping me out isotop235, but don't bother if it's to much of a drudgery
    Its not drudgery at all, happy to help if I can.

  20. #20
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah, not a drudgery. We want to get this thing working...if for nothing else, so I can learn too!

    Sketch
    Aaron Brazell
    Technosailor



  21. #21
    SitePoint Wizard
    Join Date
    Oct 2001
    Posts
    2,686
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys.

    Well, the 'border-spacing' property doesn't seem to have any influense.

    Noe I have this css for both test sites (test.php3 and test2.php3):
    Code:
    table {
      border-collapse: separate;
      border-spacing: 10px;
      border: double thin #dddddd;
      border-width: 5px;
      }
    td {
      display: table-cell;
      empty-cells: show;
      border: dashed thin #dddddd;
      border-width: 1px;
      font-size: 11px;
      }
    Does it matter in wich order the different proeperties are in the style-sheet? That would be nice to know because when I try your different suggestions I always change the order of the properties in case it has any influence.
    So are there any difference between theese to examples?
    Code:
    table {
      border-collapse: separate;
      border-spacing: 10px;
      }
    table {
      border-spacing: 10px;
      border-collapse: separate;
      }
    -Helge

  22. #22
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm...this is becoming quite the brainteaser. I'll see if I can come up with any other ideas when I get of work. Its not time to throw in the towel yet!

    In my experience it doesn't matter which order you have the declarations in.

    Back later...

  23. #23
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I think its a browser issue.

    Seems to work OK in Opera 5 & NN6.1. Falls apart in IE5.0 (can't check in other version of IE).

    Opera screenshot

    Guess you'll have to use some if statements & stick w/ &amp;nbsp;.

    test code:
    Code:
    <html>
    
    <head>
    
    <title></title>
    
    <style>
    table
    	{
    	border-collapse: separate;
    	border-spacing: 10px;
    	border: double thin #dddddd;
    	border-width: 5px;
    	}
    td
    	{
    	display: table-cell;
    	empty-cells: show;
    	border: dashed thin #dddddd;
    	border-width: 1px;
    	font-size: 11px;
    	height:70;
    	width:25%;	
    	}
    </style>
    
    </head>
    
    <body>
    
    <table width="300">
      <tr>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td></td>
      </tr>
      <tr>
        <td>3</td>
        <td>3</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>3</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    
    </body>
    
    </html>

  24. #24
    SitePoint Wizard
    Join Date
    Oct 2001
    Posts
    2,686
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm very greatfull that you figured it out.

    I' didn't work in IE5.5 or IE6.0 either. At the university I only hav access to computers with IE5.5 and IE6.0 so I can't check it with other browser.

    Anyway, I'm really glad you figured it out for me!! Thanks!

    -Helge

  25. #25
    SitePoint Member
    Join Date
    Dec 2001
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    borders for epty cels

    Try put in empty cels 1px transparent gif with server side script (ASP or PHP), it helps for Netscape 4+ and others.
    Dainis


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
  •