border-left bei inline <li>s... mit IE 5
Matthias Huttar
- css
mal ein freundliches hallo an alle ;)
Nunja, ich habe folgendes problem, ich soll ne statische website für ein unternehmen machen, die in drei sprachen übersetzt werden soll (eventuell kommen im nachhinein noch mehr sprachen dazu - insofern sollte der Quelltext möglichst übersichtlich sein)
Mein exaktes problem ist nun das menü, welches dem Corporate Design angepasst sein muss. (dieses besteht aus einer horizontalen roten linie, mit Logo und überschrift darüber.
Nun hatte ich eigentlich vor, von dieser horizontalen roten linie striche nach unten gehen zu lassen, die vor jedem menü item stehen.
Natürlich geht das jetzt mit einer Tabelle mit extrem viel zellen(eine 1pt breit und roter hintergrund, dazu noch ein transparentes gif drin, dann wieder eine zelle in der ein menüitem stehen soll, etc.) --> das ist mir ehrlichgesagt zu umständlich. Alternative sind natürlich <hr>s mit maximaler größe und 1px breite in rot, nur die idee ist auch nicht umbedingt eine tolle lösung.
DIE lösung meiner meinung nach ist es, <li> tags einzubinden, diese inline zu setzen und dem li tag das attribug border-left: 1px solid red zu geben. Ansich ne nette idee, nur leider mag das IE 5.0 nicht - sobald es sich um inline - elemente handelt zeigt der leider überhaupt keinen border mehr an :(
Meine Frage nun ist, ob vielleicht irgendjemand von euch eine idee hat, wie man das problem elegant umgehen könnte...
mein derzeitiger code für die tabelle (wird auch in Mozilla korrekt angezeigt) sieht wie folgt aus:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="99%"><h1>CMS Vienna</h1></td>
<td>LOGO</td>
</tr>
<tr>
<td height="1" colspan="2" class="redline"><img src="img/transp.gif"></td>
</tr>
<td>
<!-- Navigation -->
<a href="#" class="headlink">Die Ausgangssituation</a>
<li class="m"><a href="#" class="headlink">Unser Angebot</a></li>
<li class="m"><a href="#" class="headlink">Ansprechpartner</a></li>
<li class="m"><a href="#" class="headlink">Kontakt</a></li>
<li class="m"><a href="#" class="headlink">Büros</a></li>
</td>
<tr>
</tr>
</table>
das <li> stylehseet ist:
li.m {display: inline; border-left: 1ot solid red; padding-left: 2pt; spacing-right: 5pt;}
danke im vorraus für die mühen, das alles zu lesen, mfg
Matthias Huttar
Hallo Matthias,
li.m {display: inline; border-left: 1ot solid red; padding-left: 2pt; spacing-right: 5pt;}
^^
Tippfehler?
Viele Grüße
Frank
nein, leider kein tippfehler.. ich hatte die css attribute schon wieder gelöscht, und hab sie deshalb nur aus dem kopf abgetippt.. ich hab das problem jetzt mit einer Tabelle gelöst, von der man jeweils nur den linken Rahmen sieht.
li.m {display: inline; border-left: 1ot solid red; padding-left: 2pt; spacing-right: 5pt;}
^^
Tippfehler?
Hallo nochmal,
ich hab das problem jetzt mit einer Tabelle gelöst, von der man jeweils nur den linken Rahmen sieht.
Es geht aber auch ohne Tabelle und ohne inline-Elemente, wie Du hier http://diveintomark.org/public/tabs-example.html sehen kannst.
Ob der IE 5.0 das korrekt anzeigen kann, weiß ich leider nicht; hab' keinen zum Testen da.
Viele Grüße
Frank
Hi,
<td>
<!-- Navigation -->
<a href="#" class="headlink">Die Ausgangssituation</a>
<li class="m"><a href="#" class="headlink">Unser Angebot</a></li>
li ist ausschließlich in ul und ol-Elementen erlaubt, aber nicht in td
das <li> stylehseet ist:
li.m {display: inline; border-left: 1ot solid red; padding-left: 2pt; spacing-right: 5pt;}
ot ist keine zulässige Einheit. spacing-right ist keine CSS-Eigenschaft.
cu,
Andreas
Hi
li ist ausschließlich in ul und ol-Elementen erlaubt, aber nicht in td
ja, allerdings nützt dies auch nichts, da generell bei keinen elementen die als inline behandelt werden kein rahmen funktioniert...
ot ist keine zulässige Einheit. spacing-right ist keine CSS-Eigenschaft.
jepp, ot ist auch nur ein tippfehler, in wirklichkeit ist es pt gewesen, hab das allerdings nicht kopiert sondern neugetippt, weil ich die eigenschaften in dem originaldokument inzwischen so weit verändert hatte, das neutippen einfacher war und daran, dass spacing-right keine Eigenschaft ist, sollte es eigentlich nicht liegen, dass die rahmen nicht angezeigt werden.
mfg
Matthias