I am using chrome on my mac and I am developing a WordPress website. I have been working on 2 different sites over the past 3 days and I have all of a sudden come across an error where if I try and have 2 tags in one div for varying links in WordPress it basically breaks and starts adding all the tags into all the child divs throughout the container and closes them. This is only on screen, when I view source it looks fine to me.

I have been through W3c validation etc and there is nothing unordinary about the markup and its all fine. The problem has just all of a sudden happened last week it was not a problem at all.

I will give you an example of some code that is causing the issue for me:

<!-- Lets query the taxonomy category and spit some shit out -->
<article id="post-<?php the_ID(); ?>" <?php post_class('event'); ?>>
    <a class="more" href="<?php the_permalink(); ?>">
        <?php 
        $datevalueS = get_post_meta( get_the_ID(), '_shiftms_event_date_start', true );
        $datevalueE = get_post_meta( get_the_ID(), '_shiftms_event_date_end', true );  
        ?>
        <?php 
        $datetimeStart = shiftms_convertunix_timestamp($datevalueS);
        $datetimeEnd = shiftms_convertunix_timestamp($datevalueE);
        ?>
        <div class="col-lg-2 event-image-thumbnail" style="background-image: url(<?php _mbbasetheme_post_thumbnail_url(); ?>);">
            <a href="" title="Add to Calendar" class="addthisevent-drop">
                Add to Calendar
                <span class="_start"><?php echo $datetimeStart['date']; ?><?php echo $datetimeStart['time']; ?></span>
                <span class="_end"><?php echo $datetimeEnd['date']; ?><?php echo $datetimeEnd['time']; ?></span>
                <span class="_zonecode">36</span>
                <span class="_summary"><?php echo wp_trim_words( get_the_content(), 60, '...' ); ?></span>
                <span class="_description"><?php the_content(); ?></span>
                <span class="_location">Location of the event</span>
                <span class="_organizer">Organizer</span>
                <span class="_organizer_email">Organizer e-mail</span>
                <span class="_facebook_event">http://www.facebook.com/events/160427380695693</span>
                <span class="_all_day_event">true</span>
                <span class="_date_format">DD/MM/YYYY</span>
            </a>
        </div>
        <div class="col-lg-8">
            <h2><?php echo $datetime['date']; ?></h2>
            <h1><?php the_title(); ?></h1>
            <p><?php echo wp_trim_words( get_the_content(), 60, '...' ); ?></p>
        </div>
    </a>
</article>

Now to any other developer this would seem pretty straight forward and it is, it works fine but for some reason the error mentioned above occurs and in viewing the source I get it looking fine as it should be but in chrome I see this happening which is weird:

    <article id="post-16155" class="post-16155 shiftms-event type-shiftms-event status-publish has-post-thumbnail hentry event">
        **<a class="more" href="http://shiftms2:8888/shiftms-event/a-test-event/"></a>**
    <div class="col-lg-2 event-image-thumbnail" style="background-image: url(http://shiftms2:8888/wp-content/uploads/2014/07/postitbg-450x146.jpg);">
**<a class="more" href="http://shiftms2:8888/shiftms-event/a-test-event/"></a>**
<a href="" title="Add to Calendar" class="addthisevent-drop">
                    Add to Calendar
                    <span class="_start">04-09-201411:00</span>
                    <span class="_end"></span>
                    <span class="_zonecode">36</span>
                    <span class="_summary">The description Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum....</span>
                    <span class="_description"><p><strong>The description</strong></p>
    <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.</p>
    </span>
                    <span class="_location">Location of the event</span>
                    <span class="_organizer">Organizer</span>
                    <span class="_organizer_email">Organizer e-mail</span>
                    <span class="_facebook_event">http://www.facebook.com/events/160427380695693</span>
                    <span class="_all_day_event">true</span>
                    <span class="_date_format">DD/MM/YYYY</span>
                </a>
            </div>
            <div class="col-lg-8">
                <h2></h2>
                <h1>A test event</h1>
                <p>The description Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum....</p>
            </div>
    </article>

** ** This is where the links are being added badly throughout.**

So this is what renders on screen but not in the source, can anyone point me in the right direction as to the issue might be?

Read more here: Why is my browser rendering anchor tags and closing them without wrapping content?


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , , , , ,

Wordpress related questions and answers: