HTML coding error making links not work

HTML & CSS
1

Hi,

I seem to have made a coding blunder because the links in my code (except for the first one on Calculators) do not work. Could someone please take a look and point out the error?

Cheers!

The code is:

<div
class="sidebar-content-library"><ul><li><div><img
src="https://bankruptcycanada.com/wp-content/uploads/2017/02/calculator-icon.png"></div><div><a
href="https://bankruptcycanada.com/bankruptcy-calculators/">Calculators</a></div></li>
<li><div><img
src="https://bankruptcycanada.com/wp-content/uploads/2017/02/infographic-icon.png"></div><div><a
href="/tag/infographics">Infographics</a></div></li><li><div><img
src="https://bankruptcycanada.com/wp-content/uploads/2017/02/slideshare-icon.png"></div><div><a
href="/tag/slideshare">Slideshare</a></div></li><li><div><img
src="https://bankruptcycanada.com/wp-content/uploads/2017/02/podcast-icon.png"></div><div><a
href="/tag/podcast">Podcasts</a></div></li><li><div><img
src="https://bankruptcycanada.com/wp-content/uploads/2017/02/videos-icon.png"></div><div><a
href="https://www.youtube.com/channel/UCr7rKh_MdV3QtPPqCAyRwlg" target="_blank">Videos</a></div></li><li><div><img
src="https://bankruptcycanada.com/wp-content/uploads/2017/02/quiz-icon-1.png"></div><div><a
href="/tag/quiz">Quizzes</a></div></li><li><div><img
src="https://bankruptcycanada.com/wp-content/uploads/2017/02/dictionary-icon.png"></div><div><a
href="https://bankruptcycanada.com/references/canadian-bankruptcy-dictionary/">Debt Management Terms</a></div></li></ul></div>

Which is in a sidebar widget for Wordpress:

2

Errrm, that’s errors plural. Try fixing as many of these as you can and keep trying until it stops giving you the “suppressing further” and passes validation.

bankruptcycanada validation errors

2 Likes
3

Try validating the web-age:

https://validator.w3.org/nu/?doc=https%3A%2F%2Fbankruptcycanada.com%2Fsidebar%2F

There are numerous errors and with a bit of luck your problem should be solved.

Edit:
Pipped at the post by @Mittineague :slight_smile:

4

The validation errors are not causing the links to not work.

5

So you have identified the real cause then, what was it?

6

No they’re not, at least not now. :slight_smile:

The cause as I see it is that the floated DIVs that holds the links and icons are not contained by neither the list or list-items.

I suggest you to use a clear-fix of some sort.
E.g.:

Add the class="clearfix" to the container (try the list itself if that can fix the issue) that holds the float(s) and add a clearfix rule-block to the css:

.clearfix::after{
    display:table;
    content:" ";
}

In case the container already uses the after pseudo element, you can try add a css declaration to it that makes it see floats it has. E.g.:
display: table;
display: inline-block;
overflow: hidden;

There are also other options; search for “float clearing” here on SitePoint and you will find many threads.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.