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>
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..
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:
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..
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.
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?
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.
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..
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..
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
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..
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
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:
Bjarne
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"/>
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
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).
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..
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:
/Chriztian
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
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
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
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.
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
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
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
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
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
is working on a reply...