Difference between raw HTHL and WordPress Output has me stymied

  • I’m trying to set up a simple Web App through my WordPress site. I’ve got the javascript and the custom CSS mostly working but one thing I can’t understand is:

    When setting it up as raw HTML the the page performs mostly as I want it to.

    Raw HTHL: Button and Logo are in a fixed position. Gold-coloured text fills in the space above the button without altering that positioning.

    You can see it clearly in the Screenshots.

    In Worpress: Once inserted into WordPress the absolute positioning jumps around depending on the length of the text as seen in this and the next image. What could be causing this? Is WP somehow overriding my CSS?

    Another minor issue: On a web page, the button changes to 80% opacity on mouseover, changing back when the cursor leaves. On a device, however [screenshots from an iPad Pro,] the button stays “greyed out” once tapped. This must be a common issue, is there a standard solution?

    • This topic was modified 3 years, 10 months ago by Brian Grover.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

  • If the raw HTML one isn’t rendered in a browser, you can’t really compare it to one that is.
    The WordPress one is rendered by the theme (possibly influenced by plugins), and on recent versions of WP, can have styles from the editor.
    Absolute positioning is dependent on its first positioned ancestor, so that could easily be different from the raw version to the WP version.

    For the button changing opacity, touch devices don’t have mouseover (:hover). You are stuck with :focus and :active. When you tap a button, it is :active.

    • This reply was modified 3 years, 10 months ago by Joy.
    Thread Starter Brian Grover

    (@daboo2u2)

    Thanks Joy: All of the screenshots are rendered in Firefox, on a Windows PC or iPad. It’s a web app, not sure how else it could be rendered.

    Thread Starter Brian Grover

    (@daboo2u2)

    Just a thought: I don’t have to deliver the app through the WordPress site, I just thought it would be a nice touch. Are there any security concerns if I deploy the web app as a single, simple web page outside of WP? Doing so would eliminate a lot of the hassles I’ve run into.

    What security concern would there be for a web page? Does it have JS that gets data from the REST API? Is that public?

    Thread Starter Brian Grover

    (@daboo2u2)

    >>> What security concern would there be for a web page?

    I have no idea, that’s why I asked. The Javascript is self-contained and I’ll probably put it inline, rather than in an outside file to keep things streamlined.

    Thread Starter Brian Grover

    (@daboo2u2)

    I solved it by placing the page outside of wordpress.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Difference between raw HTHL and WordPress Output has me stymied’ is closed to new replies.