nicht angemeldet
/ (CSS) - Netscape 4.x - Image border bei Links entfernen
Hallo zusammen,
habe da gerade mal wieder ein Problem mit Netscape 4.x.
Und zwar geht es um Menübuttons, erstens hatte ich schon das Problem dass sich die Images nicht übereinanderlagernd darstellen lassen wollten. Es sind nämlich Bilder die eigentlich schräg aussehen sollen (am Rand transparent, also gifs) - nämlich so:
____ _____ _____ _____ _____
/____/_____/_____/_____/_____/
Ein einzelnes Bild + Imagemap wollte ich nicht machen, daher habe ich es jetzt mit außenrumgewickelten spans gemacht, auch nicht wirklich schön, aber zumindest funktionierts dann auch im NN (für Verbesserungsvorschläge bin ich natürlich offen).
Allerdings hab ich jetzt ein noch größeres Problem: Ein border="0" ist ja nicht valide, und ohne zeigt der NN für jedes (verlinkte) Image einen grässlichen Border an. Habe im Netz dann eine Lösung gefunden um den Border per CSS auszublenden, funktioniert auch wunderbar, das Problem ist nur, die Bilder sind dann nicht mehr verlinkt, also der Link verschwindet irgendwie komplett. Hab dann sämtliche border-Variationen ausprobiert, aber entweder es wird ein border angezeigt oder die Links sind weg.
Ich schick euch mal meinen Quellcode mit den Styles für den Netscape gleich im Code enthalten (im realen File sind diese ausgelagert und werden durch ein @import CSS für die anderen Browser wieder überschrieben.
Kennt von Euch jemand einen Weg wie ich es machen könnte dass mir der NN die Border nicht anzeigt die Images aber trotzdem verlinkt? Ich komm einfach auf keine Lösung. Border einfach in der Hintergrundfarbe anzeigen wie oft vorgeschlagen wird funktioniert durch die optisch genau aneinanderliegenden Abschrägungen in meinem Fall auch nicht.
Ich hoffe jemand kann helfen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="imagetoolbar" content="no"/>
<style type="text/css">
<!--
html, body {
height:100%;
width:100%;
}
body {
background-color:#FFFFFF;
margin:-8px;
padding:0px;
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size:12px;
color:#333333;
}
#Menu {
margin-top:7px;
margin-left:7px;
}
#Menu1 {
position:absolute;
top:3px;
left:44px;
}
#Menu2 {
position:absolute;
top:3px;
left:166px;
}
#Menu3 {
position:absolute;
top:3px;
left:287px;
}
#Menu4 {
position:absolute;
top:3px;
left:408px;
}
#Menu5 {
position:absolute;
top:3px;
left:529px;
}
#Menu6 {
position:absolute;
top:3px;
left:650px;
}
#Menu7 {
position:absolute;
top:3px;
left:771px;
}
a.MenuLink {
border:0.1px solid #FFFFFF;
}
-->
</style>
</head>
<body>
<div id="Menu">
<span id="Menu1"><a href="#" class="MenuLink"><img src="../../images/menu/aktuelles.gif" width="149" height="28" alt="Aktuelles" class="MenuImg"/></a></span>
<span id="Menu2"><a href="#" class="MenuLink"><img src="../../images/menu/unternehmen.gif" width="148" height="28" alt="Unternehmen" class="MenuImg"/></a></span>
<span id="Menu3"><a href="#" class="MenuLink"><img src="../../images/menu/produkte.gif" width="148" height="28" alt="Produkte" class="MenuImg"/></a></span>
<span id="Menu4"><a href="#" class="MenuLink"><img src="../../images/menu/shop.gif" width="148" height="28" alt="Shop" class="MenuImg"/></a></span>
<span id="Menu5"><a href="#" class="MenuLink"><img src="../../images/menu/kundenservice.gif" width="148" height="28" alt="Kundenservice" class="MenuImg"/></a></span>
<span id="Menu6"><a href="#" class="MenuLink"><img src="../../images/menu/support.gif" width="148" height="28" alt="Support" class="MenuImg"/></a></span>
<span id="Menu7"><a href="#" class="MenuLink"><img src="../../images/menu/partner.gif" width="148" height="28" alt="Partner" class="MenuImg"/></a></span>
</div>
</body>
</html>
Liebe Grüße
sunny
-
hi
ich dine in deiner css-deklaration gar nichts für die auf die bilder angewendete klasse "MenuImg". Wenn die keinen Rahmen haben sollen, hilft in der Regel:
.MenuImg {border: 0;}
so long
Ole
(8-)>--
Trotz Equalizer und Compressor, der Sound wird matschig unn nett
bässer!-
Hallo!
ich dine in deiner css-deklaration gar nichts für die auf die bilder angewendete klasse "MenuImg". Wenn die keinen Rahmen haben sollen, hilft in der Regel:
.MenuImg {border: 0;}
Es gibt im Netscape 4 Stylesheet (und nur das habe ich ja gepostet weil ich nur da ein Problem habe, sonst wird es verwirrender als nötig ;-) ) keine Deklaration für die Klasse weil sie sich nicht auswirkt. Jedenfalls nicht das border:0; NN zeigt die Link-border trotzdem an - wär schön wenns so einfach wär ...
Liebe Grüße
sunny-
hi
da der 4.x alles andere als modern ist, denke ich, wirst du, wenn dieser mit der CSS deklaration nichts anfangen kann, auf border=0 zurückgreifen müssen.
so long
Ole
(8-)>--
Trotz Equalizer und Compressor, der Sound wird matschig unn nett
bässer!-
Hallo!
da der 4.x alles andere als modern ist, denke ich, wirst du, wenn dieser mit der CSS deklaration nichts anfangen kann, auf border=0 zurückgreifen müssen.
Ja, wie in meinem Ausgangsposting beschrieben möchte ich das aber _nicht_ machen da die Seite dann nicht mehr valide ist. Deswegen suche ich hier nach einer Lösung, es muss ja einen Weg geben ... Der Border verschwindet ja auch schon nur sind dann leider die Links nicht mehr aktiv und genau das versuche ich jetzt zu lösen.
Jedenfalls hoffe ich dass es irgendeine Lösung gibt die ich nur noch nicht entdeckt habe ...
Liebe Grüße
sunny-
Hi!
border=0
[...] da die Seite dann nicht mehr valide ist.Wer sagt denn sowas? Das border-Attribut beim Element img ist doch in den Versionen transitional und frameset erlaubt.
Gruß
Martin
-
Hallo,
border=0
[...] da die Seite dann nicht mehr valide ist.Wer sagt denn sowas? Das border-Attribut beim Element img ist doch in den Versionen transitional und frameset erlaubt.
Mein Dokument ist aber strict ... da muss es doch auch eine CSS-Möglichkeit geben ... *tüftel*
Liebe Grüße
sunny-
Hi!
Mein Dokument ist aber strict ... da muss es doch auch eine CSS-Möglichkeit geben ... *tüftel*
Hallo? Du sprichst vom NN 4 und von CSS - denk mal drüber nach. Und wo ist das Problem, den Dokumenttyp umzuändern, wenn du schon auf die NN4-Nutzer Rücksicht nehmen willst? Der unterstützt CSS nunmal sehr unzureichend. Und wenn dein einziges Problem im Netscape die Rahmen um die Bilder, sei froh! Bei mir sah es so grässlich aus, dass ich dem guten alten Communicator glatt das CSS vorenthalte - dann stellt er wenigstens pures HTML dar (das ist zumindest benutzbar).
Gruß
Martin
-
-
-
-
-
-
-
Hallo,
Ich hoffe jemand kann helfen:
mal schauen,
a.MenuLink {
border:0.1px solid #FFFFFF;das klappt wohl sowieso nicht weil Netscape 4 Links als
Blockelement nicht mehr richtig ausführt.
Formatierungen also z.B. besser über eine Liste durchführen.Ohne diese Anweisung lassen sich dann die Link-Rahmen wenigstens
umfärben CSS für alle Browser / IMG border:0:a.MenuLink img{color:#fff}
Grüsse
Cyx23
-
Hi Cyx23,
danke für Deine Antwort!
Ich hoffe jemand kann helfen:
mal schauen,
a.MenuLink {
border:0.1px solid #FFFFFF;das klappt wohl sowieso nicht weil Netscape 4 Links als
Blockelement nicht mehr richtig ausführt.Ja, genau das ist das Problem ...
Ohne diese Anweisung lassen sich dann die Link-Rahmen wenigstens
umfärben CSS für alle Browser / IMG border:0:Ich weiß, aber wie beschrieben ist diese Lösung auch nicht zufriedenstellend da sie mein Menü durch die (optisch) schräge Aneinanderordnung der Images ziemlich zerhacken ... siehe Bild unten.
Das müsste man doch irgendwie hinkriegen können?
Hab schon mit sämtlichen border-Varianten etc. herumgespielt aber sobald die Border-Eigenschaft der Links verändert wird sind die Links ja leider weg, schaut dann zwar gut aus, funktioniert aber nicht mehr ...Und beim Bild direkt will er sich nicht wegkriegen lassen.
Liebe Grüße
sunny-
Hi,
Ich weiß, aber wie beschrieben ist diese Lösung auch nicht zufriedenstellend da sie mein Menü durch die (optisch) schräge Aneinanderordnung der Images ziemlich zerhacken ... siehe Bild unten.
warum nimmst Du auch die Hintergrundfarbe von body anstatt #f70?
freundliche Grüße
Ingo-
Guten Morgen!
warum nimmst Du auch die Hintergrundfarbe von body anstatt #f70?
Naja, recht viel besser sieht es dann ja auch nicht aus da man durch den Farbverlauf in den Menübuttons den Rahmen immer sieht, und außen rum schauts in der Farbe dann auch noch schrecklich aus - siehe Bild unten. Die äußeren Rahmen könnte man zwar eventuell mit weißen Gifs überlagern, aber so wirklich gefällt mir das auch nicht ...
Lässt sich denn der NN nicht sonst irgenwdie austricksen?
Störrisch wie immer ...Liebe Grüße
sunny-
Hi,
Naja, recht viel besser sieht es dann ja auch nicht aus
naja, etwas schon...
Lässt sich denn der NN nicht sonst irgenwdie austricksen?
doch - da fällt mir noch eine nette Möglichkeit ein. Du kannst einen Fehler des IE ausnutzen und ihm andere Grafiken vorsetzen, die einen Rand besser vertragen. Und zwar nimmt der NN4 bei der Referenzierung das Verzeichnis des HTML-Dokuments als Basis und nicht das der CSS-Datei. Alternativ köme natürlich auch eine CSS-Weiche in Betracht - am besten Element#ID{} bzw. Element.Klasse{}.
freundliche Grüße
Ingo-
Hallo!
doch - da fällt mir noch eine nette Möglichkeit ein. Du kannst einen Fehler des IE ausnutzen und ihm andere Grafiken vorsetzen, die einen Rand besser vertragen.
Ja die Möglichkeit hätte ich als letzten Ausweg in Betracht gezogen. Allerdings hat mir Cyx23 gerade einen super Lösungsvorschlag gepostet - per clip können die Rahmen einfach weggeschnitten werden! Funktioniert super - jetzt sieht es im NN 4 genauso aus wie in den "guten" Browsern! :-)
Danke für eure Hilfe!
Liebe Grüße
sunny
-
-
-
-
Hallo sunny,
Hab schon mit sämtlichen border-Varianten etc. herumgespielt aber sobald die Border-Eigenschaft der Links verändert wird sind die Links ja leider weg, schaut dann zwar gut aus, funktioniert aber nicht mehr
da bleiben immer noch ein paar mögliche Klimmzüge :-)
So könntest du per onClick bzw. JavaScript sowohl am <img> als auch
beim umgebende <div> den Link ausführen (location.href), nachteilig
dass der Maus-Cursor sich nicht verändert.Oder die Position der Divs verwenden um passend transparente layer
mit neuem Link drüberzulegen.Ideal scheint mir aber der Einsatz von clip beim umgebenden Div:
#Menu1,#Menu2,#Menu3,#Menu4,#Menu5,#Menu6,#Menu7
{clip:rect(2px, 148px, 30px, 2px);}Sah bei meinem Test mit einfarbigen Bildern schon gut aus.
Grüsse
Cyx23
-
Hallo Cyx23,
Ideal scheint mir aber der Einsatz von clip beim umgebenden Div:
#Menu1,#Menu2,#Menu3,#Menu4,#Menu5,#Menu6,#Menu7
{clip:rect(2px, 148px, 30px, 2px);}Das ist ja genial! Noch ein bisschen mit den Werten gespielt und es sieht perfekt aus!
Wow danke - wieder was gelernt! :-)
Liebe Grüße an den Netscape4-Experten ;-)
sunny
-
-
-