Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Bjarne Fyrstenborg 1281 posts 3992 karma points MVP 8x c-trib
    Nov 20, 2011 @ 16:26
    Bjarne Fyrstenborg
    0

    IE moves div tags

    Hi..

    I'm using Tea Commerce where I have a cart in the header of the site.. it looks fine in browser like Chrome and Firefox .. and in IE7 .. but in IE8 and IE9 it has another wrapper and header div tags inside the form tags.. and a wrapper, header and content div outside the form tag..

    it should show the tags like this:
    <form runat="server">
    <div id="wrapper">
    <div id="header">...</div>
    <div id="content">...</div>
    </div>
    </form>

    but IE8 and IE9 do this:
    <form runat="server">
    <div id="wrapper">
    <div id="header">...</div>
    </div>
    </form>
    <div id="wrapper">
    <div id="header">...</div>
    <div id="content">...</div>
    </div>

    Chrome:


    IE8 and IE9:


    you can see the site here: http://sub.ak-security.dk

    when I remove the cart macro from my template, it displays the header in IE8/IE9 just like it should and Chrome and Firefox display it..

    So is there anything of the code in xslt that perhaps cause the div tags closing the wrong places and mess it up in IE8 and IE9 ?

    my xslt for the cart is here:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE xsl:stylesheet [
      <!ENTITY nbsp "&#x00A0;">
    ]>
    <xsl:stylesheet
      version="1.0"
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
      xmlns:msxml="urn:schemas-microsoft-com:xslt"
      xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:teacommerce="urn:teacommerce"
      exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets teacommerce ">


      <xsl:output method="xml" omit-xml-declaration="yes"/>
        
    <!--
        WHAT IS THIS FILE?
        Writes the html for the top minicart.
    -->

      <xsl:param name="currentPage"/>

      <xsl:template match="/">
        <!-- VARIABLES START -->
        <xsl:variable name="order" select="teacommerce:GetOrderXml()" />
        <xsl:variable name="currentCurrency" select="teacommerce:GetCurrentCurrency()" />
        <xsl:variable name="currencies" select="teacommerce:GetCurrencies()/currency" />
        <xsl:variable name="totalQuantity">
          <xsl:choose>
            <xsl:when test="$order != ''">
              <xsl:value-of select="$order/@totalQuantity" />
            </xsl:when>
            <xsl:otherwise>
              <xsl:text>0</xsl:text>
            </xsl:otherwise>
          </xsl:choose>
        </xsl:variable>
        <xsl:variable name="cartPageId" select="$currentPage/ancestor-or-self::Lang//Cart/@id" />
        <xsl:variable name="cartPageUrl">
          <xsl:if test="$cartPageId != ''">
            <xsl:value-of select="umbraco.library:NiceUrl($cartPageId)" />
          </xsl:if>
        </xsl:variable>
        
        <xsl:variable name="miniCartClass">
          <xsl:value-of select="concat('items', $totalQuantity)" />
        </xsl:variable>
        <!-- VARIABLES END -->

        <!-- HTML START -->
        <div id="miniCart">
          <xsl:attribute name="class">
            <xsl:value-of select="$miniCartClass" />
          </xsl:attribute>
          <!-- TOP START -->
          <div id="miniCartTop">
            <!--<h4><xsl:value-of select="umbraco.library:GetDictionaryItem('mcfYourCart')"/></h4>-->
            
            <!-- CART INFO START -->
          <div id="miniCartItemInfo">
            <!-- CART IS EMPTY START -->
            <div id="miniCartIsEmpty"><xsl:value-of select="umbraco.library:GetDictionaryItem('mcfYourCartIsEmpty')"/></div>
            <!-- CART IS EMPTY END -->
            <div id="miniCartNotEmpty">
              <!-- EMPTY CART START -->
              <div id="miniCartRemoveAllOrderlines">
                <form action="/tcbase/teacommerce/SubmitForm.aspx" method="post">
                  <input name="RemoveAllOrderLines" type="hidden" value="" />
                  <input type="submit" value="" id="emptyCart" title="{umbraco.library:GetDictionaryItem('mcfEmptyCart')}" />
                </form>
              </div>
              <!-- EMPTY CART END -->
              <xsl:value-of select="umbraco.library:GetDictionaryItem('mcfYouHave')"/><xsl:text</xsl:text>
              <href="{$cartPageUrl}">
              <span id="miniCartTotalQuantity">
                <xsl:value-of select="$order/@totalQuantity" />
              </span><xsl:text</xsl:text>
              <span id="miniCartSingleItem">
                <xsl:value-of select="umbraco.library:GetDictionaryItem('mcfItem')"/>
              </span>
              <span id="miniCartMultipleItem">
                <xsl:value-of select="umbraco.library:GetDictionaryItem('mcfItems')"/>
              </span><xsl:text</xsl:text>
              </a>
              <xsl:value-of select="umbraco.library:GetDictionaryItem('mcfInYourCart')"/>
            </div>
            <div class="updating"><xsl:value-of select="umbraco.library:GetDictionaryItem('mcfUpdating')"/></div>
          </div>
          <!-- CART INFO END -->
          
            <xsl:if test="count($currencies) &gt; 1">
      
              <!-- CURRENCY START -->
              <div id="miniCartCurrency">
                <form action="/tcbase/teacommerce/SubmitForm.aspx" method="post">
                  <input name="SetCurrentCurrency" type="hidden" value="currency" />
                  <span><xsl:value-of select="umbraco.library:GetDictionaryItem('mcfCurrency')"/></span>
                  <select id="currency" name="currency">
                    <xsl:for-each select="$currencies">
                      <option value="{@id}">
                        <xsl:if test="$currentCurrency/@id = @id">
                          <xsl:attribute name="selected">true</xsl:attribute>
                        </xsl:if>
                        <xsl:value-of select="@ISOCode" />
                      </option>
                    </xsl:for-each>
                    </select>
                  <input type="submit" value="Change" id="changeCurrency" />
                </form>
              </div>
              <!-- CURRENCY END -->
            
            </xsl:if>
          </div>
          <!-- TOP END -->
          

          <!-- BOTTOM START -->
          <div id="miniCartBottom">
            <div id="miniCartTotalPriceWrap">
              <xsl:value-of select="umbraco.library:GetDictionaryItem('mcfTotalPrice')"/><xsl:text</xsl:text>
              <span id="miniCartTotalPrice">
                <!--<xsl:value-of select="$order/@totalPriceWithoutFeesFormatted" />-->
                <xsl:value-of select="format-number($order/@totalPriceWithoutFees, '###,###.00')" />
              </span>
            </div>
            <href="{$cartPageUrl}" id="miniCartViewCart"><xsl:value-of select="umbraco.library:GetDictionaryItem('mcfViewCart')"/></a>
            <div class="updating"><xsl:value-of select="umbraco.library:GetDictionaryItem('mcfUpdating')"/></div>
          </div>
          <!-- BOTTOM END -->
          
        </div>
        
        <!-- HTML END -->
      </xsl:template>

    </xsl:stylesheet>

    Bjarne

  • Jon Boyer 37 posts 59 karma points
    Nov 20, 2011 @ 23:35
    Jon Boyer
    0

    In IE, if your xml returns a an empty element, it doesn't close it.

     

    For instance

     

    <ul><ul><div>text</div>

    Would be read as

    <ul><div>text</div>

     

    The easiest way to fix it is to change <xsl:outputmethod="xml"omit-xml-declaration="yes"/>
    to

    <xsl:outputmethod="html"omit-xml-declaration="yes"/>

     



  • Bjarne Fyrstenborg 1281 posts 3992 karma points MVP 8x c-trib
    Nov 20, 2011 @ 23:46
    Bjarne Fyrstenborg
    0

    Hi Jon..

    I had tried that, but it didn't seem to make any difference..

    It still displays the tags wrong in both IE8 and IE9 as before..

    Bjarne

     

  • Jon Boyer 37 posts 59 karma points
    Nov 20, 2011 @ 23:51
    Jon Boyer
    0

    The other thing to try it to change your doctype declaration to an html5 declaration.

     

    If that doesn't fix it either, then I'm compeltely wrong about the source of your problem (which is quite likely).

     

     

  • Bjarne Fyrstenborg 1281 posts 3992 karma points MVP 8x c-trib
    Nov 21, 2011 @ 00:03
    Bjarne Fyrstenborg
    0

    Hmm.. I'll think it should be able to work fine with other doctype declaration..

    On this site http://oldengaard.dk/da/ydelser.aspx I experienced that I need to add an empty space in the quotes in top with e.g. <xsl:text> </xsl:text> to avoid the tags from self-closing.. otherwise the rest of the content was pushed to the right in the vertical placement of the last quotation mark in the top, which was a problem in IE too..

    But it doesn't seem to fix this.. 

  • Chriztian Steinmeier 2798 posts 8788 karma points MVP 8x admin c-trib
    Nov 21, 2011 @ 01:15
    Chriztian Steinmeier
    0

    Hi Bjarne,

    Based on the results from the W3C validator, it looks as if IE doesn't allow the nested forms (that's actually according to spec, but hey... :-)

    What happens if you pull out the inner <form> so it's not nested inside another form?

    Regarding the self-closing elements: Those are definitely a problem for several browsers, and you have to make sure you don't create any of those - the validator will tell you right away, so use that.

    The easiest fix is usually to just include an empty comment:

    <div class="clear"><xsl:comment /></div>

    /Chriztian 

  • Bjarne Fyrstenborg 1281 posts 3992 karma points MVP 8x c-trib
    Nov 21, 2011 @ 01:48
    Bjarne Fyrstenborg
    0

    Hi Chriztian

    I'm not sure I can remove the nested forms as it refers to another file: <form action="/tcbase/teacommerce/SubmitForm.aspx" method="post"

    I think it's weird that IE moves around in the structure, when the cart is inserted, but not when I remove the macro, the header is displated just fine..

    Bjarne

  • Anders Burla 2560 posts 8256 karma points
    Nov 21, 2011 @ 14:05
    Anders Burla
    1

    Hi Bjarne

    One of the first things I see is that you have two form elements in your page - that is not allowed - the Tea Commerce starter kit is meant to work for people that also dont use java script so this is the right way to do it for a webshop. The first form is for asp.net to work with post back and all that. But if you want to support people with no java script and also use Tea Commerce - you cant have nested form elements.

    And if that dosent help - you know the mark up error is in the mini cart. So start stripping it for your html and start apply again in small pieces until it fails - then you know where your problem is and you can solve it.

    Kind regards
    Anders

  • Bjarne Fyrstenborg 1281 posts 3992 karma points MVP 8x c-trib
    Nov 21, 2011 @ 15:10
    Bjarne Fyrstenborg
    0

    Hi Anders

    So the starterkit doesn't have a form runat="server" around the content just within the body tags?
    That is what I have and what also is default when you create a asp.net website in Visual Web Developer.. but yes I have experienced problems before if you then place form tag inside that..

    is the form runat="server" only placed where needed or?

    It is probably also that which cause many of the errors I get on http://validator.w3.org/

    I also noticed that you had written pageHeading in the xslt with H instead of a smal h .. two places in the xslt.. 

    Bjarne

  • Anders Burla 2560 posts 8256 karma points
    Nov 21, 2011 @ 15:23
    Anders Burla
    0

    No it doesnt - its not asp.net postback based and would also work as a normal html page - just using Umbraco as the cms for content. The outer form that has runat server is the asp.net way of working ti forms - where the good old way to do it is by having forms where needed and not just 1 big form.

  • Bjarne Fyrstenborg 1281 posts 3992 karma points MVP 8x c-trib
    Nov 21, 2011 @ 17:07
    Bjarne Fyrstenborg
    0

    I removed the form runat="server" from my code and it seems to fix the problem in IE8 adn IE9..
    so I guess it was because I had it use form tags in the top cart, which was inside the form runat="server" tag..

    if I need to use .NET controls anywhere on the site, I'll just wrap a form runat="server" around it there instead..

    Bjarne 

  • Bjarne Fyrstenborg 1281 posts 3992 karma points MVP 8x c-trib
    Nov 22, 2011 @ 21:55
    Bjarne Fyrstenborg
    0

    How would you solve this problem, when having a loginview on the bottom right of the page..http://sub.ak-security.dk/da/forside.aspx which is required to have an form runat="server" tag..

    but then on the login page: http://sub.ak-security.dk/da/forside.aspx?alttemplate=login I wil get a problem of two form runat="server" tags on same page, which is not allowed..

    and I can't wrap the whole page inside a form runat="server" tag as I then get the problem as above..

    Any suggestions on how to fix this?

    Bjarne

  • Anders Burla 2560 posts 8256 karma points
    Nov 23, 2011 @ 13:18
    Anders Burla
    0

    Hi Bjarne

    You could add a /base method (RestExtension) to your solution that was called Login and use normal HTML post or make an ajax call to login people. That way you wont need the runat="server" for your forms- This means you will have to code a little more than normal with asp.net but it gives the customer the possibility of having javascript disabled and everything will still work with the shop.

    Here is a link to the very basics of HTML post as many asp.net developers dont know about it as they are used to the form runat server and dont need this. But its actually the old way to do it :)
    http://www.htmlcodetutorial.com/forms/_FORM_METHOD_POST.html

    Kind regards
    Anders

  • Bjarne Fyrstenborg 1281 posts 3992 karma points MVP 8x c-trib
    Nov 23, 2011 @ 17:15
    Bjarne Fyrstenborg
    0

    Hi Anders

    Okay, I'll try to take a look at this..
    I know that .NET controls are generating some html code.. e.g. a literal plain text, a label text inside a span tag etc.. and the asp:login is also generating some code where there's added some javascript to the submit button... and is required to be inside a form runat="server" ...

    I haven't tried with /base method yet, but I think I have read something about that it's possible to do some of the same stuff with Razor? e.g. a login in razor..

    I haven't either worked much with the old way to do it, but I knew you could create a form and use the action attribute to link to a php file, asp and other script files..

    Should I avoid using .NET controls or only only one in each template? So I not have one control in a masterpage and others in the templates..

    Bjarne

  • Anders Burla 2560 posts 8256 karma points
    Nov 23, 2011 @ 17:56
    Anders Burla
    0

    It depends - if you want to use Tea Commerce and want it to support people with javascript disabled you should make it the old way with forms without runat server. But if its just a normal umbraco site you could just use form runat=server if you like - so depends on your case

Please Sign in or register to post replies

Write your reply to:

Draft