SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru Rebirth Studios's Avatar
    Join Date
    Mar 2003
    Posts
    621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question De-Styling empty <td>'s

    I'm working with my tech department to style an application.

    We have a two column table with cells that use a background image to style the entries as bullets. The problem in this scenario is that when the last <td> is left empty, it still creates a bullet.

    The programmer tells me that he cannot style the <td> for some reason, because he can't touch the table.

    Is there a way with CSS, that we could de-activate the style to eliminate this rogue bullet?

    Code CSS:
    .td {
        background: url(/images/bullet.gif) no-repeat left;
    }

    Thanks

  2. #2
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not exactly sure what you are talking about, but, maybe I'm on the right track here.

    .td { background: url(/images.... }
    .tdnobullet { background:none; }

    all of your td's are probably styled like so :

    <td>something</td>

    so, in the last <td> tag do this :

    <td class="tdnobullet">last td</td>

    It will use the tdnobullet style to turn off the background / bullet image.
    intragenesis, llc professional web & graphic design

  3. #3
    SitePoint Guru Rebirth Studios's Avatar
    Join Date
    Mar 2003
    Posts
    621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The programmer tells me that he cannot style the <td> for some reason, because he can't touch the table.
    Meaning, he can't assign a class to that cell.

    He said he fixed this kind of issue before for an image problem he had, where he couldn't adjust the code, just the css. This is the css he used...
    Code CSS:
    .gallery img {
        max-width: 380px;
        width: expression(this.width>380?380:true);
    }

    Thoughts?

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

    If you can't target the td uniquely then you are pretty much stuck with it.

    For Firefox you could use :

    Code:
    table{empty-cells:hide;}
    This will hide the empty cells including the background and border.

    I don't think theres anything you can do for IE unless you can apply the bullets to the contents of the td instead of the td itself. This would assume that all the td's start with a p tag or similar though which i guess isn't the case.

    You could probably script it and find which cell is empty and then add a class to remove the background etc.

  5. #5
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Damn IE! With CSS3, you can use the :empty pseudo-class, which is an extremely elegant way to achieve exactly what you want; for example -

    Code:
    td:empty{
    background:transparent;
    }
    Obviously it is completely unrealistic to deploy such a selector currently as support is near none. However, we can all dream!

  6. #6
    SitePoint Guru Rebirth Studios's Avatar
    Join Date
    Mar 2003
    Posts
    621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I talked to the programmer and he was ok with switching the code to <li>'s.

    Thanks all for the comments though!


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
  •