Home/ Questions/Q 7511565
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T23:35:24+00:00

I have an issue in internet explorer 8 and above. I create dynamic content

  • 0

I have an issue in internet explorer 8 and above. I create dynamic content from sitecore, but once I add over a certain number of items on the page of that one item type my css from a certain section of the page decides not to style its content bizarre.

I know there is quite a lot below but this set of code gets created multiple times when I create an item in sitecore:

Front End HTML:

<div class="<%=uniqueID %>">
    <div class="compareRatesSlideSpot">

         <div class="headerContent">
                <div class="tableContainer">
                    <div class="exchangeProvider"><%=exchangeProvider %></div>
                    <div class="exchangeRate"><%=exchangeRate %></div>
                    <div class="transferCharges"><%=transferCharges %></div>
                    <div class="amountYouGet"><%=amountYouGet %></div>
                </div>
                <div class="Toggle">
                    <span> 
                        Learn more <img src="/images/arrow_open.png" /> 
                    </span>
                </div>
          </div>



          <div class="Content">

            <%=content %>

          </div>



    </div>
    <div class="Shadow"></div>
</div>

The Javascript:

<script type="text/javascript">

    $(document).ready(function() { 
        $(".<%=uniqueID %> .headerContent").css("color", "<%=fontColor %>");
        $(".<%=uniqueID %> .tableContainer").css("background-color", "<%=bgColor %>");
        $(".<%=uniqueID %> .Toggle").css("color", "#000000");
    }); 

    var <%=uniqueID %>isToggled = 0;

    $(".<%=uniqueID %> .Toggle").hover(
      function () {
          $(this).css("color", "<%=secondaryColor %>");
      },
      function () {
          $(this).css("color", "#000000");
      }
    );

  $(".<%=uniqueID %> .Toggle").click(function () {

      $(".<%=uniqueID %> .Content").slideToggle("slow");
    if (<%=uniqueID %>isToggled == 0) {
        <%=uniqueID %>isToggled = 1;
        $(".<%=uniqueID %> .Toggle span").html('Minimise <img src="/images/arrow_close.png" />');
    } else if (<%=uniqueID %>isToggled == 1) {
        <%=uniqueID %>isToggled = 0;
        $(".<%=uniqueID %> .Toggle span").html('Learn more <img src="/images/arrow_open.png" />');
    };

});
</script>

I need a second pair of eyes to help find whats going wrong, I have been staring at it for hours and still no success.

Solution:

Sigh it turned out we had the css link for the user control within the user control, which is loaded into different master pages. I put the relevant css link into the head of each master page, works fine now. Thanks to the answer below I was able to debug it down to this problem.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The way the question goes one can only guess.

    As you say that everything is OK until you add some extra HTML elements I would say that you probably should validate your HTML. Pass it through the W3C validation service and try to understand what’s going wrong.

    I’ve experience similar behaviour by leaving an element open.

    <div>
    ....
<div> <!-- forgot to close the div and actually oppened a new one -->
      <!-- can mess with the whole layout -->
    • 0