on this page in IE 8, there is the famous phantom element bug. I have researched for two days all possible things I can find that might cause this, including hidden inputs (present) floated elements (not present) and HTML comments <!--...--> (present).
The "phantom element" is the grey div between the login div and the "ny kunde" button.
When trying to view this is the IE dev tools (F12) it cannot be selected, nor viewed. I believe it is because of a rendering issue in IE8.
Removing these did not help at all. Plus we apparently need the hidden input for form validation.
It's worth mentioning that this eCommerce solution doesn't validate out of the box.
I have exhausted every solution I can think of, and it is still present.
Does anyone have any suggestions?
Thanks :)
Starting at line 348, there is this code:
<input type="hidden" name="return" value="/checkout/selectAddress" />
</form>
</div>
If I change it to this:
<input type="hidden" name="return" value="/checkout/selectAddress" />
</div>
</form>
Then the problem is solved.
Simplifying (removing stuff from) your HTML:
<div id="user-wrapper">
<form action="/user/doLogin" method="post" id="loginForm" />
<div id="user-kundelogginn">
</form>
</div>
</div>
You can clearly see the form tag is being closed inside the div.
How did I figure this out?
I used the W3C Validator, which got me on the right track with this:
Line 350, Column 7: end tag for
element "form" which is not open
Related
I have a website with an anchor tag at the bottom I want to jump to from the top. But I want to put the jump link inside a form element.
<form name=sortby onClick='submit()' method='get'>
<div>
<input type=radio name=sortby value=name onClick='submit()'>
Sort By Name
</div>
<div>
<a href='#bottom'>There are 587 entries on this page</a>
</div>
<div>
<input type=radio name=sortby value=date onClick='submit()'>
Sort By Date
</div>
<input type=hidden name=artist value=''>
</form>
<a id='bottom' href='#top'>Back to the top</a>
I have done a test where I place the anchor link outside the form code and it works. Is there some no-no about putting it within the element?
What I'm experiencing is that the page jumps to the bottom and immediately back to the top using each of Chrome, Firefox, Internet Explorer browsers in windows 7. Note that in Firefox, there is a delay before it jumps to the top as if the browser is processing something.
The link itself won't do anything to affect the form functionality, if that's the question. This is more or less a case of semantics. It's not a great practice but it's also not going to break anything.
I found my problem... The top line should be changed to this:
<form method='get'>
Getting rid of the onClick='submit()' was the key. Basically clicking anywhere in the form element submitted the form. It never let me actually click the link which was "behind/under" the form element.
An image can best show the problem:
Of course I dont want my textarea to have a bunch of html tags as a default value, thats why I set the defaultvalue to 'Hi', which it aparently isnt showing right now, but which it should.
I already tried a few things to find/solve the problem. What I found out is that if I remove the other form on the page (a login form not visible on the image) this form works and properly shows 'Hi' as a value. So the problem seems to be that there are multiple forms on this page. Problem has only shown with the use of text-area's, input fields, on this page or any other, work fine. I also tried moving the textarea outside of the form tags, that does remove the html tags, but the 'hi' still isnt visible (plus I want the textarea inside my form, as it should be part of it).
Edit, after a few struggles finally managed to post the code as code instead of a document. Code for the first, properly working, form:
<div id="userbox">
<form id="form1" action="auth/login" method="post">
<div id="username-container">
<input class="transparent-input" name="username" type="text" value="Gebruikersnaam">
</div>
<div id="password-container">
<input class="transparent-input" name="password" type="password" value="Wachtwoord">
</div>
<div id="lostpass-container">
wachtwoord<br />vergeten?
</div>
<div id="login-container">
<input class="transparent-input" type="submit" value="Aanmelden">
</div>
</form>
</div>
Code for the second, faulty, form:
<div id="content">
<h3>Contact</h3>
<form id="form2">
<input type="text" value="Pietje Puk" /><br />
<input type="email" value="mijn#email.nl" /><br />
<textarea rows="10" cols="50">Hi</textarea>
</form>
</div>
edit: I did do a markup validation, nothing there that solved the problem
It turned out to be a markup problem after all. After trying some more I did find that moving a div closing tag to a different location in the document did solve the problem. Before I had opened a div before both forms and closed it in between them, closing it after both of them instead solved the problem.
Tnx Lars Beck for pointing me in the right direction :)
I have 3 radio button inputs in three separate divs:
<div class="box1">
<input type="radio" name="paymentOption" checked="checked" value="creditcard_on_file" />
<!-- related subfields for that chosen option -->
</div>
<div class="box2">
<input type="radio" name="paymentOption" value="newCard" />
<!-- related subfields for that chosen option -->
</div>
<div class="box3">
<input type="radio" name="paymentOption" value="check" />
<!-- related subfields for that chosen option -->
</div>
on page load, the first one is default selected. and in IE9, when another is clicked, the first one stays selected! whoa.
what can I do to make it behave properly?
it works fine for me.. but if its a compatibility issue. try using JavaScript to clear out the other items.
try this:
How to reset radiobuttons in jQuery so that none is checked
There was a typo in some other html surrounding the given markup. I've learned that IE seems to handle the situations of invalid markup a bit differently that other browsers in that it either duplicates a section, or will hide a section. Since in this case neither of those issues occurred, the markup within incorrect html has misbehaved.
We had the same problem on IE 9.0.8112 64-bit ONLY but for different reasons. We had forgotten to assign a name to associate the inputs together. The funny thing is that this worked on every other browser, because we were using AngularJS's ng-checked to set the radio button state (even the non-64 bit version of IE 9).
I have a hidden input field in my form. I noticed that if that field's value is changed by javascript, and then the user refreshes the page, that same value will be set when the page reloads. From what I've seen, this only happens in Firefox.
I've solved this unwanted behaviour by adding autocomplete="off" to that hidden input, but W3C doesn't like this solution, and if i validate the page I get the error:
Attribute autocomplete not allowed on element input at this point.
Apparently, the autocomplete attribute works only on specific inputs - see here.
So is there any solution that will satisfy both W3C and Firefox?
To validate (which I wouldn't put as much effort into as you are) I think you could use autocomplete="off" on the entire form, then turn it back on selectively, like this:
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
</head>
<body>
<form autocomplete="off">
<input type="hidden" name="test">
<input type="text" name="otherfield" autocomplete="on">
</form>
</body>
</html>
I initially thought this was a Firefox bug but after discussion with robertc in the comments, I think expected behavior depends on specific use cases. The spec doesn't allow autocompletion on hidden fields so my first reaction still feels right, but Firefox's implementation might have some good arguments to support it. Please comment.
Alternatively, you could use <input type="text" style="display: none;" autocomplete="off" /> instead. It's a bit of a hack, but it should work!
The caching in Firefox is actually quite a good feature a lot of the time, but it does cause some problems when you build more dynamic forms.
The form within the div is supposed to be hidden, but it isn't in FireFox. In Safari it is fine.
<div id="add_task" style="display:none;">
<form id="add_task_form">
<input type="submit">
</form>
</div>
Any ideas?
Chances are your HTML is malformed somewhere else in the page (like not closing a tag) causing the structure of the page to be randomly determined by the browser. Try validating it with the w3c validator.