Friends, it’s been a long time since we’ve talked. I’m sorry.

It’s that pesky thing called Life. I have two teenagers, a new job, and, well, just stuff that gets in the way of writing here.

But I have something to show you.

I’m working on a project that has a rather large TOC and it’s unorganized (only because of the nature of the import acrobatics that was required).


The issue is with the prefix on each and every topic title. That prefix has to go…and I’m not really too keen on clicking on each entry and removing ‘Server Backup: ‘.

Instead, I need to do a search and replace. Unfortunately, on first glance, search and replace doesn’t work on a TOC file.

But then again, it does!

I right-click on the TOC file in Project > TOCs and select Open With… > Internal Text Editor. I see this (sorry for the blurring – it has to be done).


Yes, it’s intimidating…and scary….but it’s now completely workable with a search and replace!

Here’s my search criteria.


Essentially, I want to find every instance of “Server Backup : ” and remove it. To narrow the search and only find the instance of that string in the title tag, I make sure to select the Title=” part as well. I want to replace it with just  ‘Title=”‘

In the Find in: field, I only want to look through the open file – so I select (current document).

Selecting Find in Source Code is a good practice as well.

Now, you may choose to do this differently, but I prefer to be cautious when it comes to replacing code. Needless to say, I’m not going to click on Replace All. Instead I select Find Next.

You can see what it has selected. This is good.


I click on Replace and get this result:


The prefix I wanted gone….is gone!

So I repeat this process for each entry. Again, I’ve been burned using “Replace All” so I prefer not to use that method. But if you like to live dangerously, go for it.

My resulting TOC when I switch back to the TOC Editor looks like this:


The prefix is gone and I’ve saved a ton of time!

I hope this helps!

I’m building a help system that is supposed to look like slides. It’s for a classroom training effort and instead of PowerPoint (boo!), my client wants to use Flare (yeah!!).

Part of the design involves two div tags next to each other:


Notice how the Description and Functionality boxes are side by side. Generally, this can be handled via two <div> tags floated left. No big deal, right?

Here’s the code for both <div> tags:

First, the larger <div> on the left:

    background-image: none;
    background-repeat: no-repeat;
    background-color: #ffffff;
    border: solid 2px #733d02;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 15px;
    width: 70%;

And here is the code for the smaller <div> on the right
    float: right;
    border: solid 0px #696969;
    padding: 0px;
    width: 27%;
    margin-left: 10px;
    margin-top: 0px;
    margin-right: 0px;

But sometimes the Functionality box ( isn’t there.  Like this:

Screenshot_071614_100159_AMThis situation occurs more than a little frequently. And it’s on pages like this where I want the width of the div.description tag to be 100%. Like this:

    background-image: none;
    background-repeat: no-repeat;
    background-color: #ffffff;
    border: solid 2px #733d02;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 15px;
    width: 100%;

If I’m being honest here, the lack of the Functionality area on the right is going to happen more often than I’d like to contemplate AND there will be thousands and thousands of pages over a large number of projects. UGH.

And I may have mentioned this a couple of times on this blog – I am NOT a fan of working inefficiently. I prefer to work smarter, not harder. This situation could be problematic…how can I fix this without having to look at each page and determine whether or not the right-most <div> tag will be there and then set the width of the left-most <div> tag accordingly.

Uh….that is sooooo not happening. I’m fixing this mess with some handy-dandy CSS code.

When both <div> tags are there, div.description will be set to width:70% and the will be set to width:27%.

The 3% difference is there to account for padding and margin and borders around each div.

That’s great….but how do I tell CSS to determine IF the box is there and THEN to change the width of div.description? Sounds all code-y and scary.

Luckily for me, the nice folks over at W3C already thought about this and, by using an advanced CSS selector, it can be done with 2 lines of code in my style sheet.

<happy dance>

Screenshot_071614_112913_AM</happy dance>

In all fairness, I had to look up the actual name of the selector: Adjacent Sibling Combinator.

Ew….sounds ugly and unpleasant to work with.

However, this amazing Smashing Magazine article about Advanced CSS Selectors defines an Adjacent Sibling Combinator as:

Screenshot_071614_102911_AMThe solution to our problem is a great example of this: + div.description
    width: 70%;

What I’m telling the style sheet to do is this:

When the two <div> tags appear together, the width of div.description will change to 70%.

In this screenshot, the yellow highlighted <div> tag is the parent container. The green highlighted <div> tags are the siblings. And technically, they are adjacent.


This made me so happy, I could cry. No longer did I have to worry about which topics had both <div> tags and which doesn’t! It just works. Woohoooo!

Try it…and let me know if you have any questions.

Page 1 of 6012345102030...Last →
%d bloggers like this: