Link inside span with display: none; style is visible

Question

So I am using jquery ui dialog like this:

$(document).ready(function() {

    // vytvorenie kurzu
    $('a.openModalBox').click(function(e) {
        var href = $(this).attr('href');
        if ('#/' == href) {
            e.preventDefault();
            $('span.modalBoxContent').dialog({
                modal: true,
                resizable: false,
                title: 'Upozornenie',
                zIndex: 1,
                show: 'fast',
                hide: 'slow',
                width: 600,
                height: 90,
                position: 'middle'
            }).width(600);
        }
    });

});

My HTML looks like this:

<a href="#/" class="next openModalBox lessOpacity">
    Go forward
<span class="modalBoxContent">
    <p style="font-size: .8em; text-align: center;">
            Lorem ipsum.<br />
            Lorem ipsum <a href="/index/index" class="accessible-link">lorem ipsum</a>.
        </p>
</span>
</a>

And the relevant CSS is:

span.modalBoxContent {
    display: none;
}

This works great when there is just a text inside the span.modalBoxContent. but if there is a HTML code, then the span is not completely hidden. In this case (see the above HTML), the link is visible.

How is that possible and how to solve it?

Answer 1

Write valid HTML.

A span element cannot contain a p element. In an attempt to recover from the error, your browser is ending the span just before it starts the p and then ignoring the end tag for the span as another error. (a elements are also inline and also unable to hold block level elements such as p)

Your use of placeholder text makes it difficult to tell what the semantics of the content should be, but you probably should be using something more like:

<a href="#id_of_related_content">link text</a>
<div id="id_of_related_content">
    Your initially hidden content here
</div>

Don't forget to make the link's href attribute to point to something sensible.