Solved

CSS - hid fourth row in table?

Posted on 2014-03-17
7
256 Views
Last Modified: 2014-03-17
Hi,
can anyone tell how to hide the Brokers link in the table below using CSS?

Thanks.

      <div align="center">
        <table width="768"  height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#990000">
          <tr>
            <td width="96" class="navcell"><a href="index.php" class="nav">
            <font color="#D0C96C"><span style="display: block">Home</span></font></a></td>
            <td width="96" class="navcell"><a href="businesses-type-all-state-NSW.htm" class="nav">
            <font color="#D0C96C"><span style="display: block">Sydney</span></font></a></td>
            <td width="96" class="navcell"><a href="businesses-type-all-state-QLD.htm" class="nav">
            <font color="#D0C96C"><span style="display: block">Brisbane</span></font></a></td>
            <td width="96" class="navcell"><a href="brokers.php" class="nav"> 
            <font color="#D0C96C"><span style="display: block">Brokers</span></font></a></td>
            <td width="96" class="navcell"><a href="services.php" class="nav"> 
            <font color="#D0C96C"><span style="display: block">Services</span></font></a></td>
            <td width="96" class="navcell"><a href="contact.php" class="nav">
            <font color="#D0C96C"><span style="display: block">Contact</span></font></a></td>
            <td width="96" class="navcell"><a href="disclaimer.php" class="nav">
            <font color="#D0C96C"><span style="display: block">Disclaimer</span></font></a></td>
          </tr>
        </table>
      </div>

Open in new window

0
Comment
Question by:sabecs
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
7 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39935670
i dont know why your styles are inline, but if you want an inline style, apply this rule to whatever element you want to hide

style="display:none;"
0
 

Author Comment

by:sabecs
ID: 39935682
Thanks for your help, much appreciated.

It's an old website and the above table is in hundreds of files, I was after a quick way to add something to a common CSS file to hide the  4th row, is this possible?

I don't want to spend time removing from hundreds of files as site will be updated shortly, my customer wants one page removed urgently.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39935683
With css you could do this:

.navcell a[href='brokers.php'] {
    display:none
}
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:sabecs
ID: 39935685
Thanks Tom, that is almost perfect, is there a way to change the width to 0 as  <td width="96" is still taking up space?
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 39935687
You could hide the whole td if it's always the fourth td as long as there is only one row in the table.

.navcell:nth-of-type(4) {
    display:none
}

Older versions of IE will have trouble with this.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39935699
As a way to handle IE less than v9 you could add both rules.

.navcell a[href='brokers.php'] {
    display:none
}

.navcell:nth-of-type(4) {
    display:none
}

Then at least the link will be gone in older IE versions (though the td will still take up space).
0
 

Author Closing Comment

by:sabecs
ID: 39935700
Thanks Tom, that is perfect.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

622 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question