nicht angemeldet
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