Question 30620 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress Footer is shown in the middle of the page

Ich have a problem with my custom wordpress page.
I want to use the default header and footer.
This issue only happens on safari. On Chrome it works fine!

The footer is shown in the middle of the page and not at the end of the page.
Do you have any suggestion?

Here is my code.

        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fahrzeugkunde - TLF</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="Modal.css">
</head>

<body>
    <div>
        <?php require($_SERVER['DOCUMENT_ROOT'] . '/wp-load.php');
        get_header(); ?>
    </div>
    <main class="feuerwehr-body">
        <div class="feuerwehr-flexContainer">
            <div class="feuerwehr-imageContainer">
                <img class="feuerwehr-image" src="../images/TLF/GA2.JPG" alt="GA2" usemap="#image-mapGA2">
                <map name="image-mapGA2">
                    <area class="area" shape="rect" coords=" 1885, 1611, 2101, 2130 " alt="placeholder" onclick="openInfo('Feuerlöscher', 'Das ist ein Feuerlöscher')">
                    
                </map>
            </div>

            <div class="feuerwehr-imageContainer">
                <img class="feuerwehr-image" src="../images/TLF/GA4.JPG" alt="GA4" usemap="#image-mapGA4">
                <map name="image-mapGA4">
                    <area class="area" shape="rect" coords=" 97, 525, 1340, 790 " alt="placeholder" onclick="openInfo('Feuerlöscher', 'Das ist ein Feuerlöscher')">
                </map>
            </div>
            <div class="feuerwehr-imageContainer">
                <img class="feuerwehr-image" src="../images/TLF/GA6.JPG" alt="GA6" usemap="#image-mapGA6">
                <map name="image-mapGA6">
                    <area class="area" shape="rect" coords=" 199, 642, 366, 1829 " alt="placeholder" onclick="openInfo('Feuerlöscher', 'Das ist ein Feuerlöscher')">
                    
                </map>
            </div>

            <div id="myModal" class="Modal is-hidden is-visuallyHidden">
                <!-- Modal content -->
                <div class="Modal-content" id="modal-image-container">
                    <div class="modal-image" id="modal-image">

                    </div>
                    <div style="display: flex; justify-content: end;">
                        <button class="custom-button custom-button--inline" id="sig-cancellationBtnImage">Zurück</button>
                    </div>
                </div>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="jquery.rwdImageMaps.min.js"></script>
        <script>
            $(document).ready(function(e) {
                $('img[usemap]').rwdImageMaps();
            });
        </script>
        <script src="Modal.js"></script>
        <script src="index.js"></script>
    </main>
    <div style="display: none">
        <?php get_footer(); ?>
    </div>

</html>

enter image description here

Tags:

2

Answers


  1. 0

    The get_footer() wordpress method add a html template code to your page : https://developer.wordpress.org/reference/functions/get_footer/

    The call should be INSIDE html tags (same with get_header()). Maybe chrome is ok with that but safari seems to be more sensitive.

    Anyway, the wordpress load a lot of css and js files and we cannot figure what style is applying on your page in your post.

    Login or Signup to reply.
  2. 0

    Its a mistake to put the </html> after the get footer() function Because it should be already inside the footer file. Hope i was clear enough (my english isnt my mother tounge).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search