1

I am using HTML Tidy to output pretty HTML source and as a final encoding check.

However it is taking a very simple list such as:

<ul id="navigation">
            <a href="index.php"><li>Summary</li></a>
            <a href="#"><li>Upload</li></a>
            <a href="accounts.php"><li>Accounts</li></a>
        </ul>

and converting it to this monstrosity:

 <ul id="navigation">
        <li style="list-style: none">
          <a href="index.php"></a>
        </li>
        <li id="active">Summary
        </li>

        <li style="list-style: none">
          <a href="#"></a>
        </li>
        <li>Upload
        </li>
        <li style="list-style: none">
          <a href="accounts.php"></a>
        </li>
        <li>Accounts
        </li>

      </ul>

How do I gracefully tell it to leave my list alone?

I have searched these configuration options, however I often find they are not named intuitively or explained properly.

4 Answers 4

2

It's actually trying to correct your markup to make it conform to standards, your <li> tags should be around the <a> tags, not the other way around, maybe if you fix up that then it won't try to add extra items to the list.

You can remove the style part though, just modify your css to have:

ul.navigation li
{
    list-style: none;
}
3
  • Spot on...the tidy code is just trying to make it how it has to be. Dec 16, 2011 at 11:06
  • I realise this but I am not worried about validating with this file, I simply want to make my whole li's clickable and I have not encountered a browser that cannot render this. Also I already declare the list-style: none;in my css Dec 16, 2011 at 11:08
  • Browsers can render it because they attempt to deal with bad markup. If you need the links to be solid you could set them to use display: inline-block which should do what you want if I understand correctly.
    – Matt Lacey
    Dec 16, 2011 at 11:09
1

The only answer: give it valid markup to start with. The only legal child element of a ul is an li. An a element cannot be a child of a ul.

<ul id="navigation">
    <li><a href="index.php">Summary</a></li>
    <li><a href="#">Upload</a></li>
    <li><a href="accounts.php">Accounts</a></li>
</ul>

If you want the whole li to be clickable, style the a element as display: block:

#navigation li a {
    display: block;
}
1

Your list is invalid markup; an ul element may only contain li elements. Tidy is actually applying the most sensible general approach to fixing such broken markup: it turns any non-li content to an li element for which the list bullter is suppressed.

So manually change markup like

<a href="index.php"><li>Summary</li></a>

to

<li><a href="index.php">Summary</a></li>

which is probably what you want. This may require changes to CSS or JavaScript code, if they expect the current markup.

0

Move your <a> tags into <li>-s:

<li><a href="index.php">Summary</a></li>

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.