CODEWITHSUNDEEP
htmlbrowserelement
MaxAx
MaxAx

Reputation: 101

Why does some of my text within html paragraph tag fall outside of the <p></p>when in browser

Please see html below. The last two sentences fall outside of the paragraph tag when viewed in browser and therefore lose the properties of the paragraph. If you look at html in text editor, you will see all verbiage is within paragraph tag but not when viewed in browser like Firefox and IE. Review source in View Source or Debug console.

    <html>
    <head>
    <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>TEST</title>
    <meta content="width=device-width" name="viewport">
    <meta charset="ISO-8859-1">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    </head>
    <body>
    <div id="page_body">
     <div id="my-content">
      <div id="mymsg" class="mymsgcount">
       <div class="my-menus">
        <div class="my-menutext my-menutext1">
                <h1>This is a test.</h1>
                <p>
                    <content>Determine why the last two sentences in this section falls out of paragraph tag in browswer:<br>
                        <ul>
                            <li>first list item</li>
                            <li>second list item</li>
                            <li>third list item</li>
                        </ul>
                        <br>This is the second last sentence which for some reason falls outside of the paragraph tag when viewed in browser.<br>
                        <strong>Last sentence to fall out of paragraph tag.</strong>
                    </content>
                </p>
        </div>
       </div>
      </div>
     </div>
    </div>
    </body>
    </html>

Upvotes: 0

Views: 1064

Answers (3)

user4974927
user4974927

Reputation:

Probalby because only phrasing content is allowed in the p-tag and that's the way the browsers are trying to fix that. It might also be because of the <content>-element which is not part of the HTML-standard.

Upvotes: 0

user1864610
user1864610

Reputation:

Your HTML structure is broken. Specifically, the <p> element is automatically terminated if certain other elements are encountered, which includes <ul>. This means that the unordered list and everything beyond it is not part of the initial paragraph.

The W3C specification says:

A p element's end tag may be omitted if the p element is immediately followed by an address, article, aside, blockquote, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, nav, ol, p, pre, section, table, or ul, element, or if there is no more content in the parent element and the parent element is not an a element.

You could group these items together with a <div>.

You can find the specific reference on this on the W3C site here

Upvotes: 1

Mazen
Mazen

Reputation: 171

Give this a try ...

<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TEST</title>
<meta content="width=device-width" name="viewport">
<meta charset="ISO-8859-1">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<style>
p {color:red}
</style>
</head>
<body>
<div id="page_body">
 <div id="my-content">
  <div id="mymsg" class="mymsgcount">
   <div class="my-menus">
    <div class="my-menutext my-menutext1">
            <h1>This is a test.</h1>
            <content>
                <p>Determine why the last two sentences in this section falls out of paragraph tag in browswer:</p><br>
                    <ul>
                        <li>first list item</li>
                        <li>second list item</li>
                        <li>third list item</li>
                    </ul>
                    <p><br>This is the second last sentence which for some reason falls outside of the paragraph tag when viewed in browser.<br>
                    <strong>Last sentence to fall out of paragraph tag.</strong></p>
            </content>
    </div>
   </div>
  </div>
 </div>
</div>
</body>
</html>

Upvotes: 0

Related Questions