Results 1 to 7 of 7

Thread: How to remove inherited "display:none" value

  1. #1
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Exclamation How to remove inherited "display:none" value

    Hi
    I have to create a page for a website I am working on. I have an iframe with a page that i do not have the possibility to change. I am however able to link it to my own .css document through the link (.aspx&blablabla?style=myowncss.css)
    I have the .css file working fine but there is a problem.

    The page I cannot change has a table with rows that I need and rows that I don't need. To simplify, the table has 3 rows.

    The first one contains another table with a id value so I can easily remove it by using "display:none".

    The second row however contains just a non-breaking space (i.e. & nbsp; ). I do not want this row to show either.

    The third row contains a div with the info I actually need. The div has an id value so I can access it.

    My problem is then this: The only way I could come up with to access the second row with the non-breaking space and remove it was to use this in the .css file:
    Code:
    table tbody tr td {
    	display:none;
    }
    This does "remove" the second row, but of course removes all rows in the table, including the third one which I need.

    My question: keeping in mind that I can only access the .css file, how can I make the second row disappear (i.e. not display) without affecting the third row. Like I said, the first row contains another table with an id value and the third row contains a div with an id value. The second one is just a row with no class or id values.

    The solution would be, either to somehow just access the second row and give it the display:none value, or to do what I did, i.e. to hide all the rows and then somehow make the third row not follow this, i.e. not inherit this display:none value.

    I have tried giving the div with the id the value display:inline, but it made no difference. Just to make this clear, all three rows are in the same tbody tag. Here is a simplified version of what I have:

    Code:
    <table>
      <tbody>
        <tr>
          <td><table id="idvalue1" class="classvalue1">I don't need/want this to show</table></td>
        </tr>
        <tr>
          <td>&nbsp;</td>//Don't want this to show either
        </tr>
        <tr>
          <td><div id="idvalue2">I need this to show</div></td>
        </tr>
      </tbody>
    </table>
    Please help me. Thanks!
    Last edited by Snookerman; 10-18-2008 at 10:12 AM. Reason: added code tags

  2. #2
    Join Date
    Nov 2007
    Location
    USA
    Posts
    170
    Thanks
    8
    Thanked 22 Times in 22 Posts

    Default

    I achieved the effect you stated like this:

    Code:
    table tr td
    {
    	visibility: hidden;
    }
    
    div#idvalue2
    {
    	visibility: visible;
    }
    Hope this helps.
    What is obvious to you might not be to another.


    My Site

  3. #3
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Thanks for your help. I understand I was a bit unclear. I need to use display:none, because I need to get rid of the first two rows altogether. If I use visibility:hidden I only hide them, but they still take up the space and thus give me a vertical scroll bar that I don't need and cannot have. Also since there only is a non-breaking space there, hiding it will make no difference.
    So I need a solution where I actually get rid of the first two rows so they do not take any space at all. As far as I know only display:none can do that. The problem then still remains. How do I make the third row display while the first two are not displayed?
    Thanks!
    Last edited by Snookerman; 10-17-2008 at 07:59 PM.

  4. #4
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    why not just use this...

    Code:
    table#idvalue1.classvalue1{
    display:none;
    }
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  5. #5
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    I am using that, but I don't want the second row to show either, and that one does not have any id or class.

  6. #6
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    then use this...

    Code:
    table tbody tr td, table tbody tr tr td {
    display:none;
    }
    table tbody tr tr tr td {
    display:block;
    }
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  7. #7
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Thanks, it feels that we are on the right track now, the problem is that the <tr> tags are not nested which means your solution doesn't work (I tried it). If that could just be rewritten somehow to target just the second row specifically. Maybe something else instead of a space between "tr" and "tr". You don't need to bother about hiding the first row, since it has an id and a class so I can deal with that easily. Thanks for your help!

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
  •