3 Replies Latest reply: Jun 17, 2014 9:30 AM by fac586 RSS

    HTML issue

    SAYYED

      Hi,

       

      If I add the below HTML content in HTML region APEX 3.2 version ,

      <span style="color:black;">

      <b>Instructions:</b><br><br>

      <ol>

        <li>Download Upload Template

      </li><br>

        <li>Enter a line for :<br>

          <br>

          <ul>

          <li>each new record to be added<br>

          <li>each existing record to be edited </li><br>

          </ul>  

        </li>

      </ol>

      </span>

      <br>

      <br>

      i am getting out put as mentioned below as

      Instructions:


      1. Download Download Upload Template  here.

       

      2. Enter a line for :

        • each new record to be added
        • each existing record to be edited

      same if i add in apex 4.2.2 version it is not showing exact out put , it is showing as mentioned below.


       

      Instructions:

       

      Download Upload Hierarchy Template here.

       

      Enter a line for :

       

      each new record to be added
      each existing record to be edited

       

      is this template issue, please suggest me.

       

      Thanks and regards,

      Ibrahim Sayyed.


        • 1. Re: HTML issue
          fac586

          SAYYED wrote:

           

          If I add the below HTML content in HTML region APEX 3.2 version ,

          <span style="color:black;">

          <b>Instructions:</b><br><br>

          <ol>

            <li>Download Upload Template

          </li><br>

            <li>Enter a line for :<br>

              <br>

              <ul>

              <li>each new record to be added<br>

              <li>each existing record to be edited </li><br>

              </ul>

            </li>

          </ol>

          </span>

          <br>

          <br>

          i am getting out put as mentioned below as

          Instructions:


          1. Download Download Upload Template  here.

           

          2. Enter a line for :

            • each new record to be added
            • each existing record to be edited

          same if i add in apex 4.2.2 version it is not showing exact out put , it is showing as mentioned below.


           

          Instructions:

           

          Download Upload Hierarchy Template here.

           

          Enter a line for :

           

          each new record to be added
          each existing record to be edited

           

          is this template issue, please suggest me.

          As I'm sure you've been informed before, when asking questions about layout and visual formatting, full details of APEX/browser versions and themes and templates used are always required. (Better still, reproduce the problem on apex.oracle.com so we can actually see it.) If you include this information upfront you'll get a much faster response.

           

          Starting with the basics:

          <span style="color:black;">

          <b>Instructions:</b><br><br>

          <ol>

            <li>Download Upload Template

          </li><br>

            <li>Enter a line for :<br>

              <br>

              <ul>

              <li>each new record to be added<br>

              <li>each existing record to be edited </li><br>

              </ul>

            </li>

          </ol>

          </span>

          <br>

          <br>

          This is invalid HTML. span is an inline element and therefore cannot be the container for block elements like ol, ul, and li. The use of br elements for apparently presentational reasons in this way is also non-conforming. Use CSS margins or padding to increase spacing between elements.

           

          This content should be structured as follows, using div as a block container:

           

          <div style="color:black;">
          <h1>Instructions</h1>
          <ol>
            <li>Download Upload Template</li>
            <li>Enter a line for:
              <ul>
                <li>each new record to be added</li>
                <li>each existing record to be edited</li>
              </ul>
            </li>
          </ol>
          </div>
          
          

          The heading level can be changed to fit with other headings used in the page to produce the required document outline. The presentation should then be tuned using CSS.

          • 2. Re: HTML issue
            SAYYED

            Hi fac586,

             

            I am sorry for late reply.

             

            i have tried as you said, but i didn't get exact output what i am expecting.

            It looks theme problem.

            If i try the this html

            <span style="color:black;">

            <b>Instructions:</b><br><br>

            <ol>

              <li>Download Upload Template

            </li><br>

              <li>Enter a line for :<br>

                <br>

                <ul>

                <li>each new record to be added<br>

                <li>each existing record to be edited </li><br>

                </ul>

              </li>

            </ol>

            </span>

            <br>

            <br>

            on
            https://apex.oracle.com/pls/apex/f?p=33780:3:108103584081980:::::

            which uses Scarlet (Theme 21),  it works fine,

            but same if i use on
            https://apex.oracle.com/pls/apex/f?p=83943:4:34787628111148:::::

            which uses Productivity Applications (Theme 26).
            it is not working properly.

             

            I would like to apply this html code on application page which uses Productivity Applications (Theme 26).

             

            Please suggest me.

             

            Thanks and regards,

            Ibrahim Sayyed.

            • 3. Re: HTML issue
              fac586

              SAYYED wrote:

               

              https://apex.oracle.com/pls/apex/f?p=33780:3:108103584081980:::::

              which uses Scarlet (Theme 21),  it works fine,

              but same if i use on
              https://apex.oracle.com/pls/apex/f?p=83943:4:34787628111148:::::

              which uses Productivity Applications (Theme 26).
              it is not working properly.

               

              I would like to apply this html code on application page which uses Productivity Applications (Theme 26).

               

              Please suggest me.

               

              Thanks and regards,

              Ibrahim Sayyed.

              Theme 26 uses a CSS reset to remove browser default styling from most elements. Some of these styles are necessary for normal rendering of headings, lists etc, so they have to be replaced by custom styles.

               

              With the valid HTML posted above as the region contents:

               

              <div style="color:black;">  
              <h1>Instructions</h1>  
              <ol>  
                <li>Download Upload Template</li>  
                <li>Enter a line for:  
                  <ul>  
                    <li>each new record to be added</li>  
                    <li>each existing record to be edited</li>  
                  </ul>  
                </li>  
              </ol>  
              </div>
              

               

              Add a static region ID to the region, and add the following style sheet to the page Inline CSS property:

               

              #static-region-id h1 {
                font-weight: bold;
              }
              #static-region-id h1, #static-region-id li {
                margin-top: 1em;
              }
              #static-region-id ol, #static-region-id ul {
                margin: 1em 0 0 2em;
              }
              #static-region-id ol ul li {
                margin-top: 0;
                list-style: outside disc;
              }