Überflüssige Scrollbar im Firefox

Status
Nicht offen für weitere Antworten.
SilentWarrior

SilentWarrior

Erfahrenes Mitglied
Servus allerseits

http://www.silentwarrior.ch.vu

Aus lauter Langeweile hab ich heute Nachmittag mal mein Menü etwas... hm, sagen wir mal, verbessert. Also hab ich zwei Listen gemacht, einen für die Haupttitel und einen für die einzelnen Einträge. Das Problem ist jetzt allerdings folgendes: Firefox macht mir da eine horizontale Scrollbar hin, obwohl es die gar nicht braucht. Nun frage ich mich halt warum. Der IE und der Opera zeigen das nämlich vollkommen korrekt an. Hier mal ein paar Codeauszüge:
HTML: 
<div class="nav">
<ul>
<li>
<h1>News</h1>
<ul>
<li><a href="index.php?id=1">News</a></li>
</ul>
</li>
<li>
<h1>Links</h1>
<ul>
<li><a href="index.php?id=3&amp;kategorie=1">Freunde</a></li>
<li><a href="index.php?id=3&amp;kategorie=2">Foren</a></li>
<li><a href="index.php?id=3&amp;kategorie=3">Fan-Sites</a></li>
</ul>
</li>
// usw.
</ul>
</div>
Und so sieht's in der CSS-Datei aus:
HTML: 
div.nav {
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-350px;
    margin-top:-250px;
    width:143px;
    height:498px;
    border:1px solid #000000;
    padding:0px;
    overflow:auto;
}

.nav ul {
    list-style-type:none;
    margin:0px;
    padding:0px;
}

.nav li {
    margin:0px;
    padding:0px;
    font-family:arial, sans-serif;
    font-size:13px;
    line-height:16px;
}

.nav h1 {
    font-family:arial, sans-serif;
    font-size:13px;
    width:100%;
    color:#ffffff;
    background-color:#000000;
    margin:0px;
    padding:0px;
}
Also kann mir einer von euch erklären: a) warum der Firefox das macht, b) ob das an falschem Code liegt oder ob es ein Bug ist, und c) falls es ein Bug ist, ob es dafür einen Workaround gibt.

Vielen Dank schonmal! Und schönen Nachmittag noch :)

SilentWarrior
 
Hi,

warum FireFox das macht, kann ich Dir nicht sagen, aber warum setzt Du nicht statt
HTML: 
overflow:auto;
HTML: 
overflow:hidden;
oder visible für den Überlauf des DIVs in der nav-Klasse?

Gruß


P.S.: Vermutung; IE und Mozilla interpretieren die Begrenzungsboxen von Elementen (u.a. durch margin und Rahmen) unterschiedlich, so dass Deine Maße nicht mehr ganz stimmen.
.
 
Das könnte ich natürlich machen, allerdings wäre dann das Problem nicht behoben. Es geht mir ja primär darum, zu wissen, warum der Firefox sowas sinnloses macht. Ausserdem will ich Leuten, die (wegen Sehbehinderungen bspw.) eine sehr grosse Schriftart eingestellt haben, trotzdem die ganze Navigation zur Verfügung stellen (mit Scrollbalken, so wie rechts).

Datic:
P.S.: Vermutung; IE und Mozilla interpretieren die Begrenzungsboxen von Elementen (u.a. durch margin und Rahmen) unterschiedlich, so dass Deine Maße nicht mehr ganz stimmen.
Zum Vergrößern anklicken....
Schau dir mal den CSS-Code an, ich hab da soweit ich das überblicken kann alle möglichen Dinge, die um den eigentlichen Inhalt rumsein könnten, entfernt. Wüsste echt nicht, was man da machen könnte.

Naja, vielleicht kann mir ja jemand noch irgendwie anderweitig helfen. Danke euch beiden schonmal! :)
 
Ich bin mir zwar nicht sicher, aber ich vermute mal, dass width zu groß ist, ...
Versuch das mal zu verkleinern. Was passiert dann?

redlama
 
Hallo!

Danke nochmal! ;)

So, ich hab jetzt die letzte Stunde damit verbracht, den Code zu durchforsten, aber ich finde den Fehler nicht. Es sind 8px die einfach nirgends im Code stehen.....

Ich hab das mal nach meinem Gusto überarbeitet, den Fehler behebt es allerdings nicht wirklich. Andereseits ist bei der Version, das liegt nur an dem overflow, kein Balken mehr zu sehen.

Was als Lösung zwar tragfähig ist, weil eine evtl. vergrösserte Schrift korrekt angezeigt wird (sie geht nämlich dann über den div Bereich einfach raus...), aber warum diese 8px da sind, klärt sich dadurch nicht.

Nimm mal bei der Navi den overflow raus. Dann passt das alles.

Hier meine Umarbeitung:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>...</title>
<meta name="description" content="News." />
<meta name="keywords" content="News, Neuigkeiten, Aktuelles" />
<meta name="date" content="2005-01-05" />
<meta name="robots" content="follow" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
body {
    font-family:arial, sans-serif;
    font-size:13px;
    color:#000000;
}
img {
    border:0px;
}
h1, h2 {
    padding:2px 0px 2px 0px;
    margin:0px;
}
p {
    padding:5px 0px 5px 0px;
    margin:0px;
}
h1 {
    font-size:15px;
}
h2 {
    font-size:14px;
}
#center {
	position:absolute;
	width:800px;
	height:498px;
	left:50%;
	top:50%;
	margin-left:-400px;
	margin-top:-249px;
	z-index:0;
}
#main {
    position:absolute;
    left:147px;
    top:0px;
    width:657px;
    height:498px;
    border:1px solid #000000;
    border-left:0px;
    overflow:auto;
}
#nav {
    position:absolute;
    left:0px;;
    top:0px;
    width:143px;
    height:498px;
    border:1px solid #000000;
    padding:0px;
}
#nav ul {
    list-style-type:none;
    margin:0px;
    padding:0px;
}
#nav li {
    margin:0px;
    padding:0px;
    font-family:arial, sans-serif;
    font-size:13px;
    line-height:16px;
}
#nav h1 {
    font-family:arial, sans-serif;
    font-size:13px;
    color:#ffffff;
    background-color:#000000;
    margin:0px;
    padding:0px;
}
</style>
</head>
<body>
<div id="center">
<div id="nav">
<ul>
 <li>
  <h1>News</h1>
  <ul>
   <li><a href="index.php?id=1">News</a></li>
  </ul>
 </li>
 <li>
  <h1>Links</h1>
  <ul>
   <li><a href="index.php?id=3&amp;kategorie=1">Freunde</a></li>
<li><a href="index.php?id=3&amp;kategorie=2">Foren</a></li>
<li><a href="index.php?id=3&amp;kategorie=3">Fan-Sites</a></li>
  </ul>
 </li>
 <li>
  <h1>Downloads</h1>
  <ul>
   <li><a href="index.php?id=4&amp;kategorie=1">Musik</a></li>
<li><a href="index.php?id=4&amp;kategorie=2">Internet</a></li>
  </ul>
 </li>
 <li>
  <h1>Wallpaper</h1>
  <ul>
   <li><a href="index.php?id=5&amp;kategorie=1">Schauspielerinnen</a></li>
<li><a href="index.php?id=5&amp;kategorie=2">Computer</a></li>
<li><a href="index.php?id=5&amp;kategorie=3">Religion</a></li>
<li><a href="index.php?id=5&amp;kategorie=4">Natur</a></li>
<li><a href="index.php?id=5&amp;kategorie=5">Sonstiges</a></li>
  </ul>
 </li>
 <li>
  <h1>CD-Reviews</h1>
  <ul>
   <li><a href="index.php?id=6&amp;album=1">These Days</a></li>
<li><a href="index.php?id=6&amp;album=2">Dick this!</a></li>
  </ul>
 </li>
 <li>
  <h1>Privates</h1>
  <ul>
   <li><a href="index.php?id=7">Lebenslauf</a></li>
   <li><a href="index.php?id=12">Steckbrief</a></li>
  </ul>
 </li>
 <li>
  <h1>Sonstiges</h1>
  <ul>
   <li><a href="index.php?id=8">Feedback</a></li>
  </ul>
 </li>
</ul>
<p></p>
<p></p>
</div>
<div id="main">
<h1>News</h1>
<h2>04.01.2005</h2>
<p>Frohe Weihnachten, erfolgreiches neues Jahr usw. (die ganze )</p>
<p>Was wirklich wichtig ist: Morgen Abend kommt <i>Sweet November</i> im Schweizer Fernsehen. Das ist der Hammerfilm! Den m&uuml;sst ihr euch unbedingt reinziehen. So oberkrass, da haut's einem glatt den Nuggi raus.</p>
<h2>22.12.2004</h2>
<p>Helga! Timmey! (Oder so &auml;hnlich...)</p>
<p>Der olle destructive minded lebt auch noch, wie man auf <a href="http://www.worldwideweber.ch.vu/">seiner Website</a> sehen kann. N1.</p>
<p>Was mich aber aufregt, ist das, was in seiner Kritik &uuml;ber die neue Scheibe von Eminem steht.</p>
<p>Was nimmt sich diese Drecksau eigentlich heraus, ausgerechnet den Titel meines Lieblingsfilms zu nehmen und daraus einen Scheisssong zu machen? Kein Wunder, dass er aufh&ouml;rt, jemand derart unf&auml;higen braucht die Welt nicht.</p>
<h2>21.12.2004</h2>
Da lacht sich doch einer 'nen Schranz ab... seit heute steht <a href="http://ardownload.adobe.com/pub/adobe/reader/win/7x/7.0/deu/AdbeRdr70_deu_full.exe">Version 7 des Adobe Readers</a> zum Download bereit. Meine G&uuml;te, ich kann mich noch an Version 4 erinnern! Ich glaube, ich werde langsam alt... <img src="bilder/smileys/sad.gif" width="15" height="15" alt=":(" />
</div>
</div>
</body>
</html>

Gruss Bud
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück