Cross browser form issue

HTML & CSS
1

Hi everyone. i am not new here :stuck_out_tongue: Lost my login and discoverred the login via facebook button so there you go.

Anyway, i am having a bit of a cross browser issue on a site in development. Basically whenever i add the form tag to the page the site seems to break in IE9. Every other browser behaves as intended.

The affected container is the red one with ā€œE-News & Updates as the titleā€.

Only when I include the form tag does this happen, otherwise the site behaves itself! Any help would be appreciated.

Hayden

2

First itā€™s worth validating the site/page, there are a couple of errors in there.

The other issue is that the entire page is wrapped in a form tag, so adding a form inside a form can give you all sorts of weirdnessā€¦

3

Yes, I was about to say the same thing as you canā€™t have nested forms.

The validator flags it up along with some other errors.

IE9 likely closes the first form tag when its error checking clicks in and sees another form starting and ends up breaking the layout in the process.

4

Yeah that will be the daft CMS i have to use at work.I have noticed that form tag and unfortunately nothing i can do about it as it it part of the cms and its functionality. I can bet if I dropped the site into WordPress these issues wouldnā€™t occur :slight_smile: I am not too worried wether or not it validates at this point as i tend to go through that after if need be.

I will certainly look intro that, maybe its an update of the cms that seems to be messed up as i havenā€™t come across this problem before. DNN websites leave a huge footprint and usually donā€™t do a great job at validating!

5

Mr. Tomas, The validation errors that you SHOULD be concerned about are the mismatched divs and the like. That will break an otherwise well designed web page in a heartbeat. It is foolish to take them for granted and ASSume that all devices will be able to figure out where the close tags are supposed to be.

6

I have just checked a few other dotnetnuke based websites and it seems it is part of the cms fucntion :frowning:

7

I never assume that and always cross browser check

8

Thatā€™s a major flaw in the CMS if it forces pages to be wrapped in a form tag, apart from it being daft Iā€™d hate to guess what confusion it causes people who use screenreaders and other assistive technology.

Can you see why the tag needs to be there, maybe you could remove it altogether?

9

I wish I could! Unfortunately this CMS is main one used by the agency I work for. Personally i would pick anything but DNN. It has so many flaws and it heavy on code. Take a look at any DNN based website and you will find the same code and a huge footprint it leaves.

I usually dont bother validating my DNN based websites and go for a simple cross browser check because by the time the client gets hold of it all the work you put in validating it will be pointlessā€¦think word and copy and paste :slight_smile:

Wordpress and Umbraco I find to be clean and easy to manage in terms of validationā€¦but of course then you have pluginsā€¦Its a big old game of cat and mouse we playā€¦

I will certainly bring it up in the DNN forum because it is certainly something that needs addressing.

10

Wow, that certainly is bizarrre. Even the DNN site has almost the entire body content wrapped inside a form. I have no doubt that they

11

Mr. Tomas, I apologize for my rudeness. My ignorance is showing. I have a very hard time remembering that CMSs can be so flawed and that the coder has no control over their output.

2 Likes
12

Canā€™t you just remove the nested form tags and handle that submission through the main form or with click handlers of some sort.

 <div class="span12">
      <form>
      <input type="email" placeholder="Email address">
      <input type="submit" value="Get It Now">
      </form></div>

If you remove those form tags above I believe IE9 may work because then it wonā€™t close the form prematurely.

13

So youā€™re sayong IE does something like
hereā€™s a <tag>
hereā€™s another <tag> they must have forgot the </tag> so Iā€™ll be nice and add one in before this other <tag> ?

Itā€™s hard enough coding for things you know browsers do let alone trying to code for things they might do !

14

Yes, it does something similar to that I believe.

If you look at the developer tools In IE9 at the generated html for this page it moves the actual closing form tag from the bottom of the page to a position mid-way up the page and at the same time removes the nested form tag.

Hereā€™s what the snippet I posted before now looks like:

																<div class="row">
																		<div class="span12">
																				<input type="text" placeholder="Email address">
																				<input type="submit" value="Get It Now">
																		</div>
																</div>
														</div>
												</div>
										</div>
								</div>
						</div>
				</div>
		</div>
</form>
<div class="container main">

Thatā€™s why valid pages are essential :smile:

15

This is very interesting :slight_smile: As I said, I would much rather work with wordpress. This isnā€™t the first time I have had trouble with forms in DNN likely because of this issue. I have tried with feedburner forms that simply wont run, aweber and getresponse too.

I certainly wont be offering DNN this to my own clients in the future. May look at Joomla or Drupal as a replacement if they are as clean as wordpress.

16

No problem :smile: If I had a choice I wouldnā€™t choose DNN, but I am stuck with it for the project. I soon learned after starting with the agency that validating pages in DNN was pointless and the key was just to get them to work via good old fashioned cross browser testing.

17

Paul

I believe you may have hot the nail on the head thereā€¦

I am going to try this when I get back into work on Monday and let you know how I get on!

18

Alternately you could try pulling your forms in via an iframe, Itā€™s the work-around we usually use to allow forms onto our DNN pages.

19

That is exactly what I have been doing until now.

I have however found a solution since then! Although I have only managed to get it working for mailchimp so far, which is fine as there are plenty of contact form solutions, I only needed an autoresponder solution.

The solution is below to my complete sign up form. I know that there are not very many here using DNN but you never know when you may find it handy!

MailChimp Form.txt (721 Bytes)

20

Why Iā€™ve always hated (the old-style) ASP pages. Runat=server form BS, used to break every single Opera, every single time.

Glad to see at least IE9ā€™s on the ball here. Iā€™m cheering you, IE9! CHEERING.

ASP updates donā€™t use the form method anymore. I forget what itā€™s calledā€¦ razor? Some weird Microsoft thing, but itā€™s much much much cleaner than this old stuff, and does not need to wrap every HTML page in a form.