Hallo,
Auf meiner Seite befindet sich eine HighscoreListe die per PHP Skript Daten von einer MySql DB abruft. Das funktioniert auch in jedem Browser einwandfrei, aber nur über Firefox nicht.
(PS: Ja ich weiß, prepared statements wären besser)
PHP: HTML
<!doctype html>
<html lang="de">
<title> HighScore </title>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="external.css" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap-5.0.2-dist/css/bootstrap.min.css" />
<link rel="stylesheet" media="(max-width: 500px)" href="media.css" />
<title>
Highscore
</title>
</head>
<body>
<nav>
<ul>
<li>
<a class="german" href="arcade.html">HOME</a>
<a class="japanese" href="arcade.html">ホームホーム</a>
</li>
<li>
<a class="german" href="about.html">ABOUT</a>
<a class="japanese" href="about.html">私について</a>
</li>
<li>
<a class="german" href="kontakt.html">KONTAKT</a>
<a class="japanese" href="kontakt.html">連絡先の詳細</a>
</li>
<li>
<a class="german" href="impressum.html">IMPRESSUM</a>
<a class="japanese" href="impressum.html">インプリント</a>
</li>
</ul>
</nav>
<div class="sideTitle">
アーケード
</div>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-bs-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="Highscore">
ASTEROIDS
</div>
<?php
$conn = new mysqli('bla1', 'bla2', 'bla3', 'bla4');
$username = htmlspecialchars_decode($username);
$score = htmlspecialchars_decode($score);
if($conn->connect_error){
die("Error in DB connection: ".$conn->connect_errno." : ".$conn->connect_error);
}
$field = $_GET['sort'];
if($field == ''){
$field = 'score';
}
$ordertype = ($_GET['order'] == 'desc')? 'asc' : 'desc';
$select = "SELECT * FROM `players` ORDER BY $field $ordertype LIMIT 10" ;
$result = $conn->query($select);
if($result->num_rows > 0){
echo '<table class="tbl-header" >';
echo '<table class="tbl-content" >';
echo '<tr>';
echo '</a></th>';
echo '<th>Player ';
echo '</a></th>';
echo '<th>Score</th>';
echo '</a></th>';
echo '</tr>';
while($row = $result->fetch_object()){
echo '<tr>';
echo '<td>'.htmlspecialchars($row->username).'</td>';
echo '<td>'.htmlspecialchars($row->score).'</td>';
echo '</tr>';
}
echo '</table>';
}
?>
</div>
<div class="carousel-item">
<div class="Highscore">
RACER
</div>
<?php
$conn = new mysqli('bla1', 'bla2', 'bla3', 'bla4');
$username = htmlspecialchars_decode($username);
$time = htmlspecialchars_decode($time);
if($conn->connect_error){
die("Error in DB connection: ".$conn->connect_errno." : ".$conn->connect_error);
}
$field = $_GET['sort'];
if($field == ''){
$field = 'time';
}
$ordertype = ($_GET['order'] == 'desc')? 'desc' : 'asc';
$select = "SELECT * FROM `racer` ORDER BY $field $ordertype LIMIT 10" ;
$result = $conn->query($select);
if($result->num_rows > 0){
echo '<table class="tbl-content" >';
echo '<tr>';
echo '</a></th>';
echo '<th>PLAYER ';
echo '</a></th>';
echo '<th>Time</th>';
echo '</a></th>';
echo '</tr>';
while($row = $result->fetch_object()){
echo '<tr>';
echo '<td>'.htmlspecialchars($row->username).'</td>';
echo '<td>'.htmlspecialchars($row->time).'</td>';
echo '</tr>';
}
echo '</table>';
}
?>
</div>
<div class="carousel-item">
<div class="Highscore">
RUNNER
</div>
<?php
$conn = new mysqli('bla1', 'bla2', 'bla3', 'bla4');
$username = htmlspecialchars_decode($username);
$score = htmlspecialchars_decode($score);
if($conn->connect_error){
die("Error in DB connection: ".$conn->connect_errno." : ".$conn->connect_error);
}
$field = $_GET['sort'];
if($field == ''){
$field = 'score';
}
$ordertype = ($_GET['order'] == 'desc')? 'asc' : 'desc';
$select = "SELECT * FROM `runner` ORDER BY $field $ordertype LIMIT 10" ;
$result = $conn->query($select);
if($result->num_rows > 0){
echo '<table class="tbl-header" >';
echo '<table class="tbl-content" >';
echo '<tr>';
echo '</a></th>';
echo '<th>Player ';
echo '</a></th>';
echo '<th>Score</th>';
echo '</a></th>';
echo '</tr>';
while($row = $result->fetch_object()){
echo '<tr>';
echo '<td>'.htmlspecialchars($row->username).'</td>';
echo '<td>'.htmlspecialchars($row->score).'</td>';
echo '</tr>';
}
echo '</table>';
}
?>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="scripts/jquery-3.6.0.slim.min.js"></script>
<script src="scripts/popper.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
</body>
</html>Code: CSS
/*--Highscore Seite--*/
.Highscore {
text-align: center;
color: #02E1FF;
margin-top: 2%;
letter-spacing: 0.2em;
font-size: 70px;
flex-direction: column;
line-height: 200%;
text-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 15px #05E2FF, 0 0 20px #05E2FF, 0 0 25px #05E2FF, 0 0 30px #05E2FF, 0 0 35px #05E2FF;
clear: both;
}
.carousel {
font-family: "Quicksand", sans-serif;
display: grid;
justify-content: center;
align-items: center;
margin-left: 10%;
}
.tbl-content {
font-family: "Quicksand";
color: white;
height: 300px;
margin-top: 0px;
overflow-x: auto;
padding: 0.8rem;
border-radius: 10px;
border: 2px solid rgba(255, 255, 255, 0.3);
clear: both;
}
table {
font-family: "Quicksand";
width: 100%;
table-layout: fixed;
width: 50%;
text-align: center;
margin: auto;
}
td {
padding: 15px;
text-align: center;
vertical-align: middle;
font-weight: 300;
font-size: 15px;
color: white;
border-bottom: solid 1px rgba(255, 255, 255, 0.1);
}
th {
font-family: "Quicksand";
padding: 15px 15px;
text-align: middle;
font-size: 25px;
color: white;
text-transform: uppercase;
}
