Why does FIrefox DOM reorder outside of and add new DOM element? Chrome does not exhibit this behaviourCreating a new DOM element from an HTML string using built-in DOM methods or PrototypeHow to add a class to DOM element in JavaScript?Does Firefox support position: relative on table elements?Why does jQuery or a DOM method such as getElementById not find the element?Why does CSS work with fake elements?Cannot display HTML stringCan a label be placed separately from the form element it controls?HTML label with different behaviour on SafariIn Google Chrome, NVDA (Accessibility Screen Reader) Does Not Read Text in Bootstrap Modal DialogWhy does Chrome squish my text when I flex a parent container?
What should we do with manuals from the 80s?
Why does Japan use the same type of AC power outlet as the US?
How would you translate this? バタコチーズライス
How can I communicate my issues with a potential date's pushy behavior?
How to not forget things?
Are there examples in Tanach of 3 or more parties having an ongoing conversation?
How can God warn people of the upcoming rapture without disrupting society?
What would it take to get a message to another star?
graphs in latex
Why aren't rockets built with truss structures inside their fuel & oxidizer tanks to increase structural strength?
What unique challenges/limitations will I face if I start a career as a pilot at 45 years old?
What are the odds of rolling specific ability score totals in D&D?
Why does the cable resistance jump from a low value to high value at a particular frequency?
Cases with long math equation
How do some PhD students get 10+ papers? Is that what I need for landing good faculty position?
Chunk + Enumerate a list of digits
How was the murder committed?
Does fossil fuels use since 1990 account for half of all the fossil fuels used in history?
What should I do if actually I found a serious flaw in someone's PhD thesis and an article derived from that PhD thesis?
Boss wants me to ignore a software API license
How does the Athlete Feat affect the Ravnica Centaur playable race?
What is the hottest thing in the universe?
Does an Irish VISA WARNING count as "refused entry at the border of any country other than the UK?"
Why is there a large performance impact when looping over an array with 240 or more elements?
Why does FIrefox DOM reorder outside of
and add new DOM element? Chrome does not exhibit this behaviour
Creating a new DOM element from an HTML string using built-in DOM methods or PrototypeHow to add a class to DOM element in JavaScript?Does Firefox support position: relative on table elements?Why does jQuery or a DOM method such as getElementById not find the element?Why does CSS work with fake elements?Cannot display HTML stringCan a label be placed separately from the form element it controls?HTML label with different behaviour on SafariIn Google Chrome, NVDA (Accessibility Screen Reader) Does Not Read Text in Bootstrap Modal DialogWhy does Chrome squish my text when I flex a parent container?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
Firefox DOM re-arranges the first <dialog> to outside and below the </p> and adds an empty <p></p> below it. This is not happening in Chrome/Vivaldi.
Is this normal behaviour?
<!DOCTYPE html>
<html>
<head>
<style>
.note-toggle:checked ~ .note-content display: block;
</style>
</head>
<body>
<p>
Here's a paragraph
<span><label for="note" class="noteLabel"><sup>Note</sup></label>
<input type="checkbox" id="note" class="note-toggle" style="display: none;">
<dialog class="note-content">
This is moved outside of the <p></p> in Firefox DOM and an extra <p></p> added below in DOM. Works fine in Chrome.
</dialog>
</span>
</p>
<div>
Here is another paragraph
<span><label for="note2" class="noteLabel"><sup>Note</sup></label>
<input type="checkbox" id="note2" class="note-toggle" style="display: none;">
<dialog class="note-content">
Works fine if <div> or <span> or nothing is used. Also works fine in Chrome.
</dialog>
</span>
</div>
</body>
</html>
Firefox DOM Result
html css html5 firefox dom
add a comment |
Firefox DOM re-arranges the first <dialog> to outside and below the </p> and adds an empty <p></p> below it. This is not happening in Chrome/Vivaldi.
Is this normal behaviour?
<!DOCTYPE html>
<html>
<head>
<style>
.note-toggle:checked ~ .note-content display: block;
</style>
</head>
<body>
<p>
Here's a paragraph
<span><label for="note" class="noteLabel"><sup>Note</sup></label>
<input type="checkbox" id="note" class="note-toggle" style="display: none;">
<dialog class="note-content">
This is moved outside of the <p></p> in Firefox DOM and an extra <p></p> added below in DOM. Works fine in Chrome.
</dialog>
</span>
</p>
<div>
Here is another paragraph
<span><label for="note2" class="noteLabel"><sup>Note</sup></label>
<input type="checkbox" id="note2" class="note-toggle" style="display: none;">
<dialog class="note-content">
Works fine if <div> or <span> or nothing is used. Also works fine in Chrome.
</dialog>
</span>
</div>
</body>
</html>
Firefox DOM Result
html css html5 firefox dom
This HTML is invalid and browsers will only do the best they can guessing your intention. Fix your HTML.
– Rob
Mar 27 at 11:26
https://caniuse.com/#search=dialog
– Sfili_81
Mar 27 at 11:29
@Sfili_81 Great resource, thank you.
– HTMLFiver
Mar 27 at 13:26
add a comment |
Firefox DOM re-arranges the first <dialog> to outside and below the </p> and adds an empty <p></p> below it. This is not happening in Chrome/Vivaldi.
Is this normal behaviour?
<!DOCTYPE html>
<html>
<head>
<style>
.note-toggle:checked ~ .note-content display: block;
</style>
</head>
<body>
<p>
Here's a paragraph
<span><label for="note" class="noteLabel"><sup>Note</sup></label>
<input type="checkbox" id="note" class="note-toggle" style="display: none;">
<dialog class="note-content">
This is moved outside of the <p></p> in Firefox DOM and an extra <p></p> added below in DOM. Works fine in Chrome.
</dialog>
</span>
</p>
<div>
Here is another paragraph
<span><label for="note2" class="noteLabel"><sup>Note</sup></label>
<input type="checkbox" id="note2" class="note-toggle" style="display: none;">
<dialog class="note-content">
Works fine if <div> or <span> or nothing is used. Also works fine in Chrome.
</dialog>
</span>
</div>
</body>
</html>
Firefox DOM Result
html css html5 firefox dom
Firefox DOM re-arranges the first <dialog> to outside and below the </p> and adds an empty <p></p> below it. This is not happening in Chrome/Vivaldi.
Is this normal behaviour?
<!DOCTYPE html>
<html>
<head>
<style>
.note-toggle:checked ~ .note-content display: block;
</style>
</head>
<body>
<p>
Here's a paragraph
<span><label for="note" class="noteLabel"><sup>Note</sup></label>
<input type="checkbox" id="note" class="note-toggle" style="display: none;">
<dialog class="note-content">
This is moved outside of the <p></p> in Firefox DOM and an extra <p></p> added below in DOM. Works fine in Chrome.
</dialog>
</span>
</p>
<div>
Here is another paragraph
<span><label for="note2" class="noteLabel"><sup>Note</sup></label>
<input type="checkbox" id="note2" class="note-toggle" style="display: none;">
<dialog class="note-content">
Works fine if <div> or <span> or nothing is used. Also works fine in Chrome.
</dialog>
</span>
</div>
</body>
</html>
Firefox DOM Result
html css html5 firefox dom
html css html5 firefox dom
edited Mar 27 at 13:37
Ed Cottrell♦
38.7k12 gold badges60 silver badges84 bronze badges
38.7k12 gold badges60 silver badges84 bronze badges
asked Mar 27 at 11:23
HTMLFiverHTMLFiver
13 bronze badges
13 bronze badges
This HTML is invalid and browsers will only do the best they can guessing your intention. Fix your HTML.
– Rob
Mar 27 at 11:26
https://caniuse.com/#search=dialog
– Sfili_81
Mar 27 at 11:29
@Sfili_81 Great resource, thank you.
– HTMLFiver
Mar 27 at 13:26
add a comment |
This HTML is invalid and browsers will only do the best they can guessing your intention. Fix your HTML.
– Rob
Mar 27 at 11:26
https://caniuse.com/#search=dialog
– Sfili_81
Mar 27 at 11:29
@Sfili_81 Great resource, thank you.
– HTMLFiver
Mar 27 at 13:26
This HTML is invalid and browsers will only do the best they can guessing your intention. Fix your HTML.
– Rob
Mar 27 at 11:26
This HTML is invalid and browsers will only do the best they can guessing your intention. Fix your HTML.
– Rob
Mar 27 at 11:26
https://caniuse.com/#search=dialog
– Sfili_81
Mar 27 at 11:29
https://caniuse.com/#search=dialog
– Sfili_81
Mar 27 at 11:29
@Sfili_81 Great resource, thank you.
– HTMLFiver
Mar 27 at 13:26
@Sfili_81 Great resource, thank you.
– HTMLFiver
Mar 27 at 13:26
add a comment |
2 Answers
2
active
oldest
votes
Besides the fact that the 'dialog' functionality is not supported yet in many browsers ( except Chrome and some other Chromium based browsers), your HTML is not valid because as MDN states :
Permitted parents Any element that accepts flow content
Dialog MDN Docs
your dialog is nested inside a <span>
element which is both flow and phrasing content element -> list of flow content elements but only accepts Phrasing content. ( Also p
only accepts pharsing content ). So dialog
being a flow content, and span
only accepting pharsing content generates an invalid HTML structure.
Chrome and other Chromium based browsers are known to be more ' forgiving ' than Firefox and others. I suggest you change your HTML structure to be compliant with the official Docs. You can validate your HTML structure online. For starters a little indentation would be nice :)
In conclusion, the behavior in FF is the 'normal' one.
Your HTML structure should look like
<p>
Here's a paragraph
<span>
<label for="note" class="noteLabel">
<sup>Note</sup>
</label>
<input type="checkbox" id="note" class="note-toggle" style="">
</span>
</p>
<dialog class="note-content">
This is moved outside of the p in Firefox DOM and an extra p added below in DOM. Works fine in Chrome.
</dialog>
<span> is listed under the flow content elements in the link you provide...
– HTMLFiver
Mar 27 at 12:01
@HTMLFiver Sorry my bad. I omitted to say that<span>
is both flow and pharsing content. But accepts only pharsed content
– Mihai T
Mar 27 at 13:02
Thank you. Great info+
– HTMLFiver
Mar 27 at 13:21
add a comment |
<p>
or <span>
tags can only contain phrasing content but a dialog is flow content. This leads to an implied end of paragraph tag before the dialog. The behavior of the browser in this situation isn't spec defined as your HTML is invalid: they can only do their best to try fix your markup.
Great graphic, thank you.
– HTMLFiver
Mar 27 at 13:21
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55376016%2fwhy-does-firefox-dom-reorder-dialog-outside-of-p-and-add-new-dom-element-ch%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Besides the fact that the 'dialog' functionality is not supported yet in many browsers ( except Chrome and some other Chromium based browsers), your HTML is not valid because as MDN states :
Permitted parents Any element that accepts flow content
Dialog MDN Docs
your dialog is nested inside a <span>
element which is both flow and phrasing content element -> list of flow content elements but only accepts Phrasing content. ( Also p
only accepts pharsing content ). So dialog
being a flow content, and span
only accepting pharsing content generates an invalid HTML structure.
Chrome and other Chromium based browsers are known to be more ' forgiving ' than Firefox and others. I suggest you change your HTML structure to be compliant with the official Docs. You can validate your HTML structure online. For starters a little indentation would be nice :)
In conclusion, the behavior in FF is the 'normal' one.
Your HTML structure should look like
<p>
Here's a paragraph
<span>
<label for="note" class="noteLabel">
<sup>Note</sup>
</label>
<input type="checkbox" id="note" class="note-toggle" style="">
</span>
</p>
<dialog class="note-content">
This is moved outside of the p in Firefox DOM and an extra p added below in DOM. Works fine in Chrome.
</dialog>
<span> is listed under the flow content elements in the link you provide...
– HTMLFiver
Mar 27 at 12:01
@HTMLFiver Sorry my bad. I omitted to say that<span>
is both flow and pharsing content. But accepts only pharsed content
– Mihai T
Mar 27 at 13:02
Thank you. Great info+
– HTMLFiver
Mar 27 at 13:21
add a comment |
Besides the fact that the 'dialog' functionality is not supported yet in many browsers ( except Chrome and some other Chromium based browsers), your HTML is not valid because as MDN states :
Permitted parents Any element that accepts flow content
Dialog MDN Docs
your dialog is nested inside a <span>
element which is both flow and phrasing content element -> list of flow content elements but only accepts Phrasing content. ( Also p
only accepts pharsing content ). So dialog
being a flow content, and span
only accepting pharsing content generates an invalid HTML structure.
Chrome and other Chromium based browsers are known to be more ' forgiving ' than Firefox and others. I suggest you change your HTML structure to be compliant with the official Docs. You can validate your HTML structure online. For starters a little indentation would be nice :)
In conclusion, the behavior in FF is the 'normal' one.
Your HTML structure should look like
<p>
Here's a paragraph
<span>
<label for="note" class="noteLabel">
<sup>Note</sup>
</label>
<input type="checkbox" id="note" class="note-toggle" style="">
</span>
</p>
<dialog class="note-content">
This is moved outside of the p in Firefox DOM and an extra p added below in DOM. Works fine in Chrome.
</dialog>
<span> is listed under the flow content elements in the link you provide...
– HTMLFiver
Mar 27 at 12:01
@HTMLFiver Sorry my bad. I omitted to say that<span>
is both flow and pharsing content. But accepts only pharsed content
– Mihai T
Mar 27 at 13:02
Thank you. Great info+
– HTMLFiver
Mar 27 at 13:21
add a comment |
Besides the fact that the 'dialog' functionality is not supported yet in many browsers ( except Chrome and some other Chromium based browsers), your HTML is not valid because as MDN states :
Permitted parents Any element that accepts flow content
Dialog MDN Docs
your dialog is nested inside a <span>
element which is both flow and phrasing content element -> list of flow content elements but only accepts Phrasing content. ( Also p
only accepts pharsing content ). So dialog
being a flow content, and span
only accepting pharsing content generates an invalid HTML structure.
Chrome and other Chromium based browsers are known to be more ' forgiving ' than Firefox and others. I suggest you change your HTML structure to be compliant with the official Docs. You can validate your HTML structure online. For starters a little indentation would be nice :)
In conclusion, the behavior in FF is the 'normal' one.
Your HTML structure should look like
<p>
Here's a paragraph
<span>
<label for="note" class="noteLabel">
<sup>Note</sup>
</label>
<input type="checkbox" id="note" class="note-toggle" style="">
</span>
</p>
<dialog class="note-content">
This is moved outside of the p in Firefox DOM and an extra p added below in DOM. Works fine in Chrome.
</dialog>
Besides the fact that the 'dialog' functionality is not supported yet in many browsers ( except Chrome and some other Chromium based browsers), your HTML is not valid because as MDN states :
Permitted parents Any element that accepts flow content
Dialog MDN Docs
your dialog is nested inside a <span>
element which is both flow and phrasing content element -> list of flow content elements but only accepts Phrasing content. ( Also p
only accepts pharsing content ). So dialog
being a flow content, and span
only accepting pharsing content generates an invalid HTML structure.
Chrome and other Chromium based browsers are known to be more ' forgiving ' than Firefox and others. I suggest you change your HTML structure to be compliant with the official Docs. You can validate your HTML structure online. For starters a little indentation would be nice :)
In conclusion, the behavior in FF is the 'normal' one.
Your HTML structure should look like
<p>
Here's a paragraph
<span>
<label for="note" class="noteLabel">
<sup>Note</sup>
</label>
<input type="checkbox" id="note" class="note-toggle" style="">
</span>
</p>
<dialog class="note-content">
This is moved outside of the p in Firefox DOM and an extra p added below in DOM. Works fine in Chrome.
</dialog>
edited Mar 27 at 13:18
answered Mar 27 at 11:36
Mihai TMihai T
12.2k1 gold badge10 silver badges24 bronze badges
12.2k1 gold badge10 silver badges24 bronze badges
<span> is listed under the flow content elements in the link you provide...
– HTMLFiver
Mar 27 at 12:01
@HTMLFiver Sorry my bad. I omitted to say that<span>
is both flow and pharsing content. But accepts only pharsed content
– Mihai T
Mar 27 at 13:02
Thank you. Great info+
– HTMLFiver
Mar 27 at 13:21
add a comment |
<span> is listed under the flow content elements in the link you provide...
– HTMLFiver
Mar 27 at 12:01
@HTMLFiver Sorry my bad. I omitted to say that<span>
is both flow and pharsing content. But accepts only pharsed content
– Mihai T
Mar 27 at 13:02
Thank you. Great info+
– HTMLFiver
Mar 27 at 13:21
<span> is listed under the flow content elements in the link you provide...
– HTMLFiver
Mar 27 at 12:01
<span> is listed under the flow content elements in the link you provide...
– HTMLFiver
Mar 27 at 12:01
@HTMLFiver Sorry my bad. I omitted to say that
<span>
is both flow and pharsing content. But accepts only pharsed content– Mihai T
Mar 27 at 13:02
@HTMLFiver Sorry my bad. I omitted to say that
<span>
is both flow and pharsing content. But accepts only pharsed content– Mihai T
Mar 27 at 13:02
Thank you. Great info+
– HTMLFiver
Mar 27 at 13:21
Thank you. Great info+
– HTMLFiver
Mar 27 at 13:21
add a comment |
<p>
or <span>
tags can only contain phrasing content but a dialog is flow content. This leads to an implied end of paragraph tag before the dialog. The behavior of the browser in this situation isn't spec defined as your HTML is invalid: they can only do their best to try fix your markup.
Great graphic, thank you.
– HTMLFiver
Mar 27 at 13:21
add a comment |
<p>
or <span>
tags can only contain phrasing content but a dialog is flow content. This leads to an implied end of paragraph tag before the dialog. The behavior of the browser in this situation isn't spec defined as your HTML is invalid: they can only do their best to try fix your markup.
Great graphic, thank you.
– HTMLFiver
Mar 27 at 13:21
add a comment |
<p>
or <span>
tags can only contain phrasing content but a dialog is flow content. This leads to an implied end of paragraph tag before the dialog. The behavior of the browser in this situation isn't spec defined as your HTML is invalid: they can only do their best to try fix your markup.
<p>
or <span>
tags can only contain phrasing content but a dialog is flow content. This leads to an implied end of paragraph tag before the dialog. The behavior of the browser in this situation isn't spec defined as your HTML is invalid: they can only do their best to try fix your markup.
answered Mar 27 at 11:35
James CoyleJames Coyle
6,2641 gold badge23 silver badges39 bronze badges
6,2641 gold badge23 silver badges39 bronze badges
Great graphic, thank you.
– HTMLFiver
Mar 27 at 13:21
add a comment |
Great graphic, thank you.
– HTMLFiver
Mar 27 at 13:21
Great graphic, thank you.
– HTMLFiver
Mar 27 at 13:21
Great graphic, thank you.
– HTMLFiver
Mar 27 at 13:21
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55376016%2fwhy-does-firefox-dom-reorder-dialog-outside-of-p-and-add-new-dom-element-ch%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
This HTML is invalid and browsers will only do the best they can guessing your intention. Fix your HTML.
– Rob
Mar 27 at 11:26
https://caniuse.com/#search=dialog
– Sfili_81
Mar 27 at 11:29
@Sfili_81 Great resource, thank you.
– HTMLFiver
Mar 27 at 13:26