Claus: Navigation mit ul und zu breite Anzeige der Texte im Firefox

Beitrag lesen

SELF-Forum

Navigation mit ul und zu breite Anzeige der Texte im Firefox

Claus
– Informationen zu den Bewertungsregeln

Moin,

bei der folgenden kleinen Seite handelt es sich um einen Versuch eine Website ohne Frames und Javascript zu bauen, deren Navigationsbereich und Inhalt durch Hintergrundfarbe optisch getrennt sind und deren Navigationsbuttons eine kleine Grafik links vom Text haben, die sich beim Überfahren mit der Maus ändert (hover-Effekt).

Nach einigen Versuchen habe ich dann einen Lösung gefunden:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Test</title>
<style type="text/css">

td#Navigation { background-color: silver;
   border: 1px solid black;
   margin: 0; padding: 10pt 10pt;
   text-align: left; }

ul.Menue { font-size: 15pt;
   border: 1px solid green;
   margin: 10px 0; padding: 3px 0; }

ul.Menue li { border: 1px solid blue; list-style: none;
   margin: 0; padding: 6px 0px; }

li.MenuItem a { color: black;
   padding: 6px 0px 6px 32px;
   background: url(Test1.gif) no-repeat; }

li.MenuItem a:hover { background: url(Test2.gif) no-repeat; }

</style>
</head><body>

<table width="100%"><tbody><tr><td id="Navigation">
   <ul class="Menue">
      <li class="MenuItem"><a href="Thema1.htm">Thema&nbsp;1</a></li>
      <li class="MenuItem"><a href="Thema2.htm">Thema&nbsp;2</a></li>
   </ul>
</td><td>
      Lorem ipsum dolor ...
</td></tbody></table>

</body> </html>

Test1.gif und Test2.gif sind zwei beliebige verschiedene 32x32 Pixel-Grafiken.

Zu sehen gibt es das Ganze zur Zeit unter http://www.feuerwehr-holtsee.de/Test/Test.html.

Unter Opera 8.5 und IE6 ist alles prima, also wie erwartet. Nur im Firefox (1.0.7) ragen die Navigationseinträge in den Inhaltsbereich.

Ersetze ich die Tabelle und die beiden Spalten durch ein ul und ein div, wobei die ul#Navigation den Style float:left bekommt, dann stimmt die Breite der Navigation auch im FF. Mich stört aber an dieser Lösung, dass man die Breite der Navigation explizit angeben muss.

Hat jemand einen Tipp, wie ich das anders (richtig) machen kann? Oder muss ich einfach auf die FF-Version warten, die es richtig macht?

Claus

Beitrag melden
–
Informationen zu den Bewertungsregeln