Gübeli Michael: Javascript und CSS-Style

Also ich habe ja wirklich gesucht und beim besten Willen nix gefunden (also sorry falls die frage schon beantwortet ist, über Hilfe würde ich mich aber trotzdem freuen).

PROBLEM: Netscape

Im Explorer zeigt sich die Seite wie sie sollte, aber leider bei Netscape 4.04  werden die CSS (Sollte alles in der Schriftart Comic Sans MS sein) scheinbar ignoriert.
Wo muss ich den Schriftencode einsetzen damit Netscape ebenfalls Comic Sans MS anzeigt ?

Anzuschauen unter:

http://www.klv-sg.ch/test_dropdown_links_klv_l.html

HTML&JAVASCRIPT-CODE:

<html><head>
<title>Navigation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style>
<!--
body { font-size:12pt; font-family:Comic Sans MS; word-spacing:2mm; color:#000000;
}
a:link { color:#000000;font-family:Comic Sans MS}
a:visited { color:#000000;font-family:Comic Sans MS}
a:active { color:#0000ff;font-family:Comic Sans MS}

-->
</style>

<script language="JavaScript1.2">

/*
Drop down menu link
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href=test.htm>Menu link here</a><br>'
menu1[1]='<a href=test.htm>Menu link here</a><br>'
menu1[2]='<a href=test.htm>Menu link here</a><br>'
//Contents for menu 2
var menu2=new Array()
menu2[0]='<a href=test.htm>Menu link here</a><br>'
menu2[1]='<a href=test.htm>Menu link here</a><br>'
menu2[2]='<a href=test.htm>Menu link here</a><br>'

</script>

<style>
<!--

.iewrap1{
position:relative;
height:30px;
font-family:Comic Sans MS;
font-size:12pt;
}
.iewrap2{
position:absolute;
font-family:Comic Sans MS;

}
#dropmenu0, #dropmenu1{
visibility:hide;
z-index:100;
font-family:Comic Sans MS;
}

ilayer{font-family:Comic Sans MS}

layer{font-family:Comic Sans MS}

-->
</style>

</head>

<body background="img/nav_bkg_wustblau_klv3.gif" topmargin="0%" leftmargin="0">

<br>
<br>
<br>
<br>

<script language="JavaScript1.2">
//reusable/////////////////////////////
var zindex=100
function dropit2(whichone){
if (window.themenu&&themenu.id!=whichone.id)
themenu.style.visibility="hidden"
themenu=whichone
if (document.all){
themenu.style.left=document.body.scrollLeft+event.clientX-event.offsetX
themenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+18
if (themenu.style.visibility=="hidden"){
themenu.style.visibility="visible"
themenu.style.zIndex=zindex++
}
else{
hidemenu()
}
}
}

function dropit(e,whichone){
if (window.themenu&&themenu.id!=eval(whichone).id)
themenu.visibility="hide"
themenu=eval(whichone)
if (themenu.visibility=="hide")
themenu.visibility="show"
else
themenu.visibility="hide"
themenu.zIndex++
themenu.left=e.pageX-e.layerX
themenu.top=e.pageY-e.layerY+19
return false
}

function hidemenu(whichone){
if (window.themenu)
themenu.style.visibility="hidden"
}

function hidemenu2(){
themenu.visibility="hide"
}

if (document.all)
document.body.onclick=hidemenu

//reusable/////////////////////////////
</script>

<!----------Menu 1 starts here---------->

<ilayer height=35px>
<layer visibility=show>
<span class=iewrap1>
<span class=iewrap2 onClick="dropit2(dropmenu0);event.cancelBubble=true;return false"><font face=COMIC><b><a href="alternate.htm" onClick="if(document.layers) return dropit(event, 'document.dropmenu0')">M Hier klicken 1</a></b></font>
</span>
</span>
</layer>
</ilayer><br>

<!----------Menu 1 ends here---------->

<!----------Menu 2 starts here---------->

<ilayer height=35px>
<layer visibility=show>
<span class=iewrap1>
<span class=iewrap2 onClick="dropit2(dropmenu1);event.cancelBubble=true;return false"><font face=COMIC><b><a href="alternate.htm" onClick="if(document.layers) return dropit(event, 'document.dropmenu1')">M Hier klicken 2</a></b></font>
</span>
</span>
</layer>
</ilayer><br>

<!----------Menu 2 ends here---------->

<div id=dropmenu0 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightblue;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu0.style.padding="4px"
for (i=0;i<menu1.length;i++)
document.write(menu1[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu0.captureEvents(Event.CLICK)
document.dropmenu0.onclick=hidemenu2
}
</script>

<div id=dropmenu1 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightblue;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu1.style.padding="4px"
for (i=0;i<menu2.length;i++)
document.write(menu2[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu1.captureEvents(Event.CLICK)
document.dropmenu1.onclick=hidemenu2
}
</script>

</body>
</html>

  1. Moin Michael,

    » Im Explorer zeigt sich die Seite wie sie sollte, aber leider bei Netscape 4.04  werden die CSS (Sollte alles in der Schriftart Comic Sans MS sein) scheinbar ignoriert.

    Wo muss ich den Schriftencode einsetzen damit Netscape ebenfalls Comic Sans MS anzeigt ?

    Anzuschauen unter:

    http://www.klv-sg.ch/test_dropdown_links_klv_l.html

    Der Link hätte schon gereicht ;-)

    Hast Du schon mal daran gedacht, die Schrift in Anführungsstriche zu setzen ? Dann sollte es m.E. klappen.

    http://www.w3.org/TR/REC-CSS1#font-family

    Liebe Grüße

    Swen

  2. Hallo Michael!

    Hmm ... meine NS 4.6 zeigt es richtig an.
    Nicht desto trotz, aussehen sollte es so:
    font-family:"Comic Sans MS";
    Natürlich du setzt damit voraus, daß der Besucher deiner Seite diese Schrifart installiert hat.
    Du solltest zumindest eine oder zwei Ersatzschriftarten auch angeben.
    Du verwendest zusätzlich <font face=comic>, also entweder CSS oder <font>.

    Ein Paar HTML fehler haben sich bei dir auch eingeschlichen:
    z.B.:
    <ilayer height=35px> ---> ohne px schreiben.
    usw.

    Grüße
    Thomas