Probleme mit CSS-Menü in verschiedenen Browsern

jump.blueberry · 24. Nov. 2005

Hallo liebe Experten,

ich habe es jetzt endlich geschafft ein schönes W3C-komformes CSS-menü zu zaubern.
Jetzt macht es nur einige Probleme in Firefox und IE!
[edit] in ein dokument zusammengefasst:[/edit]

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test_css-seite</title>
<style type="text/css">

#head { /*seitenhead*/
background-image:url(bilder/navi/head.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
margin: 0px;
padding: 0px;
width: 350px;
height: 600px;
float:left;
position: relative;
top:0px;
left:0px;
}

#navi{ /*Navi*/
position: relative;
top:0px;
left:120px;
width:150px;
padding-top:135px;
}

a:link .navipunkt{
font-size:16px;
font-weight:600;
color:#ff6600;
text-decoration:none;
}

a:visited .navipunkt{
font-size:16px;
font-weight:600;
color:#ff6600;
text-decoration:none;
}

a:hover .navipunkt{
font-size:16px;
font-weight:600;
color:#0F8ED5;
text-decoration:none;
}

a:active .navipunkt{
font-size:16px;
font-weight:600;
color:#0F8ED5;
text-decoration:none;
}

.naviblock{
position:relative;
left:0px;
width:350px;
display:block;
text-decoration:none;
}

.bgblock{
float:left;
position:relative;
top:0px;
left:0px;
height:100%;
display:block;
}


#naviNews{
position:absolute;
top:105px;
height:50px;
z-index:6;
}

#bgNews{ 
width:135px;
margin-right:60px;
}

a:hover #bgNews{ 
background-image:url(bilder/navi/news.gif);
background-repeat: no-repeat;
background-position: 0px -105px;
}

#naviNews .navipunkt{
position:relative;
top:30px;
}

#naviPreise{
position:absolute;
top:230px;
height:100px;
z-index:2;
}

#bgPreise{ 
width:135px;
margin-right:10px;
}

a:hover #bgPreise{ 
background-image:url(bilder/navi/preise.gif);
background-repeat: no-repeat;
background-position: 0px -230px;
}

#naviPreise .navipunkt{
position:relative;
top:70px;
}

#naviImpressum{
position:absolute;
top:255px;
height:150px;
z-index:1;
}

#bgImpressum{ 
width:135px;
margin-right:0px;
}

a:hover #bgImpressum{ 
background-image:url(bilder/navi/impressum.gif);
background-repeat: no-repeat;
background-position: 0px -255px;
}

#naviImpressum .navipunkt{
position: absolute;
top:90px;
}

</style>
</head>
<body>
  <div id="head">
    <a href="#news" id="naviNews" class="naviblock" > <span id="bgNews" class="bgblock"></span> <span class="navipunkt">News</span></a>  
		<a href="#preise" id="naviPreise" class="naviblock" > <span id="bgPreise" class="bgblock"></span> <span class="navipunkt">Preise</span></a> 
	<a href="#Impressum" id="naviImpressum" class="naviblock"  > <span id="bgImpressum" class="bgblock"></span> <span class="navipunkt">Impressum / Kontakt</span></a> 
	</div>
</body>
</html>

Nun zu meinen Problemen!
Firefox (Win & Mac) & Safari
Ein Navipunkt ist als link unterstrichen, obwohl css das klar untersagt. (blau/violett)
In der Navigation schweben unzusammenhängende blaue und violette linien herum. (1px)

Als ich noch <div>-tags statt den <span>-tags benutzt habe ist das nicht so gewesen.
Aber da war es nicht "richtiges xhtml" (w3c)

IE (nur Windows)
Die hover-hintergrundbilder werden zwar eingeblendet, aber verschwinden nicht mehr.
Kann man dagegen etwas tun?

Alles in allem sieht die Seite nur im IE am Mac gut aus... und den benutzt ja wohl so gut wie niemand!

Danke im Voraus für eure Hilfe

dkdenz · 24. Nov. 2005

Es wäre sehr aufmerksam von Dir gewesen,
wenn Du Dir diesen Thread mal durchgelesen hättest:
http://forum.jswelt.de/showthread.php?t=26808

Naja, egal.

Einmal:

Code:

#naviImpressum{
position:absolute;
top:255px;
height:150px;
z-index:1;
text-decoration:none;
}

Die Linien kriege ich jetzt auf die Schnelle auch nicht weg.

jump.blueberry · 24. Nov. 2005

Danke für den Hinweis...
Hab einfach

Code:

text-decoration:none;

zur class ".naviblock" hinzugefügt und die linien sind weg!
jippee!

Im IE ging die seite vorher, wenn man "links unterstreichen" ->"beim darauf zeigen" in den internetoptionen auswählte!
Jetzt werden die Bilder bei keiner option ausgeblendet.
Scheiß Browser!

dkdenz · 24. Nov. 2005

Guter Mann...

Ist Dein Quelltext da oben jetzt aktualisiert?
Soll ich mal in FireFox, Opera und Konqueror auf Linux testen?

jump.blueberry · 25. Nov. 2005

dkdenz schrieb:
Guter Mann...

nur 50% richtig:
Gut - danke für die Blumen
Mann - nicht wirklich

Ist Dein Quelltext da oben jetzt aktualisiert?
Soll ich mal in FireFox, Opera und Konqueror auf Linux testen?

Ja ist aktualisiert!

aktueller Funktionsbericht
Windows:
Firefox - ok
IE (6.0.2900.2180) - Hintergrundbilder werden nicht ausgeblendet
Mac (osx 10.4.3):
Firefox - ok
IE - ok
Safari - ok

Würd mich über einen Ergänzungstest freuen
Danke

jump.blueberry · 01. Dez. 2005

Kann mir bitte jemand helfen?
Geht "a:hover mit background-image" überhaupt im IE?

dkdenz · 01. Dez. 2005

jump.blueberry schrieb:
Geht "a:hover mit background-image" überhaupt im IE?

Auf alle Fälle. Wenn nix falsch gemacht worden ist.
Beachte: es geht nur mit a:hover...

pit-r · 01. Dez. 2005

Moin!

Ja - das geht...

Ahoi - Pit

Edit - @dkdenz:

jump.blueberry · 01. Dez. 2005

aha, also es geht?

So hier mal ein kleiner code:

HTML:

<html><head><title>Test</title>
<style type="text/css">
#bild{
display:block;
background-image:url(../bilder/bild.jpg);
background-repeat:no-repeat;
width:220px;
height: 200px;
}
a:hover #bild{
background-image:url(../bilder/bild_over.jpg)
}
</style></head>
<body>
    <a href="#"><span id="bild"></span></a>
</body></html>

Okay, was mache ich dann falsch, wenn das over- Bild "onmouseout" stehenbleibt?

pit-r · 01. Dez. 2005

Moin!

jump.blueberry schrieb:
Okay, was mache ich dann falsch, wenn das over- Bild "onmouseout" stehenbleibt?

Wenn ich das diplomatisch beantworte: nix - dann isses IE, der was falsch macht, da der mit dem span nix anfangen kann bzgl. hover...

Ahoi - Pit

jump.blueberry · 01. Dez. 2005

pit-r schrieb:
Moin!Wenn ich das diplomatisch beantworte: nix - dann isses IE, der was falsch macht, da der mit dem span nix anfangen kann bzgl. hover...

Ahoi - Pit

aha, wenn ich aber div nehm, dann is es w3c-technisch nicht richtig...
Was hab ich denn für alternativen?

pit-r · 01. Dez. 2005

jump.blueberry schrieb:
aha, wenn ich aber div nehm, dann is es w3c-technisch nicht richtig...
Was hab ich denn für alternativen?

IE kann hover nur bei Links. Wodrin der Link steht ist egal, nicht jedoch, was drin steht. Davon abgesehen kann man auch einen div in einen a-Tag packen und das auf valide Art und Weise, das würde Dir aber nicht helfen.

Ahoi - Pit

Edit (hätte ja wenigstens was Konstruktives posten können):

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Beispiel</title>
<style type="text/css">
<!--
a{
display:block;
background-image:url(1.gif);
background-repeat:no-repeat;
width:220px;
height: 200px;
}
a:hover{
background-image:url(2.gif)
}
-->
</style>
</head>
<body>
<a href="#"><span id="bild"></span></a>
</body>
</html>

dkdenz · 01. Dez. 2005

@jump.blueberry: Da stand's doch schon.

dkdenz schrieb:
Beachte: es geht nur mit a:hover...

Probleme mit CSS-Menü in verschiedenen Browsern

jump.blueberry

New member

dkdenz

New member

jump.blueberry

New member

dkdenz

New member

jump.blueberry

New member

jump.blueberry

New member

dkdenz

New member

pit-r

Guest

jump.blueberry

New member

pit-r

Guest

jump.blueberry

New member

pit-r

Guest

dkdenz

New member