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;








-2















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 &lt;p>&lt;/p> in Firefox DOM and an extra &lt;p>&lt;/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 &lt;div> or &lt;span> or nothing is used. Also works fine in Chrome.
</dialog>
</span>
</div>

</body>
</html>


Firefox DOM Result










share|improve this question


























  • 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

















-2















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 &lt;p>&lt;/p> in Firefox DOM and an extra &lt;p>&lt;/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 &lt;div> or &lt;span> or nothing is used. Also works fine in Chrome.
</dialog>
</span>
</div>

</body>
</html>


Firefox DOM Result










share|improve this question


























  • 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













-2












-2








-2


1






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 &lt;p>&lt;/p> in Firefox DOM and an extra &lt;p>&lt;/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 &lt;div> or &lt;span> or nothing is used. Also works fine in Chrome.
</dialog>
</span>
</div>

</body>
</html>


Firefox DOM Result










share|improve this question
















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 &lt;p>&lt;/p> in Firefox DOM and an extra &lt;p>&lt;/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 &lt;div> or &lt;span> or nothing is used. Also works fine in Chrome.
</dialog>
</span>
</div>

</body>
</html>


Firefox DOM Result







html css html5 firefox dom






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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

















  • 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












2 Answers
2






active

oldest

votes


















2














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>





share|improve this answer



























  • <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


















-1














<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.



A venn diagram describing the relationship between types of content in HTML






share|improve this answer

























  • Great graphic, thank you.

    – HTMLFiver
    Mar 27 at 13:21













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
);



);













draft saved

draft discarded


















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









2














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>





share|improve this answer



























  • <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















2














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>





share|improve this answer



























  • <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













2












2








2







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>





share|improve this answer















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>






share|improve this answer














share|improve this answer



share|improve this answer








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

















  • <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













-1














<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.



A venn diagram describing the relationship between types of content in HTML






share|improve this answer

























  • Great graphic, thank you.

    – HTMLFiver
    Mar 27 at 13:21















-1














<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.



A venn diagram describing the relationship between types of content in HTML






share|improve this answer

























  • Great graphic, thank you.

    – HTMLFiver
    Mar 27 at 13:21













-1












-1








-1







<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.



A venn diagram describing the relationship between types of content in HTML






share|improve this answer













<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.



A venn diagram describing the relationship between types of content in HTML







share|improve this answer












share|improve this answer



share|improve this answer










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

















  • 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

















draft saved

draft discarded
















































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.




draft saved


draft discarded














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





















































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







Popular posts from this blog

Kamusi Yaliyomo Aina za kamusi | Muundo wa kamusi | Faida za kamusi | Dhima ya picha katika kamusi | Marejeo | Tazama pia | Viungo vya nje | UrambazajiKuhusu kamusiGo-SwahiliWiki-KamusiKamusi ya Kiswahili na Kiingerezakuihariri na kuongeza habari

Swift 4 - func physicsWorld not invoked on collision? The Next CEO of Stack OverflowHow to call Objective-C code from Swift#ifdef replacement in the Swift language@selector() in Swift?#pragma mark in Swift?Swift for loop: for index, element in array?dispatch_after - GCD in Swift?Swift Beta performance: sorting arraysSplit a String into an array in Swift?The use of Swift 3 @objc inference in Swift 4 mode is deprecated?How to optimize UITableViewCell, because my UITableView lags

Access current req object everywhere in Node.js ExpressWhy are global variables considered bad practice? (node.js)Using req & res across functionsHow do I get the path to the current script with Node.js?What is Node.js' Connect, Express and “middleware”?Node.js w/ express error handling in callbackHow to access the GET parameters after “?” in Express?Modify Node.js req object parametersAccess “app” variable inside of ExpressJS/ConnectJS middleware?Node.js Express app - request objectAngular Http Module considered middleware?Session variables in ExpressJSAdd properties to the req object in expressjs with Typescript