CSSの表記が特定の場合のみ崩れる

前提・実現したいこと

PHPで作成中のページに下記読込み画面を実装したところページが崩れてしまいました。
おそらくは自身のCSSに問題がある為かと思うのですが問題の切り分けをしたく思います。
下記コードもしくはタグに記載したCSSに何か問題はあるでしょうか？

発生している問題・エラーメッセージ

CSSが崩れてしまう

該当のソースコード

PHP
1function Loadwaite(){
2$gonext = <<<eot
3 
4<div id="loadendbg" style='
5    position: fixed;
6    width: 100%;
7    height: 100%;
8    top: 0px;
9    left: 0px;
10    background: #000;
11    z-index: 1;
12'>
13<div id="loadend" style='
14    position: fixed;
15    top: 50%;
16    left: 50%;
17    width: 200px;
18    height: 200px;
19    margin-top: -100px;
20    margin-left: -100px;
21    text-align: center;
22    color: #fff;
23    z-index: 2;
24'>
25<img src="./img/img-loading.gif" width="80" height="80" alt="Now Loading..." />
26<p>Now Loading...</p>
27</div></div>
28
29eot;
30//--ロード処理
31    //ブラウザでバッファーリングされて直ぐに表示されない時は空白などを出力する
32    header('Content-Type: text/html; charset=UTF-8');
33    echo str_pad(" ",4096);
34    ob_end_flush();
35    ob_start('mb_output_handler');
36    echo $gonext;
37    ob_flush();
38    flush();
39}

読み込んだ後ページのヘッダー部分

HTML
1
2                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
3<div id="loadendbg" style='
4position: fixed;
5width: 100%;
6height: 100%;
7top: 0px;
8left: 0px;
9background: #000;
10z-index: 1;
11'>
12<div id="loadend" style='
13position: fixed;
14top: 50%;
15left: 50%;
16width: 200px;
17height: 200px;
18margin-top: -100px;
19margin-left: -100px;
20text-align: center;
21color: #fff;
22z-index: 2;
23'>
24<img src="./img/img-loading.gif" width="80" height="80" alt="Now Loading..." />
25<p>Now Loading...</p>
26</div></div>
27<!doctype html>
28<html lang="ja" dir="ltr">
29<head>
30<meta charset="UTF-8">
31<title>My Site Top</title>
32<meta name="viewport" content="width=device-width, initial-scale=1">
33<meta name="description" content="Cover of the content">
34<link rel="stylesheet" href="css/stylesheet.css">
35</head>
36<script>
37var element1 = document.getElementById('loadend'); 
38var element2 = document.getElementById('loadendbg'); 
39element1.remove();
40element2.remove();
41</script>
42<body>
43

試したこと

適当な個人ページのソースを頂戴してヘッダ部分を張り付けて表示しますと
ページが崩れる場合と、そうでない場合があるのでCSSの問題かと思い質問しています。

maisumakun

2022/01/07 12:14

「崩れる」とありますが、「どう出そうとした」ものが「実際にはどのようになっている」のでしょうか？

can1980

2022/01/07 12:39

主にDIVタグがおかしくなっているようです。％指定や無指定のwidth,heightが普段よりも大きくなっているように思います。

recal

2022/01/07 13:02

id="loadendbg"たちは<body>タグの中にはないんでしょうか？それとも記述ミスですか？ >読み込んだ後ページのヘッダー部分 body開始タグしかありません。 ><link rel="stylesheet" href="css/stylesheet.css"> 外部リンク先が提示されてないのでcssのチェックも出来ません。

can1980

2022/01/07 13:25

HTMLタグの外にあるのでCSS表示にエラーが起こるような問題があるのか自分では調べられませんでしたので質問させていただきました。phpでの長い読込み処理中にローディングを表示しておき、ローディングが終わればJavaScriptなどの処理がされid="loadendbg"を消す処理が動いて無事消えてくれるかと思っていました。