nicht angemeldet
Größerer Abstand im Firefox zum oberen Rand als im Safari
Der Martinhi,
ich habe eine Linkleiste die sich direkt am oberen Rand befindet und in einem div mit schwarzem Hintergrund verschachtelt ist.
Die schwarze Leiste hat eine Höhe von 13 Pixeln.
Mein Problem ist, dass im Firefox ein um einen Pixel größeren Abstand nach oben gehalten wird (zwischen Linktext und oberem Browserrand) als im Safari.
Kann mir jemand sagen warum das so ist?
Nachfolgend der Code;
-------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Random Stuff</title>
<meta http-equiv="content-language" content="de">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
body {
background-color:#fefefe;
margin:0px;
padding:0px;
color:#000000;
height:100%;
font-family: verdana, arial, sans-serif;
font-size:12px;
line-height:16px;
}
div#leiste {
z-index:3;
position:fixed;
width:100%;
margin:0px;
padding:0px;
}
div#linkleiste {
background-color:#000000;
margin:0px;
padding-top:1px;
text-align:right;
height:13px;
}
a:link {
color:#FFFFFF;
text-transform:uppercase;
margin-right:6px;
letter-spacing:0.1em;
text-decoration:none;
font-family: arial, verdana, sans-serif;
font-size:11px;
}
a:visited {
color:#FFFFFF;
text-transform:uppercase;
margin-right:6px;
letter-spacing:0.1em;
text-decoration:none;
font-family: arial, verdana, sans-serif;
font-size:11px;
}
a:hover {
color:#77d3ec;
text-transform:uppercase;
margin-right:6px;
letter-spacing:0.1em;
text-decoration:none;
font-family: arial, verdana, sans-serif;
font-size:11px;
}
a:active {
color:#77d3ec;
text-transform:uppercase;
margin-right:6px;
letter-spacing:0.1em;
text-decoration:none;
font-family: arial, verdana, sans-serif;
font-size:11px;
}
</style>
</head>
<body>
<div id="leiste">
<div id="linkleiste">
<a href='index.php'>A</a>
<a href='index.php'>B</a>
<a href='index.php'>C</a>
</div>
</div>
</body>
</html>
-
Hallo,
Mein Problem ist, dass im Firefox ein um einen Pixel größeren Abstand nach oben gehalten wird (zwischen Linktext und oberem Browserrand) als im Safari.
und das wundert dich, wo du doch über die Position der Elemente keine Aussage machst?
<body>
<div id="leiste">
<div id="linkleiste">
<a href='index.php'>A</a>
<a href='index.php'>B</a>
<a href='index.php'>C</a>
</div>
</div>
</body>Nach diesem Markup und dem zugehörigen Stylesheet müsste div#linkleiste eigentlich lückenlos am oberen Rand des Browserfensters kleben.
body {
margin:0px;
padding:0px;
height:100%;
font-family: verdana, arial, sans-serif;
font-size:12px;
line-height:16px;
}Meinst du font-size:12px wirklich ernst? Lieferst du auch die Lupe mit?
div#leiste {
z-index:3;
position:fixed;
width:100%;
margin:0px;
padding:0px;
}Dieses Element ist also in seiner Position fixiert, weiß aber nicht, wo.
a:link {
font-size:11px;
}Geht's vielleicht noch kleiner?
Übrigens höre ich deine Linkliste schreien: Ich will so gern eine Liste sein!So long,
Martin--
Auch mit eckigen Radios kann man Rundfunk hören.
-
Nach diesem Markup und dem zugehörigen Stylesheet müsste div#linkleiste eigentlich lückenlos am oberen Rand des Browserfensters kleben.
Nicht zwingend, es wird keine Aussage über das html-Element getroffen.
Firefox hat in seinem default-Stylesheet z.B. folgendes stehen:
html, div, map, dt, isindex, form { display: block; } body { display: block; margin: 8px; }Ein anderer Browser kann aber durchaus den Abstand zum Viewport durch ein padding oder margin im html-Element realisieren.
Leider kenne ich das Standardverhalten von Safari diesbezüglich nicht.
-
Nach diesem Markup und dem zugehörigen Stylesheet müsste div#linkleiste eigentlich lückenlos am oberen Rand des Browserfensters kleben.
Nicht zwingend, es wird keine Aussage über das html-Element getroffen.
Nachtrag: ist aber nicht der Fall - sowohl in Safari alsauch unter Firefox klebt das Zeug am oberen Rand.
-
-
ähm, ja vielen Dank - das hilft mir so gar nicht weiter -
aber danke für deine Meinungen...
-