CMS Development

sgraci
Participant

Recent Blog Post Not Displaying on Internet Explorer

I am having an issue with our latest blog posts showing up on internet explorer at the following page... https://www.closetworksinc.com/customer-referral-program . All other browsers show normally.

 

Below is the code I am using. Thank you in advance for any help you are able to provide!

 

<!DOCTYPE html>
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
  {% include "custom/page/Deli_Framework/Site_Head.html" %}
  <body class='showroom--inner--new referral-program header--bofu--default header--bofu--hidden'>
    {% include "custom/page/Deli_Framework/Site_Header.html" %}
    <div class='grid hard--top' style='padding-bottom:40px;'>
      <div class='grid__item one-whole'>
        {% image "pageBanner" label="Banner Image", src="http://www.closetworksinc.com/hubfs/images/closetworks-referral-program.jpg", alt="Referral Program", no_wrapper=True %}
      </div>
    </div>
    <div class='grid'><div class='grid__item one-whole'>
        <div style='display:block;overflow:auto;margin-top:20px;margin-bottom:40px;padding-left:10%;padding-right:10%;'>
          <h1 class='text--center' style='font-size:45px;margin-bottom:0px;'>
            {% text "pageHeader" label="Page Header", value="Love Closet Works?", no_wrapper=True %}
          </h1>
          <h6 class='text--center'>
            {% text "pageSubheader" label="Page Subheader", value="Get rewarded up to $200 when you refer a friend or family member!", no_wrapper=True %}
          </h6>
          <p class='text--center'>
            {% text "pageSubtext" label="Page Subtext", value="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.", no_wrapper=True %}
          </p>
        </div>
        <h3 class='strikethrough' style='margin-bottom:40px;margin-top:40px;'>
          <span>
            {% text "stepsHeader" label="Steps Section Header", value="Here's How it Works", no_wrapper=True %}
          </span>
        </h3><div class='grid__item one-whole hard' style='margin-bottom:40px!important;'><div class='grid__item one-third portable-one-whole referral-program--step' rel='1' style='display:inline-block;float:none;vertical-align:bottom;margin-bottom:40px;'>
            <h3 class='text--center' style='font-weight:bold;text-transform:uppercase;font-size:18px;'>
              Step 1
            </h3>
            <div class='referral-program--step--top' style='background:#62d5b0;padding:20px 30px;'>
              <div class='referral-program--step--arrow'></div>
              <p style='margin:0px;text-align:center;color:#ffffff;font-weight:bolder;font-size:20px;'>
                {% text "step1_top" label="Step 1 Top", value="Share Your Closet Works Experience with Family & Friends", no_wrapper=True %}
              </p>
            </div>
            <div style='background:#f9f9f9;padding:20px 30px;border:1px solid #dddddd;border-top:0px;'>
              <div class='equalize'>
                <div class='vert-center'>
                  <p style='margin:0px;text-align:center;font-size:14px;'>
                    {% text "step1_bottom" label="Step 1 Bottom", value="Love your custom installation? Why not share it with friends & family...go ahead and show off!", no_wrapper=True %}
                  </p>
                </div>
              </div>
            </div>
          </div><div class='grid__item one-third portable-one-whole referral-program--step' rel='2' style='display:inline-block;float:none;vertical-align:bottom;margin-bottom:40px;'>
            <h3 class='text--center' style='font-weight:bold;text-transform:uppercase;font-size:18px;'>
              Step 2
            </h3>
            <div class='referral-program--step--top' style='background:#62d5b0;padding:20px 30px;'>
              <div class='referral-program--step--arrow'></div>
              <p style='margin:0px;text-align:center;color:#ffffff;font-weight:bolder;font-size:20px;'>
                {% text "step2_top" label="Step 2 Top", value="Share Your Closet Works Experience with Family & Friends", no_wrapper=True %}
              </p>
            </div>
            <div style='background:#f9f9f9;padding:20px 30px;border:1px solid #dddddd;border-top:0px;'>
              <div class='equalize'>
                <div class='vert-center'>
                  <p style='margin:0px;text-align:center;font-size:14px;'>
                    {% text "step2_bottom" label="Step 2 Bottom", value="Love your custom installation? Why not share it with friends & family...go ahead and show off!", no_wrapper=True %}
                  </p>
                </div>
              </div>
            </div>
          </div><div class='grid__item one-third portable-one-whole referral-program--step' rel='3' style='display:inline-block;float:none;vertical-align:bottom;margin-bottom:40px;'>
            <h3 class='text--center' style='font-weight:bold;text-transform:uppercase;font-size:18px;'>
              Step 3
            </h3>
            <div class='referral-program--step--top' style='background:#62d5b0;padding:20px 30px;'>
              <p style='margin:0px;text-align:center;color:#ffffff;font-weight:bolder;font-size:20px;'>
                {% text "step3_top" label="Step 3 Top", value="Share Your Closet Works Experience with Family & Friends", no_wrapper=True %}
              </p>
            </div>
            <div style='background:#f9f9f9;padding:20px 30px;border:1px solid #dddddd;border-top:0px;'>
              <div class='equalize'>
                <div class='vert-center'>
                  <p style='margin:0px;text-align:center;font-size:14px;'>
                    {% text "step3_bottom" label="Step 3 Bottom", value="Love your custom installation? Why not share it with friends & family...go ahead and show off!", no_wrapper=True %}
                  </p>
                </div>
              </div>
            </div>
          </div></div><div class='text--center' style='padding-left:10%;padding-right:10%;'>
          {% rich_text "stepContent" label="Steps Section Content", value="<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt velit at ligula fermentum sagittis. Nulla consectetur purus id massa ultrices finibus. Nunc ultricies, erat vitae convallis semper, enim libero efficitur **bleep**, vitae finibus neque justo sit amet leo. Nunc interdum, ex non facilisis commodo, magna erat cursus justo, eget tempus est sem at nisi. Aenean ullamcorper ligula quis **bleep** ultrices, eget luctus libero porta.</p><p>Curabitur iaculis felis orci, vitae rhoncus est sollicitudin cursus. Duis **bleep** **bleep**, dignissim sed erat sit amet, dictum rhoncus ligula.</p>", no_wrapper=True %}
        </div>
        <div id='referralProgramForm' style='margin-top:60px;margin-bottom:40px;'>
          {% form "referralProgramForm" label="Form", form_to_use='750ef4a5-998b-4cee-b76a-a484e8073d89', title='Form Area Title Will Be Here' %}
        </div>
        <h3 class='strikethrough' style='margin-bottom:40px;'>
          <span>
            {% text "rssFeedHeader" label="Blog Feed Header", value="The Latest From the Closet Works Blog", no_wrapper=True %}
          </span>
        </h3><div class='grid__item one-whole hard'><div class='grid__item one-third portable-one-whole post-wrapper'>
            <div class='post-wrap'>
              <a class='blog-listing--boxed--item--feature'>
                <img class='production--square' rel='nofollow' src='http://placehold.it/100x50' style='display:block;position:relative;width:100%;height:auto;visibility:hidden;'>
              </a>
              <span class='article-meta'><span class='article-information grid__item one-whole'>
                  <p class='text--center article--topics'></p>
                  <h2 class='text--center post-title'>
                    <span class='h4'>
                      <a></a>
                    </span>
                  </h2>
                </span><span class='blog-listing--boxed--item--share'>
                  <div class='social-sharing-widget-vertical' style='text-align:center;'><a class='grid__item one-whole hard share-twitter' target='_blank'>
                      <span class='circle twitter'>
                        <i class='fa fa-twitter'></i>
                      </span>
                    </a><a class='grid__item one-whole hard share-linkedin' target='_blank'>
                      <span class='circle linkedin'>
                        <i class='fa fa-linkedin'></i>
                      </span>
                    </a><a class='grid__item one-whole hard share-facebook' target='_blank'>
                      <span class='circle facebook'>
                        <i class='fa fa-facebook'></i>
                      </span>
                    </a><a class='grid__item one-whole hard share-google' target='_blank'>
                      <span class='circle google'>
                        <i class='fa fa-google-plus'></i>
                      </span>
                    </a></div>
                </span>
              </span>
            </div>
          </div><div class='grid__item one-third portable-one-whole post-wrapper'>
            <div class='post-wrap'>
              <a class='blog-listing--boxed--item--feature'>
                <img class='production--square' rel='nofollow' src='http://placehold.it/100x50' style='display:block;position:relative;width:100%;height:auto;visibility:hidden;'>
              </a>
              <span class='article-meta'><span class='article-information grid__item one-whole'>
                  <p class='text--center article--topics'></p>
                  <h2 class='text--center post-title'>
                    <span class='h4'>
                      <a></a>
                    </span>
                  </h2>
                </span><span class='blog-listing--boxed--item--share'>
                  <div class='social-sharing-widget-vertical' style='text-align:center;'><a class='grid__item one-whole hard share-twitter' target='_blank'>
                      <span class='circle twitter'>
                        <i class='fa fa-twitter'></i>
                      </span>
                    </a><a class='grid__item one-whole hard share-linkedin' target='_blank'>
                      <span class='circle linkedin'>
                        <i class='fa fa-linkedin'></i>
                      </span>
                    </a><a class='grid__item one-whole hard share-facebook' target='_blank'>
                      <span class='circle facebook'>
                        <i class='fa fa-facebook'></i>
                      </span>
                    </a><a class='grid__item one-whole hard share-google' target='_blank'>
                      <span class='circle google'>
                        <i class='fa fa-google-plus'></i>
                      </span>
                    </a></div>
                </span>
              </span>
            </div>
          </div><div class='grid__item one-third portable-one-whole post-wrapper'>
            <div class='post-wrap'>
              <a class='blog-listing--boxed--item--feature'>
                <img class='production--square' rel='nofollow' src='http://placehold.it/100x50' style='display:block;position:relative;width:100%;height:auto;visibility:hidden;'>
              </a>
              <span class='article-meta'><span class='article-information grid__item one-whole'>
                  <p class='text--center article--topics'></p>
                  <h2 class='text--center post-title'>
                    <span class='h4'>
                      <a></a>
                    </span>
                  </h2>
                </span><span class='blog-listing--boxed--item--share'>
                  <div class='social-sharing-widget-vertical' style='text-align:center;'><a class='grid__item one-whole hard share-twitter' target='_blank'>
                      <span class='circle twitter'>
                        <i class='fa fa-twitter'></i>
                      </span>
                    </a><a class='grid__item one-whole hard share-linkedin' target='_blank'>
                      <span class='circle linkedin'>
                        <i class='fa fa-linkedin'></i>
                      </span>
                    </a><a class='grid__item one-whole hard share-facebook' target='_blank'>
                      <span class='circle facebook'>
                        <i class='fa fa-facebook'></i>
                      </span>
                    </a><a class='grid__item one-whole hard share-google' target='_blank'>
                      <span class='circle google'>
                        <i class='fa fa-google-plus'></i>
                      </span>
                    </a></div>
                </span>
              </span>
            </div>
          </div></div><script src='http://cdn2.hubspot.net/hubfs/486521/assets/scripts/hubRss--public.js'></script>
        {% text "rssFeedUrl" label="Blog Feed URL", value="http://www.closetworksinc.com/blog/rss/xml", no_wrapper=True, export_to_template_context=True %}
        <script>
          hubRSS({
          	url: "{{ widget_data.rssFeedUrl.value }}",
          	number: 3,
          	images: true,
          	callback: function () {
          		for (i=0;i<rssData.length;i++) {
          			$('.post-wrap:eq('+i+') .post-title a').html(rssData[i]['title']);
          			$('.post-wrap:eq('+i+') .article--topics').html(rssData[i]['category'].join(" / "));
          			$('.post-wrap:eq('+i+') .blog-listing--boxed--item--feature, .post-wrap:eq('+i+') .post-title a').attr('href',rssData[i]['url']);
          			$('.post-wrap:eq('+i+') .blog-listing--boxed--item--feature').css('background-image',"url('"+rssData[i]['image']+"')");
          
          			$('.post-wrap:eq('+i+') .share-twitter').attr('href',"https://twitter.com/intent/tweet?text="+encodeURI(rssData[i]['title'])+"&url="+rssData[i]['url']+"");
          			$('.post-wrap:eq('+i+') .share-linkedin').attr('href',"https://www.linkedin.com/shareArticle?url="+rssData[i]['url']+"&title="+encodeURI(rssData[i]['title']));
          			$('.post-wrap:eq('+i+') .share-facebook').attr('href',"https://www.facebook.com/sharer/sharer.php?u="+rssData[i]['url']);
          			$('.post-wrap:eq('+i+') .share-google').attr('href',"https://plus.google.com/share?url={"+rssData[i]['url']);
          		}
          	}
          });
        </script>
      </div></div>
  </body>
  {% include "custom/page/Deli_Framework/Site_Footer.html" %}
</html>
<!--
  
-->

 

0 Upvotes
2 Replies 2
jetta
Participant

Recent Blog Post Not Displaying on Internet Explorer

Hi @sgraci,

 

What sort of functionality issues are you seeing in IE? Just that new blog posts aren't showing up? Can you share screenshots of IE vs chrome?

0 Upvotes
sgraci
Participant

Recent Blog Post Not Displaying on Internet Explorer

Hey Jetta, thanks for responding. The blog post will show but the specific images will not display and the social media links are not clickable. Everything works perfect in all other browsers. Please see the screenshot you asked for below. Appreciate all of your help in advance!

 

Sal

 

ClosetWorksReferralPage.png

0 Upvotes