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.
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.
The below HTML:
<html>
<body>
<label>field a</label>
<input name="foo1" value=""/><br/>
<label>field b</label><input name="foo2" value="" /><br/>
</body>
</html>
… renders the input of field a slightly off to the right due to the whitespace between the label and the first input element. However, looking at the DOM in Chrome I see this:
I.e. there is no representation of the text node in the DOM. Since the browser renders it with the extra space I think what's happenning is that a whitespace is indeed present in the DOM but the DOM viewer for some reason does not display it. If I understand correctly Firefox DevTools do in fact display whitespace text nodes (see this blog post). Is there anything similar for Chrome?
I don't think there is a way to display them in the DOM view.
However, I've noticed they are somewhat detectable in the Accessibility Tree:
We have a web part for SharePoint 2013 which renders a video in Iframe and after Iframe there is a textbox with button to comment on it. It is working fine with IE 10 and IE 11, but in IE8 and IE9, it does not render any html after the Iframe. Also in inspect element it does not show any html for textbox button.
In page source of current page it shows html is there for text box and button.
Html for web part is like :
<iframe width="500" height="250" src="/_layouts/15/videoembedplayer.aspx?extSrc=http://myurl/siteassets/video.mp4" data-duration="0">iframe not supported</iframe>
<br/><br/>
<div>
<fieldset>
<legend></legend>
<input type="text" id="comment" />
<input type="submit" value="Comment" />
</fieldset>
</div>
I have check the css also, no css is hiding it.
Thank You
You HTML is invalid. You missed a quote from one of your attribute values. This is probably causing some browsers to see the end tag for the iframe as part of the start tag and thus everything that follows it as being part of the alternative content for non-iframe supporting browsers.
Use a validator.
the following code works in FF, but it does not work in IE8.
<a class="sub">
<input type="submit" a="" none;<="" display:="">
</a>
The button is displayed, but the button is not clickable in IE8. What is going on?
Here is a correctly formed input submit button:
<input type="submit" value="Submit">
I noticed the words display and none usually you'd find it in the following form:
<input type="submit" value="Submit" style="display:none;"> // this however will hide the button
The attribute of type= with the value of "submit" makes our input tag into a submit button.
The attribute of value= with the value of "Submit" displays "Submit" text on our input button.
The attribute of style= allows us to do some inline css like "display:none;" which hides a html element its declared on.
I recommend checking out W3Schools for more on html input tags.
Additionally you are trying to make the button into a link using the <a> tag, this is invalid, please take a look at this Html forms and input page to see how to use the submit input type.
If you just want a link then I'd recommend looking at an <img> for a button and an <a> tag around that.
I do not have comment privileges on this SE yet but I would say that IE is incapable if interpreting: <input type="submit" a="" none;<="" display:="">
When you open "input" you do not close it until after display. the addition of the "none;<" is probably interpreted as another attempt at a tag and breaking html. I'm not sure what you are trying to accomplish but get rid of this:
none;<=""
The code is a mess, but it actually works in IE8, so any problem you are seeing is caused by something outside the code you posted.
Browsers will ignore the crap inside the input tag and recognize it simply as <input type="submit">. Some browsers might conceivably choke on the “<” character there, but IE8 doesn’t.
The a element wrapper outside it has no effect as such.
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