CODEWITHSUNDEEP
asp.net
imBlue
imBlue

Reputation: 114

<a> tag not repeating correctly in asp:repeater

I have a repeater that shows a list of albums and each div is wrapped by a <a> tag. Ideally I would be able to click on the image and it would redirect me to the full album.

But what is actually happening that for some reason the <a> tag when spawned by the repeater does not wrap around the divs but instead just appears before the div it should be wrapping. See below...

enter image description here

enter image description here

and my code

            <asp:Repeater runat="server" DataSourceID="Sqlds_Albums">
            <ItemTemplate>
                <div class="col-sm-4">
                    <a href="\">
                        <div class="image-card" style="background-image: url('<%# Eval("PhotoID","../Media/Gallery/{0}.jpg") %>')">
                            <div class="card-text-bottom">
                                <div class="album-link">
                                    <asp:HyperLink ID="albumLink" Font-Bold="true" runat="server" Text='<%# Eval("Title") %>' NavigateUrl='<%# Eval("AlbumID","~/Album.aspx?AlbumID={0}") %>' />
                                </div>
                                <div class="album-nophotos">
                                    <asp:Label ID="lbl_NofPhotos" runat="server" Text='<%# Eval("TotalPhotos","{0} Photos") %>'></asp:Label>
                                </div>
                                <div class="album-visits">
                                    <asp:Label ID="lbl_NofVisits" ForeColor="#333333" Font-Size="11px" runat="server" Text='<%# Eval("NofVisit","(Visited {0} times)") %>'></asp:Label>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </ItemTemplate>
        </asp:Repeater>

Rendered HTML

<div class="col-sm-4">
<a href="\">
                                                                            </a>
<div class="image-card" style="background-image: url('../Media/Gallery/3568.jpg')"><a href="\">
                        </a>
    <div class="card-text-bottom"><a href="\">
                            </a>
        <div class="album-link"><a href="\">
                                </a><a id="Body_ctl00_albumLink_0" href="Album.aspx?AlbumID=99" style="font-weight:bold;">2017 Photos</a>
        </div>
        <div class="album-nophotos">
            <span id="Body_ctl00_lbl_NofPhotos_0">24 Photos</span>
        </div>
        <div class="album-visits">
            <span id="Body_ctl00_lbl_NofVisits_0" style="color:#333333;font-size:11px;">(Visited 683 times)</span>
        </div>
    </div>
</div>

What I tried

  1. Used all the asp: hyperlinks, imagebutton, button etc but no luck.

as usual any guidance greatly appriciated.

EDIT

The problem was the hyperlink inside the .album-link div. Removing it fixed the issue but as recommended below will try to use a different approach to a link div.

Upvotes: 1

Views: 322

Answers (1)

Joel Coehoorn
Joel Coehoorn

Reputation: 415921

In a nutshell, you're trying to do this:

<a><div></div></a>

Technically speaking, that's not valid HTML only valid for HTML5+, and not for HTML4. Under HTML4, <div> is a block-level element, <a> is an inline element, and in the strictest, most standards-compliant sense, inline elements are not allowed to contain block level elements. I know it's a pain; I used to do it all the time, too. But modern browsers now enforce this more strictly than they used to.

Since you're looking at album covers that are effectively images, one option is to use an actual img element, instead of setting the background on a div. This new element would fill the contents of the parent div. Then you can use css to overlay your labels on top of the image, and since img is an inline element you can nest that inside of your original <a> element.

If you have your heart set on keeping one div, the best solution I've seen is here:

Make a div into a link

If I had any clout with the W3C, I'd just add a new block-level link element already, or maybe just allow an href attribute on a few existing block-level elements.

Update:

Reading more on this, you might be able to fix this just by changing your DOCTYPE. The symptoms in the question are consistent with a browser treating this as HTML4, rather than HTML5. HTML4 still has the block/inline distinction, but HTML5 allows <a> to be either "flow-content" (block) or "phrasing-content" (inline).

With that in mind, this should be legal as long your browser knows to interpret this as an HTML5 document, rather than HTML4, which you can do by setting a doctype (which you should do anyway). Then the browser should stop needing to mangle your HTML to produce a compliant DOM.

Upvotes: 1

Related Questions