Clistview Wrapping <A>, Weird Behaviour

Well hello folks!

I have this weird mystery:

So i am using CListview for rendering a dataprovider list. And i want to make each item (rendered by _view) fully clickable as a href.

this is my _view file:




<div class="row" >

    <div class="span4">MY CONTENT</div>

</div>



adding the <a>:




<a href="a link">

<div class="row" >

    <div class="span4">MY CONTENT</div>

</div>

</a>



Using the browser’s inspectors gives me this weird result:




<a href="a link">

</a>

<div class="row" >

    <div class="span4">MY CONTENT</div>

</div>



How can that happen? I am using LESS as css preprocessor and bootstrap js/css.

Thank you guys very much!

<a href="a link"> must be a block element. Add this properties in your css

Thanks for the quick reply!

Yes i added "display: block" to the <a> element. But still the same issue.

Hm… maybe bootstrap.css overrides your property. Add !important in end of the line with link’s property

Wrapping block level elelments (DIV) with a link (A) is introduced only in HTML5, previously it was not possible/working… so I guess you are using a browser that does not "know" HTML5

Previously, I was solving this by using SPAN elements instead of DIV and then in the CSS for those SPANs would set "display:block" so they would simulate a DIV element. This way you would have a link (A) wrapping in-line elements (SPAN), and that was allowed and working.