Darstellung von Links in unterschiedlichen Browsern

[Robert]

Hallo Leute,
vielleicht kann mir jemand bei einem Problem mit css-Anweisungen und der unterschiedlichen Umsetzung im IE einerseits und Mozilla/Firefox andererseits helfen.
Ich habe für die Navigation einer in Bau befindlichen Website die Links auf die eigene Seite rechts untergebracht, die einzelnen Links sollen je in einem gleichgroßen rechteckigen kleinen Kasten stehen, der farblich abgesetzt ist.  Beim Internet Explorer klappt das wunderbar, bei den anderen Browsern sieht man nicht den erwünschten gleichgroßen Kasten (auch bei unterschiedlicher Wortlänge), sondern nur das Wort unterlegt, als hätte man mit <span> gearbeietet.
In der HTML-Datei steht (Ausschnitt):
....
<table >
<tr>
 <td class=navi><a class=kasten href="start.html" target="inhalt"
title="Unsere Startseite">Start</a></td>
</tr>
<tr>
 <td class=navi><a class= kasten href="elternarbeit.html" target="inhalt"
title="Infos zur Elternarbeit der Realschule">Elternarbeit </a> </td>
</tr>
<tr>
 <td class=navi><a class= kasten href="schulprogramm.html" target="inhalt" title="Informationen zum Programm der Realschule">Schulprogramm</a> </td>
</tr>
....
</table>
....
in der css-Datei stehen die Formate:

td.navi {
height:35px;
}

A.kasten:link {
BORDER-RIGHT: #336600 1px solid;
BORDER-TOP: #336600 1px solid;
BORDER-LEFT: #336600 1px solid;
COLOR: black;
BORDER-BOTTOM: #336600 1px solid;
TEXT-DECORATION: none;
WIDTH:140px;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 11pt;
BACKGROUND-COLOR: #e6e6e6; margin-bottom:0px;margin-left: 5px;
}
usw. für hover, visited, aktive, nur dass bei hover und aktive eine andere Farbe erscheint.
Die Definition A.kasten:link (statt nur a:link) brauche ich, weil ich andere Links innerhalb der Inhaltsseiten anders unterlegt haben will.
Ich wäre sehr froh, wenn mir jemand einen Tipp geben kann, wie ich das dem Firefox beibringe, was ich will; er ignoriert die Angabe width: 140px einfach!
Ich habe als Alternative zwar auch schon probiert, die Kastendefinition mit in die Tabellenzelle (td.navi in der css-Datei) zu bringen, das geht auch einigermaßen, was die Optik angeht, aber beim hover-Effekt über die Links ist dann doch wieder nur das Wort unterlegt. Natürlich kann man hinter die Wörter noch geschütze Leerschritte bringen, dann wird der Kasten verlängert, aber je nach Bildschirm, Auflösung usw. kommt da wahrscheinlich wieder nix Gutes bei raus.
Also: Ich bin echt dankbar für Tipps!

[Gunnar Bittersmann]

Beim Internet Explorer klappt das wunderbar, bei den anderen Browsern sieht man nicht den erwünschten gleichgroßen Kasten (auch bei unterschiedlicher Wortlänge), sondern nur das Wort unterlegt, als hätte man mit <span> gearbeietet.

Na, Robert, was denkst du, welche Browser es richtig machen? (Kleiner Tip: Richtig muss nicht wie gewünscht bdeuten.)

er ignoriert die Angabe width: 140px einfach!

Ist ja auch richtig so. a ist ein Inline-Element, darauf sollten sich width-Angaben nicht auswirken.

Oh, hab ich jetzt die Lösung der eingangs gestellten Frage beantwortet?

Ich wäre sehr froh, wenn mir jemand einen Tipp geben kann, wie ich das dem Firefox beibringe, was ich will;

Ändere die display-Eigenschaft der betreffenden a-Elemente so, dass die width-Angabe Wirkung zeigt.

Und warum missbrauchst du zur Layoutgestaltung Tabellen?

Live long and prosper,
Gunnar

[Robert]

Hallo Gunnar,
zzunächst mal danke für deine Antwort. Vielleicht hätte ich die Frage anders stellen sollen, es geht mir nicht darum, was welcher Browser richtig oder falsch macht, mag ja sein, dass ich dem inline-Element a hier zuviel abverlange - den Kommentar:

»» Na, Robert, was denkst du, welche Browser es richtig machen? (Kleiner Tip: Richtig muss nicht wie gewünscht bdeuten.)" empfinde ich als ein klein wenig süffisant! Wie ich das über die display-Eigenschaft einstelle, ist mir auch durch Nachgucken in Selfhtml nicht plausibel geworden. Wenn du oder jemand anders mir noch mal helfen könnte, fände ich das nett.
Die Tabelle habe ich deshalb genommen, damit die Links schön untereinander bleiben, was sie weder durch <p>, durch Zeilenumbrüche noch durch margin-bottom:15px in der css-Datei machen.

Also meine Frage noch mal anders: Wie kann ich erreichen, dass Links in einem kleinen Kästchen erscheinen, gleichgroß, egel wie lang das Wort ist, das den Link repräsentiert?

[xjs]

Hi!

Also meine Frage noch mal anders: Wie kann ich erreichen, dass Links in einem kleinen Kästchen erscheinen, gleichgroß, egel wie lang das Wort ist, das den Link repräsentiert?

Sie in ein Kästchen (Div o. Ä.) stecken.

ciao,
xjs

[Robert]

So, mit dem Zusatz display:block in den a-Angaben in der CSS-Datei klappt alles.
Gunnar, dass Frames out sind, weiß ich wohl, trotzdem finde ich sie praktisch.
Vielen Dank für die Hilfe.

[Struppi]

Gunnar, dass Frames out sind, weiß ich wohl, trotzdem finde ich sie praktisch.

Sie sind out, weil sie unpraktisch sind, aber na ja ..

Noch erine Anmerkung. Keine Ahnung wo du den CSS Code her hastm sicher nicht aus selfhtml, er deutet auf jeden Fall daraufhin dass du dich nicht viel mit der Technik auseinander gesetzt hast. z.b. ist die Einheit von 'pt' als Bildschirm Schriftgröße nicht zu empfehlen.

Gerade dein Problem lässt sich sehr schön mit CSS umsetzen, schau dir mal hier http://css.maxdesign.com.au/index.htm Listamatic 1 & 2 an. Dort wird mit Hilfe von HTML Listen <ul> horizontale und vertikale Menüs umgesetzt, die durch den Einsatz von CSS einmal leichter zu gestalten sind als Tabellen dann wenigher Code erzeugen durch den wegfall von Tabellen und dir zudem die Möglichkeit bieten dich mehr mit CSS vertraut zu machen.

Struppi.

[Robert]

Hallo Struppi, besten Dank für den Tipp mit den Beispielen auf: http://css.maxdesign.com.au/listamatic

Zum Thema Frames und Unerfahrenheit: Ich bin weder Webdesigner noch Programmierer. Du schreibst:
"Keine Ahnung wo du den CSS Code her hastm sicher nicht aus selfhtml, er deutet auf jeden Fall daraufhin dass du dich nicht viel mit der Technik auseinander gesetzt hast."
Natürlich ist es so, dass man sich autodidaktisch auch schon mal was aneignet (den Code habe ich nicht irgendwo her, sondern es mir so gedacht, wie es sein könnte - muss ja nicht das Optimum sein, jeder versucht halt, wie er´s kann.
Ich schrieb ja (übrigens zum ersten Mal überhaupt in ein Forum), weil ich um Hilfe zu einem Problem gebeten habe. Es zieht einen schon ein bißchen runter, dann von verschiedenen Seiten zu hören, das sähe man ja, das ich keine Ahnung hätte. Wenn ich die volle Ahnung hätte, würde ich nicht schreiben und - wie ich hoffe, in der gebotenen Höflichkeit - um Hilfe nachfragen.
Gruß und Dank
Robert

[Struppi]

Zum Thema Frames und Unerfahrenheit: Ich bin weder Webdesigner noch Programmierer. Du schreibst:
"Keine Ahnung wo du den CSS Code her hastm sicher nicht aus selfhtml, er deutet auf jeden Fall daraufhin dass du dich nicht viel mit der Technik auseinander gesetzt hast."
Natürlich ist es so, dass man sich autodidaktisch auch schon mal was aneignet (den Code habe ich nicht irgendwo her, sondern es mir so gedacht, wie es sein könnte - muss ja nicht das Optimum sein, jeder versucht halt, wie er´s kann.

Erstmal entschuldigung, der Hinweis sollte nicht so klingen als ob ich dich runtermachen wollte. Denn wenn du ...

Ich schrieb ja (übrigens zum ersten Mal überhaupt in ein Forum), weil ich um Hilfe zu einem Problem gebeten habe. Es zieht einen schon ein bißchen runter, dann von verschiedenen Seiten zu hören, das sähe man ja, das ich keine Ahnung hätte. Wenn ich die volle Ahnung hätte, würde ich nicht schreiben und - wie ich hoffe, in der gebotenen Höflichkeit - um Hilfe nachfragen.

... das erstemal in Foren (oder NG) gefragt hast, erscheint dir den Ton manchmal rauh, ist aber nicht so gemeint. (steht evtl. irgendwo auch in der Hilfe, zumindest in der alten Version tat es das)

Zum Thema. Das Forum ist mehr oder weniger ein Bestandteil der Dokumentation "selfhtml" steht auch oben drüber, daher die Reaktion. D.h. du hättest mit Sicherheit deinen code mit Hilfe von selfhtml verbessern können, wenn du die entsprechenden Kaptitel findest (ich weiß das sich da manch Anfänger schwer tut mit).

So! Jetzt hoffen wie mal, das durch die Kombination von selfhtml und diesem Forum dir noch viel geholfen wird.

Struppi.

[Robert]

Hallo Struppi,
ist schon okay, ich will hier keine Empfindlichkeit raushängen lassen, und danke nochmal für den Tipp. Aus Selfhtml habe ich schon mein (Halb)wissen, und lerne natürlich gerne hinzu.
Gruß
Robert

[Gunnar Bittersmann]

Gunnar, dass Frames out sind, weiß ich wohl, trotzdem finde ich sie praktisch.

Robert,
Die Nutzer deiner Seiten aber nicht.

Ist der Sinn bei der Webseitengestaltung, es dem Autor leicht zu machen – oder doch dem Leser?

Live long and prosper,
Gunnar

[Gunnar Bittersmann]

den Kommentar:

Na, Robert, was denkst du, welche Browser es richtig machen? (Kleiner Tip: Richtig muss nicht wie gewünscht bdeuten.)" empfinde ich als ein klein wenig süffisant!

Nein, Robert, der sollte nicht zum Alkoholkonsum anregen, sondern zum Nachdenken. ;-)

Wie ich das über die display-Eigenschaft einstelle, ist mir auch durch Nachgucken in Selfhtml nicht plausibel geworden.

Ja, bei der Beschreibung von http://de.selfhtml.org/css/eigenschaften/positionierung.htm#width@title=width in SELFHTML steht das wirklich nicht mit dabei.

Deutlich wird es in der CSS2-Spezifikation, 10.2 Inhaltsbreite : die 'width'-Eigenschaft
„Angewendet auf: Alle Elemente, außer auf nicht-ersetzte Inline-Elemente, Tabellenzeilen und Zeilengruppen“

Der Defaultwert für den Elementtyp a ist nicht-ersetztes Inline-Element, deshalb wirkt sich eine width-Angabe nicht aus (außer im IE, der das falsch implementiert hat).

Du musst also dafür sorgen, dass die entsprechenden a-Elemente keine nicht-ersetzten Inline-Elemente sind, sondern Blockelemente. Das erreichst du mit der Eigenschaft http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display.

Die Tabelle habe ich deshalb genommen, damit die Links schön untereinander bleiben, was sie weder durch <p>, durch Zeilenumbrüche noch durch margin-bottom:15px in der css-Datei machen.

Die bleiben auch schön untereinander, wenn du die Link-_Liste_ als solche auszeichnest:

<ul id="#navi">  
  <li><a class=kasten href="start.html" target="inhalt" title="Unsere Startseite">Start</a></li>  
  <li><a class= kasten href="elternarbeit.html" target="inhalt" title="Infos zur Elternarbeit der Realschule">Elternarbeit</a></li>  
  <li><a class= kasten href="schulprogramm.html" target="inhalt" title="Informationen zum Programm der Realschule">Schulprogramm</a></li>  
</ul>

Die Bullets und linken Abstände bekommst du mit CSS weg (http://de.selfhtml.org/css/eigenschaften/listen.htm#list_style_type@title=list-style-type, http://de.selfhtml.org/css/eigenschaften/randabstand.htm#margin_left@title=margin-left und http://de.selfhtml.org/css/eigenschaften/innenabstand.htm#padding_left@title=padding-left).

Die Verwendung des target-Attributs deutet auf Frames hin. Du weißt, dass Frames out sind?

Live long and prosper,
Gunnar

[Gunnar Bittersmann]

Robert,
Mir ist grad noch aufgefallen, dass ich aus deinem Code zu wenig gelöscht hatte: Die Klassenangaben sind unnütz, du kannst so selektieren:

#navi a { /* Angaben */ }

Live long and prosper,
Gunnar