• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Safari Position

hypnoticum

Neues Mitglied
Hallo allerseits,
bei Verwendung von Safari habe ich ein anderes Erscheinungsbild als bei Firefox, Chrome und Opera (IE hab ich leider nicht in der aktuellen Version).

meine style.css:
#outerLogo {
height: 175px;
width: 100%;
border: 0px solid #FF6040;
border-radius: 20px;
background-color: #6699cc;
}

#decoBar {
position: relative;
z-index: 1;
bottom: 40px;
width: 100%;
height: 30px;
background-color: #B0C4DE;
}

#Logo {
position: relative;
z-index: 2;
top: 30px;
width: 600px;
margin-left: auto;
margin-right: auto;
}

meine lhost.php:
<?php
$titel="home";
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<meta http-equiv="content-type" content="text/html" charset=utf-8/>
<link rel="stylesheet" href="../css/style.css" type="text/css"/>
<title><?php echo $titel ?></title>
</head>

<body>
<div id="outerLogo">
<div id="Logo">
<object width="100%" height="100%" type="image/svg+xml" data="../pics/htmlde.png"></object>
</div>

<div id="decoBar">
</div>
</div>
</body>
</html>

wobei ich eigentllich ein anderes Logo verwende, was im svg-format ist. Da aber auch bei Verwendung von dem html.de-Logo das Erscheinungsbild uneinheitlich ist, denke ich mal, dass der Fehler woanders liegt als in dem Grafik-Format.

Vielen Dank schonmal fürs lesen.
 
Ok, habe den Fehler gefunden, bzw. es läuft wenn ich folgendes ändere:
#Logo{
...
width: 600px;
height: 133px;
...
}
Safari reichen die Angaben in der viewBox des SVG-Files scheinbar nicht aus um mit nur einer Seitenlänge das Bild in im festen Verhältnis zu skalieren. Stattdessen werden zusätzliche Ränder oben und unten hinzugefügt. Die zusätzliche Angabe muss man dann selbst berechnen.
 
Zurück
Oben