How To Find Which <div> is Mismatched?

troubleshooting nesting divs

[cssatsc]

I have some PHP code that produces pretty complex nested <div>s.

At some (unknown) point a bug has been introduced - that results in a mismatched <div>. That is, not all <div> are properly closed by </div>.

The problem is: I have hundreds of <div> in the HTML page and I have no idea how to find out the one that is mismatched. It's like finding a needle in a haystack.

Using a text editor, I managed to find out that a </div> is missing, but I don't know which one...

Is there a technique or tool that helps finding which <div> is mismatched?

Thanks!

[rocknbil]

Like anything else, a complex machine is not so complex when you break down it's parts. Are any of these hundreds redundant, as in generation of a page of products?

If this is the case, it's not as difficult. Either alter your code or select statement so it generates only one instance of the larger page. Copy that chunk and drop it into the validator.

If it's one big tangled mass of related code, here's what I do:

First, add HTML comments to your PHP that indicate chunks/benchmarks in your code. Add an opening and closing comment by each piece as in the second sample below. It will help you navigate through the jungle. Sometimes this alone will be enough to sort it out (the number of facepalms I've given myself over this . . . )

It also helps to force indents and line breaks:

$code = " 
<div> 
 <div> 
  <div> 
   .... 
"; 

Visualize tabs indented each line, not spaces

If it's still not obvious, view source, paste it into a text file. It helps to have an editor that does offline validation for you - I still use HomeSite.

Now go into the tangled mass, and based on your HTML comments, start removing the centermost chunks of code, the deepest nested atomic parts, the ones you know can't be the cause. The bolded below is a simplified example.

<div> <!--outer container --> 
 <div> <!-- inner 1 --> 
 <div> <!-- inner 2--> 
 <div> <!-- inner compartment --> 
  <div class="left-floater"> 
  <p>This is already nested too deep!</p> 
  </div> 
  <div> Div ad nauseum . . . </div> 
  <div class="clear-div"></div> 
 </div> <!-- end inner compartment --> 
 </div> <!-- end inner 2 --> 
 </div> <!-- end inner 1 --> 
</div> <!-- end outer container --> 

Work your way from the inside out, if you don't have an offline validator, keep pasting the code into the W3C validator until you get a green light.

Some days I work it the other way, beginning with the simplest frame of a template, validate it first, then begin working inward. Whatever seems easiest to you.

[tedster]

I still use HomeSite

Me too - and Homesite has a nifty "find matching tag" function. I sure wish Adobe would continue to support and evolve the product now that they bough Macromedia. But alas, they say no go.

[g1smd]

If your site is made from "included" files, then inspect those first. Ensure that each one contains matched pairs. In fact, never design a site such that something is opened in one include and closed in another. Move the opening and closing to a parent file if you find yourself doing that.

[cssatsc]

Guys, you are amazing. Thank you so much!

I will study thoroughly the host of information you provided here (especially rocknbil). I didn't know about HomeSite.

Since my budget is extremely limited I have been using Open Source tools such as Kompozer 0.7.10 and Notepad++ 4.12.

These are great at highlighting but wouldn't flash/blink a missing tag nor would they re-indent a given HTML code (they will only mark a matched '>').

[swa66]

Also validating your code (assuming it originally was valid code) might help point out what's wrong.

But the problem is to find which is missing, you'll need to know the semantics of the divs, and that's not easy.

[validator.w3.org...]

[cssatsc]

Also validating your code (assuming it originally was valid code) might help point out what's wrong.

Of course. That's how I discovered in the first place that I have mismatched <div>s:

I had a working web site with a minor function all of a sudden not working properly. As part of troubleshooting the problem I ran the site via [validator.w3.org....] I was stunned to discover 50+ errors.

In the meanwhile I managed to solve the original problem (which had nothing to do with the fact that HTML validation produced 50+ errors) but, in the process, I discovered a mismatched <div> that for some reason doesn't result (yet) in any catastrophe. That's definitely a lesson for me.

I am going now to use all the useful information & tips I received in this thread to make my web site validation error-free.

Thanks!

[rocknbil]

I was stunned to discover 50+ errors.

These tend to cascade, so fixing one may fix many others. Look for the redundant ones (example, irrelevant to your problem, 'alt tag required' and you have 10 images, none with alt tags.) Knock those off, then start at the top of the list.

[cssatsc]

These tend to cascade, so fixing one may fix many others.

Yes, I have already discovered that. I managed to simplify my site's homepage (by turning off sideboxes, banners, etc.), got 15 errors, replaced one '&amp;' with htmlspecialchars('&') and all of a sudden all 15 errors disappeared.

In the process of learning this troubleshooting subject, I discovered a simple way of telling whether a certain HTML page has all its <div>s closed or not (simply 'Yes/No' test):

1. Create a simple awk script named count_words.awk:

NR==1 { re_word = "(^¦[^[:alpha:]])" word "([^[:alpha:]]¦$)" ;print re_word}
{ count += gsub(re_word,"_") }
END { print count }

2. Run it on the saved HTML source:
count_words.awk word="<div" suspect-file.html

3. Run it again on the saved HTML source:
count_words.awk word="/div" suspect-file.html

4. If matched, the numbers should be equal.

Note: grep won't work because it counts lines, which misses cases in which there are several divs or /divs in a single line.