CSS padding wird vom IE ignoriert

[Antje Bijken]

Hallo,

ich habe ein Problem mit CSS Formatierung und weiss so recht nicht weiter. Ich hoffe, jemand von Euch kann mir dabei weiterhelfen:

Ich habe ein horizontales Menu, etwa so:

Menuepunkt1     Menuepunkt2     Menuepunkt3     [...]

Dabei werden die Zwischenabstände vom CSS über padding-left und padding-right geregelt. Nun sieht das ganze unter Mozilla auch genau richtig aus, nur der IE interpretiert die padding Anweisungen nicht, sodass alle Menueeinträge aneinander kleben ohne Zwischenraum.
Ich vermute, der Fehler liegt an meiner fehlenden Kenntniss bezüglich sauberen CSS Codes, so ist mir noch unklar, wann ich das "div" Tag nehmen soll und wann das "span". Dies ist in etwa die CSS Formatierung:

.mainmenu {
 font-size: 13px;
 line-height: 18px;
 background: #aaaaaa;
 color: #ffffff;
 padding-left:10px;
 padding-right:15px;
 }

Und dies der HTML Code (eigentlich dynamisch über PHP, aber im Prinzip; "mainmenuhi" und "mainmenulo" enthalten nur Farbinfos):

<div class="mainmenu">
<a class="mainmenuhi" href="#">Menuepunkt1</a>
<a class="mainmenulo" href="#">Menuepunkt1</a>
<a class="mainmenulo" href="#">Menuepunkt1</a>
<a class="mainmenulo" href="#">Menuepunkt1</a>
</div>

Für jede Hilfe wäre ich dankbar,
Gruss und Kuss,
Antje

[Thomas Luethi]

Hallo,

Ich habe ein horizontales Menu, etwa so:
Menuepunkt1     Menuepunkt2     Menuepunkt3     [...]

Zwischen den Punkten (Links) sollte ein Trennzeichen stehen.
Fuer die Blinden, denen Webseiten vorgelesen werden.
Steht AFAIK irgendwo in den WCAG-Richtlinien
http://www.w3.org/Consortium/Offices/Germany/Trans/WAI/webinhalt.html
(Du kannst es auch mit CSS wieder unsichtbar machen.)

nur der IE interpretiert die padding Anweisungen nicht

^^^^^^ welcher?

Ich vermute, der Fehler liegt an meiner fehlenden Kenntniss bezüglich sauberen CSS Codes, so ist mir noch unklar, wann ich das "div" Tag nehmen soll und wann das "span". Dies ist in etwa die CSS Formatierung:

War das nicht Dein Thread weiter unten, wo display:block und
display:inline-block vorgeschlagen wurden, damit das Bildchen
vor den Links als Hintergrundbild eingebaut werden konnte?
Das waere auch hier ein Loesungsansatz.

.mainmenu {
 font-size: 13px;
 line-height: 18px;
 background: #aaaaaa;
 color: #ffffff;
 padding-left:10px;
 padding-right:15px;
 }

Versuch mal, auch noch eine width-Angabe zu machen.
Du weisst ja, wie lang die Links sind (in Anzahl Buchstaben),
also gib die Width-Angabe in em an.
(z.B. bei max. 15 Buchstaben => width:12em; oder so...)

<div class="mainmenu">
<a class="mainmenuhi" href="#">Menuepunkt1</a>
<a class="mainmenulo" href="#">Menuepunkt1</a>
<a class="mainmenulo" href="#">Menuepunkt1</a>
<a class="mainmenulo" href="#">Menuepunkt1</a>
</div>

Es ist ueberfluessig, jedem einzelnen Link eine Klasse zu geben.
Nimm fuer die haeufigere Variante einen Verschachtelungs-Selektor:
div.mainmenu a { }
Fuer die Ausnahme kannst Du immer noch eine Klasse machen:
div.mainmenu a.hi { }

Dann wird der HTML-Quelltext gleich uebersichtlicher.
Mit dem Trennzeichen sieht es dann so aus:
<div class="mainmenu">
 <a class="hi" href="#">Menuepunkt1</a>
    <span class="linktrenner">|</span>
 <a href="#">Menuepunkt1</a>
    <span class="linktrenner">|</span>
 <a href="#">Menuepunkt2</a>
    <span class="linktrenner">|</span>
 <a href="#">Menuepunkt3</a>
</div>

Das Trennzeichen kannst Du auf zwei Arten unsichtbar machen:
1. Variante:
@media screen
  {
   .linktrenner {display:none;}
  }
2. Variante:
indem Du ihm die gleiche Vorder- und Hintergrundfarbe gibst:
.linktrenner { background-color: #aaaaaa; color:#aaaaaa; }
Dann kannst Du es gleich noch fuer Deinen Wunsch-Abstand brauchen:
.linktrenner { background-color: #aaaaaa; color:#aaaaaa;
border-left:2em #aaaaaa; }

Variante 1 ist theoretisch besser, aber offenbar lesen manche
Blinden-Browser es dann auch nicht vor (obwohl das Medium Screen
sie IMHO eigentlich nichts angeht).

Variante 2 ist wohl praktisch besser, bringt aber eine Warnung
des CSS-Validators ein (gleiche Farben).

Gruesse,

Thomas

[Thomas Luethi]

Hallo,

Sorry, kleine Korrektur - es fehlt die Angabe von border-style:

Falsch/unvollstaendig:

.linktrenner { background-color: #aaaaaa; color:#aaaaaa;
border-left:2em #aaaaaa; }

Besser:
.linktrenner
 {
  background-color: #aaaaaa; color:#aaaaaa;
  border-left:2em solid #aaaaaa;
 }

Oder auch so:
.linktrenner
 {
  background-color: #aaaaaa; color:#aaaaaa;
  border-left:1em solid #aaaaaa;
  border-right:1em solid #aaaaaa;
 }

Oder so:
.linktrenner
 {
  background-color: #aaaaaa; color:#aaaaaa;
  border:solid #aaaaaa;
  border-width:0 1em;
 }

Gruesse,

Thomas

[Antje]

Danke für die Infos zur Aufbereitung für Blinde.

Mein Problem ist dadurch aber nicht gelöst.
Und ich will keine festen breiten haben, da das Menü selbst dynamisch aufgebaut ist und seinen Inhalt wechselt. Das wäre mir zu fehleranfällig.

Es ist übrigens der IE 5.0

Und: selbst wenn ich das padding in die mainmenuhi und -lo packe (was es eh ist), reagiert der IE nicht darauf.

Danke,
Antje

[Armin G.]

Tach auch,

Es ist übrigens der IE 5.0

Und bei dem ist die Unterstuetzung fuer padding als "buggy" in allen mir bekannten Listen angegeben.

Und: selbst wenn ich das padding in die mainmenuhi und -lo packe (was es eh ist), reagiert der IE nicht darauf.

Nun ja, der IE 5.0. Beim 5.5er und 6.0er sollte es schon besser gehen.

Gruss,
Armin

[Antje]

Nun ja, der IE 5.0. Beim 5.5er und 6.0er sollte es schon besser gehen.

Dann bräuchte ich einen Workaround. Es muss einfach laufen...

[Ingo]

Hi Antje,
hast Du schon einmal drüber nachgedacht, daß Du das Menü viel besser über eine CSS-formatierte Liste realisieren kannst? das hat einerseits den vorteil, daß die Abstände leicht einzustellen sind und andererseits ist das Ganze ohne Tricks wie unsichtbare Trenner behindertengerecht. Abgesehen davon ist eine Liste auch eine logisch passendere Auszeichnung für ein Menü als aneinandergehängte Links.
falls du dabei hilfe brauchst... hier gibt's ein kleines online-tool:
http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp
freundliche Grüße
Ingo

[Jeena Paradies]

Hallo ,

hast Du schon einmal drüber nachgedacht, daß Du das Menü viel besser über eine CSS-formatierte Liste realisieren kannst? das hat einerseits den vorteil, daß die Abstände leicht einzustellen sind und andererseits ist das Ganze ohne Tricks wie unsichtbare Trenner behindertengerecht. Abgesehen davon ist eine Liste auch eine logisch passendere Auszeichnung für ein Menü als aneinandergehängte Links.

Ach deshalb machen das alle mit Listen! Mensch man lernt nie aus, ich werde das gleich in meine Seite einbauen.

Jeena Paradies

[Jeena Paradies]

Hallo ,

Zwischen den Punkten (Links) sollte ein Trennzeichen stehen.
Fuer die Blinden, denen Webseiten vorgelesen werden.
Steht AFAIK irgendwo in den WCAG-Richtlinien
http://www.w3.org/Consortium/Offices/Germany/Trans/WAI/webinhalt.html
(Du kannst es auch mit CSS wieder unsichtbar machen.)

Welches Zeichen sollte man da nehmen?

| > / - + *

Ich habe bisher immer | benutzt, hab aber keine Ahnung wie das ein Sprachbrowser ausspricht. Hat jemand von euch da erfahrungen?

Gibt es kostenlose Sprachbrowser, die man instalieren kann, um solche Seiten zu testen? Eventuell auch für Linux?

Jeena Paradies

[sschumann]

<div class="mainmenu">
<a class="mainmenuhi" href="#">Menuepunkt1</a>
<a class="mainmenulo" href="#">Menuepunkt1</a>
<a class="mainmenulo" href="#">Menuepunkt1</a>
<a class="mainmenulo" href="#">Menuepunkt1</a>
</div>

Du hast kein Padding zwischen den A's, da padding sich nur auf die DIV-Box bezieht. Vor dem ersten A gibt's sehr wohl ein Padding.

[Thomas J.S.]

Hallo,

ich habe ein Problem mit CSS Formatierung und weiss so recht nicht weiter. Ich hoffe, jemand von Euch kann mir dabei weiterhelfen:

Ich finde es wirklich unverschämt, dass du nicht nur einen neue Thread aufmachst (1), sondern genau auf die selbe Art und Weise wie voher (2) jedermann unnötig schwer machst dir helfen zu können!

1. Dein Thread ist noch immer im Forum:
   [pref:t=58929&m=331038]
   dort habe ich dir sogar (am 01. Oktober 2003, 20:25 )konkrete Vorschläge für den IE 5.0 gemacht und dazugepostet was Microsoft selbst zu Padding und IE 5.0 schreibt.
   (das ich dir nebenbei eine kleine Statistik über die Häufigkeit der IE 5.0 gepostet habe, kannst getrost ignorieren)

2. hier in diesem Thread machst du das selbe wie dort: du sagst es geht mit dem IE nicht. Das ist Blödsinn!
   Warum kannst du nicht gleich in deiner ersten (threaderöffnenden) Posting sagen (VOR ALLEM weil du das ja schon aus deinem anderen Thrad wissen solltest, dass diese Info absolut nötig ist!), dass es sich um den IE 5.0 handelt??
   Da hätten sich die Leute die dir voher wirklich ausfühlich geantwortet haben, auf das eigentliche Problem konzentrieren können.

Thomas

[Thomas J.S.]

Hallo nochmal,

Da ich heute durch Zufall einen alten Rechner reanimieren musste und darauf der IE 5.0 vorhanden war, konnte ich etwas testen:
  a {
   display:inline-block;
   background-image:url(e.gif);
   background-position:left;
   background-repeat:no-repeat;
   padding-left:20px;
   height:13px;
  }

Das funktioniert bei mir mit dem IE 5.0 und mit Firebirds (also auch mit Mozilla).
Die height kannst du z.B. entsprechend dem font-size von <a> setzen.

Hoffe, dass ist das was du gesucht hast.

Grüße
Thomas