Is it possible to remove the space leftover? [tutorial]

[MackemX]

***note from rick752 ... this is basically a "pseudo-tutorial" on using regular css rules to do more complex element-hiding using this forum page as an example. MackemX is testing it using the second row of nav buttons at the top of this page (if you can follow this, it will give you a bit of insight to hiding elements in ABP using REGULAR css rules). Thanx to MackemX for just asking the right questions***

***note #2from rick752 .... this article was written BEFORE ABP's Element Hiding Helper extension was created by Wladimir. Using that extension with ABP is the easiest way to create element hiding rules. This post will still give you a pretty good idea how element-hiding works in ABP though although the forum structure has now changed since then and the example of using this page is no longer valid***

I've looked and tried unsuccessfully to do this seeing as I'm still very new to this . I'm trying to customise a few phpbb forums with my own menu options at the top of the page. I'm getting rid of them but I'm being left with spaces

if I use the element hiding on this site and remove these 4 options below from the top menu options I'm left with a space where they were. I'm presuming it's due to the <td> within the code creating the empty row

these are the 4 elements I was hiding

Code: Select all

richsterling.com#a(href=groupcp.php)

richsterling.com#a(href=sudoku.php)

richsterling.com#a(href=album.php)

richsterling.com#a(href=profile.php?mode=register)

is there an easy way to do this by simply using 1 or more of these 4 elements to hide the complete <td> without affecting anything else on the page/site?

I'm presuming there is but I'm still yet to understand it clearly so bear with me until I do ;)

[rick752]

Here's how you can tree that center table element:

Code: Select all

richsterling.com##span[class=gen] + table > tbody > tr:first-child + tr

...don't ask

[MackemX]

cheers ;)

but how can I ask when I wouldn't know what to ask?

the solution is in front of me but now I need to understand how it is done and I'm sure I'll get there ;)

[MackemX]

I'm playing around with Firebug and I can grasp the basics of tree'ing the code when using the DOM tab. I can see how it works with the code you mentioned also. What I see in the pic below is that it's finding the span with class=gen then skipping the table and tbody but after that I get a little lost although I can understand the tr a little

Code: Select all

richsterling.com##span[class=gen] + table > tbody > tr:first-child + tr

also what's confusing is, does this just block this specific tr or would it also block other similar code on the page if it was there? That's why I was thinking the solution would at least contain a href to one of the 4 links

[rick752]

If you go into Firebug and find that 'tr', you will notice that the element ahead of that 'table' is a:

Code: Select all

<span class=gen>

... tag.

This is a defined starting point becuase all of the table rows have the same name and the table itself isn't very defined.

Looking at Firebug, you will notice that the table is AFTER the span class (not IN it). So you use

Code: Select all

##span[class=gen] + table

The plus sign moves the 'trace' to the next element used that is NOT nested within the SPAN (the target table is not). So far this now would erase the entire table following SPAN class="gen" though, so you have to keep going down into the TABLE elements until you arrive at the destination (which is the second TR)

From TABLE, use ">"s to point down thru the nested table tags. So you end up with:

Code: Select all

##span[class=gen] + table> tbody> tr:first-child + tr

As far as I know .... because there is more than one TR within that TABLE, the first one must be defined with ":first-child" before the second one (+TR) can be defined. Where the hide-string ends is what it will affect.

That's the best I can explain it as I still am trying to learn a lot of this from a couple of others here too. Also, take note that the raw css syntax is different than normal ABP element-hides.

Just look at that hide and look at the structure in Firebug ... you'll start to see it.

PS: Sheepy and Stu:
There are probably a million things wrong with that explanation, so please feel free to jump in and belittle me. All I know is that the hide worked.

[rick752]

The second TR removes the buttons you were trying to hide and collapses that space because the whole row is removed.

And "yes" if there was an IDENTICAL pattern to this hide, it would remove that also. There are other "span class=gen" strings in the page, but they are all nested within a table cell unlike the one we are using.

[MackemX]

The second TR removes the buttons you were trying to hide and collapses that space because the whole row is removed.

thanks for the info as I've learned twice as much in the last 10 mins as I had previously because you gave me a little info to work from. I find things so much easier when given the solution as most times I can work backwards to the problem a bit like reverse engineering ;). It's so simple once you get the basics and I can follow the path to find what I want. Now I'm just playing around with removing each of the rows. The only thing I can see confusing me is the very last part as I guess it can vary depending on what you want to do

out of curiosity, if I wanted to remove 2 lines would I create 2 rules or can you specify more than 1 child?

And "yes" if there was an IDENTICAL pattern to this hide, it would remove that also. There are other "span class=gen" strings in the page, but they are all nested within a table cell unlike the one we are using.

thought so and that's why I was wondering if you can somehow specify the content of the td like you do when you are hiding elements. I'm asking now as I will no doubt come across duplicates in the future where I want to keep one but not the other

is there anywhere I can read up on this in the way you have just explained it as I couldn't get much more from this link to add to what I know

http://adblockplus.org/en/filters#elemhide_basic

and the only link I saw in it was way too confusing to take in straight away

http://www.w3.org/TR/REC-CSS2/selector.html

[rick752]

You can add ANY of the id info after any of the elements in the tree to cut down on false-positives if you wish.

Code: Select all

##span[class="gen"] + table[cellpadding="2"][border="0"] > tbody > tr:first-child + tr

[MackemX]

You can add ANY of the id info after any of the elements in the tree to cut down on false-positives if you wish.

Code: Select all

##span[class="gen"] + table[cellpadding="2"][border="0"] > tbody > tr:first-child + tr

that's good to know ;)

but in my imaginary example (2 of these tables) the only thing different is the info that's within the td

I suppose I could go further up than span but imagine just a page with nothing more than these 2 tables where I couldn't

[rick752]

but in my imaginary example (2 of these tables) the only thing different is the info that's within the td

That's right. And the TD cannot be removed by defining its inner content ... the rules don't work "inside-out".

*edit* ... but in a lot of cases they WILL collapse if they are not dimensionally defined and ALL of the info within is removed. Any TD heights, widths, cellpadding and cellspacing values will not allow a full collapse ... the entire row or column must be removed.

[MackemX]

but in my imaginary example (2 of these tables) the only thing different is the info that's within the td

That's right. And the TD cannot be removed by defining its inner content ... the rules don't work "inside-out".

but what if I worked my way deeper rather than stopping at the td. Can't I somehow work from the img element or the a element above it seeing as they are unique?

<span class="gen">
<br/>
</span>
<table cellspacing="0" cellpadding="2" border="0">
<tbody>
<tr>
</tr>
<tr>
<td valign="middle" nowrap="nowrap" height="25" align="center">
<span class="mainmenu">
<a class="mainmenu" href="groupcp.php">
<img width="12" hspace="3" height="13" border="0" alt="Usergroups" src="templates/subSilver/images/icon_mini_groups.gif"/>
</a>
<a class="mainmenu" href="sudoku.php">
</a>
<a class="mainmenu" href="album.php">
</a>
<a class="mainmenu" href="profile.php?mode=register">
</a>
</span>
</td>
</tr>
<tr>
</tr>
</tbody>

[IceDogg]

I just wanted to jump in to say this is very educational. Thanks. I'm still long way from understanding it all, but I'm learning more and more.

[Guest]

I just wanted to jump in to say this is very educational. Thanks. I'm still long way from understanding it all, but I'm learning more and more.

isn't it just . I've already cleaned up 1 forum to my liking just from this extra piece of info from rick752

the thing is it's so simple now I've been told how to do it. I couldn't find anything that explained it in such simple terms for people who aren't used to it. The CSS selectors page just blew me away when I looked at it

[rick752]

but what if I worked my way deeper rather than stopping at the td. Can't I somehow work from the img element or the a element above it seeing as they are unique?

You could easily go right after the defined element, but in your first example you complained that you couldn't collapse the table row space after hiding the 4 images ... so you would be right back to 'square one' again. To do a full collapse, you would probably have to remove at least the TD tag there (I did the TR because it was the first one I came to):



<tr>
<td valign="middle" nowrap="nowrap" height="25" align="center">
<span class="mainmenu">
<a class="mainmenu" href="groupcp.php">
<img width="12" hspace="3" height="13" border="0" alt="Usergroups" src="templates/subSilver/images/icon_mini_groups.gif"/>
</a>
<a class="mainmenu" href="sudoku.php">
</a>
<a class="mainmenu" href="album.php">
</a>
<a class="mainmenu" href="profile.php?mode=register">
</a>
</span>
</td>
</tr>

[MackemX]

I must be tired as I still don't quite follow what you mean there

I know I'm asking a slightly different question as you helped solve the first one ;). I've been talking about an imaginary example of 2 nearly identical tables in recent posts

I can see that the 3 td's on this site are different so it's not the perfect example

I guess what I've been trying to say is in my imaginary example that has 2 tables with 3 td's, everything is the same apart from the a elements within the td's are different as are the img elements

I will get my head around this so please bear with me

[rick752]

The "a" and the "img" elements are INSIDE of the TD's.

You can't define a TD by using the info INSIDE of it ... it must be defined from the PRECEDING info or by the TD itself. Therefore you cannot remove a TD by using something like:

Code: Select all

##img[src="badImage.gif"] < td

You would have to somehow point the inside info "back again" to the beginning tag. This would need a switch similar to "<" instead of ">" to make this work. This is not allowed in css as far as I know. CSS rules work in-line only. Once they parse a tag and its descriptors, they do not go back to re-check an argument for something contained after that. It would be like using a ":second-last" switch ... it wouldn't know what was second-last until it had already displayed that info. In ABP, the rules need to tell it whether to allow or disallow an element by the time it reads the end of the opening <element tag>. Therefore the 'hide' needs to be defined inline before or at the tag itself ... it won't work after the tag. (see?)

Like I said, css rules will not work inside-out.

edit- *correction & clarification*:
There is only one instance I can think of where css rules actually read backwards to initiate a rule ... the ":last-child" switch. Eg: if you use "TD:last-child", the code would have to read past all of the TDs up to to the row's terminator of </TR>. Only then could it know which <TD> was the last instance.
You also can't define a rule by the visible html page text any more than you could write a stylesheet that would tell the visible word "Rick" to be in bold red text without using a defined ID around it.

[rick752]

In addition to the info in the above post, html itself does not really "contain" anything in between the tags.

<Tags> tell a web page to do a certain thing. If you use a bold tag <b>, the text just turns bold until you use </b> to stop it ... the text in between is never checked beforehand to see how much of it is bold before it is displayed ... it is displayed as bold as soon as it sees the starting bold tag. The ending tag only tells the page to stop the last active instance of bold (it doesn't really know what the span is and doesn't check back to see what tag started it).