Seltsame Linkeigenschaften bei Firefox und Opera

archaja · User [**User**] Anmeldung: 24.06.06 Beiträge: 17 Wohnort: Esslingen/ ...

Hallo!

Ich bestle gerade an einer Seite mir verschiedenen CSS Boxen.
Dabei gibt es ein fixes Hintergrundbild (body) das nicht über die ganze Seite geht und darüber eine Nav-Box und eine (scrollbare) Inhaltsbox.
Wenn ich nun in der Inhaltsbox Links anbringe, verändert sich deren Hintergrund (rund um die Schrift) je nachdem, ob unter der Box nur weißer Hintergrund ist oder das Bild. Beim Bild wird plötzlich die Umgebung um den Link durchsichtig und
das Hintergrundbild scheint durch (Firefox und Opera).
Was ist da zu machen?
Bei IE 5.5 wird das Ganze völlig anders interpretiert (auch nicht so, wie ich es gerne hätte).
Background-color hilft auch nichts.

Die Seite ist zu finden unter:

http://archaja2.cjb.cc/testseite2.html

meine CSS-Datei:

/* DATEI: labyrinth.css */

body, p a {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black;
background:url(pics/hintergrund.jpg); background-repeat:no-repeat; background-attachment:fixed; background-position: left
min-width: 40em; /* Mindestbreite verhindert Anzeigefehler in modernen Browsern */
z-index: 1;
}

html {
padding: 0;
}

body {
margin: 0; padding: 0;
}

/* für feste Kopfzeile */

#fixiertkopf {
position: absolute;
top: 0.1em; left: 0em;
width: 98%;
font-size: 1.5em;
margin: 0.5em; padding: 0.3em;
text-align: center;
background-color: #fed;
border: 2px ridge gray;
}

html>body #fixiertkopf { /* nur fuer moderne Browser! */
position: fixed;
}

#kopfzeile {
font-size: 1em;
margin: 0 0 1.2em; padding: 0;
}

/* für Textinhalt */

#Inhalt {
margin-left: 17em;
margin-right 19em;
padding: 0 1em;
border-left: 2px ridge gray; border-top: 2px ridge gray; border-right: 2px ridge gray; border-bottom: 2px ridge gray;
background-color: #FFFF99;
background-repeat: repeat; background-attachment:fixed; background-position:center
}

* #Inhalt { /* versteckt vor Netscape 4 */
background-color: #FFFF99;
background-repeat: repeat; background-attachment:fixed; background-position:center
}

#Inhalt h2 {
font-size: 1.2em;
margin: 2em 5% 2em;
color: maroon;
border-bottom: 1px solid silver;
}
#Inhalt p {
font-size: 1,5em;
margin: 1em 0em;
color: maroon;
}

#Inhalt #Fusszeile {
font-size: 0.9em;
margin: 8em 0 5 0;
padding: 0.1em;
text-align: center;
background-color: #fed; border: 1px solid silver;
}

h1 {
font-size: 1.5em;
margin: 0.5em; padding: 0.3em;
text-align: center;
background-color: #fed;
border: 2px ridge gray;
}

h5 {
font-size: 1.5em;
margin: 0.5em; padding: 1em;
text-align: center;
background-color: #white;
border: none;
}

/* für Navigationsbox! */

#fixiertnavi {
position: absolute;
top: 4.5em; left: 0.8em;
width: 15em;
background-color: white;
border: 1px solid silver;
padding: 0;
margin: 0;
}

html>body #fixiertnavi { /* nur fuer moderne Browser! */
position: fixed;
}

#Navigation { /* wichtig für die Positionierung der Bilder innerh. des Rahmens */
font-size: 0.83em;
margin: 0 0 1.2em; padding: 0;
}
/* für die einzelnen Buttons = für jeden Button eine Nummer vergeben */

.button1 {
width:13.5em;
height:5.8em;

}
.button1 a:link {
width:13.5em;
height:5.8em;
background: url(pics/homoeop1.gif);
background-repeat:no-repeat;
display:block;

}
.button1 a:visited {
width:13.5em;
height:5.8em;
background:url(pics/homoeop1.gif);
background-repeat:no-repeat;
display:block;

}
.button1 a:hover {
width:13.5em;
height:5.8em;
background: url(pics/homoeop2.gif);
background-repeat:no-repeat;
display:block;
}

.button2 {
width:13,5em;
height:5.8em;
}
.button2 a:link {
width:13,5em;
height:5.8em;
background: url(pics/ayurv1.gif);
background-repeat:no-repeat;
display:block;
}
.button2 a:visited {
width:13,5em;
height:5.8em;
background:url(pics/ayurv1.gif);
background-repeat:no-repeat;
display:block;
}
.button2 a:hover {
width:13,5em;
height:5.8em;
background: url(pics/ayurv2.gif);
background-repeat:no-repeat;
display:block;
}

.button3 {
width:13,5em;
height:5.8em;
}
.button3 a:link {
width:13,5em;
height:5.8em;
background: url(pics/polaer1.gif);
background-repeat:no-repeat;
display:block;
}
.button3 a:visited {
width:13,5em;
height:5.8em;
background:url(pics/polaer1.gif);
background-repeat:no-repeat;
display:block;
}
.button3 a:hover {
width:13,5em;
height:5.8em;
background: url(pics/polaer2.gif);
background-repeat:no-repeat;
display:block;
}

.button4 {
width:13,5em;
height:5.8em;
}
.button4 a:link {
width:13,5em;
height:5.8em;
background: url(pics/.gif);
background-repeat:no-repeat;
display:block;
}
.button4 a:visited {
width:13,5em;
height:5.8em;
background:url(pics/.gif);
background-repeat:no-repeat;
display:block;
}
.button4 a:hover {
width:13,5em;
height:5.8em;
background: url(pics/.gif);
background-repeat:no-repeat;
display:block;
}

/* für allgemeine Links */

a:link {
text-decoration:none;
font-weight:bold; color:#CC0033;
z-index: 2;
}

a:visited {
text-decoration:none;
font-weight:bold;
color:#800000;
}

a:hover {
text-decoration:none;
font-weight:bold;
font-style: italic;
color:#66CC00;
}

a:active {
text-decoration:none;
font-weight:bold;
color:#CC9933;
}

a:focus {
text-decoration:none;
font-weight:bold;
color:#FF9966;
}

Danke

Archaja

800XE · Bekannter [**Mod**] Anmeldung: 24.10.04 Beiträge: 1298 Wohnort: Speyer

archaja · Verfasst am: 19.03.2007, 23:00 Titel:

Hallo!

Verstehe Deine Antwort nicht ganz. Mein Problem liegt weniger im IE (der wenigstens nicht den Hintergrund durchscheinen lässt) sondern vielmehr in Firefox und Opera.
Und was heißt: Schrift ist immer durchscheinend? Schrift hat ja eine eigene Farbe, nur der Raum direkt um die Schrift herum wird irgendwie durchscheinend. Und dort hätte ich gerde eine Farbe und nicht das Bild, das hier eigentlich versteckt sein sollte.

Danke

archaja

800XE · Verfasst am: 20.03.2007, 00:45 Titel:

800XE · Bekannter [**Mod**] Anmeldung: 24.10.04 Beiträge: 1298 Wohnort: Speyer

archaja · Verfasst am: 22.03.2007, 16:38 Titel:

Hallo!

Hab das jetzt mal versucht. Hmmmm, passieren witzige Sachen:

Wenn ich nur background-color zu a:link dazumache, bekomme ich die Hintergrundfarbe, aber nur dort, wo KEIN Bild unterlegt ist. Beim Bild verschwindet sie wieder.
Wenn ich nun bei Body das a weglasse habe ich den gewünschten background-color, dafür ist aber das Hintergrundbild nun gänzlich durchscheinend zu sehen beim normalen Text. Interessanter Effekt, aber wieder nicht das gewünschte.

Im IE sieht es gänzlich verheerend aus, völlig unbrauchbar.

Das scheint nicht die Lösung zu sein. Vielleicht habt Ihr noch weitere Ideen, ich fühle mich einigermaßen hilflos.

danke
archaja

800XE · Verfasst am: 22.03.2007, 16:49 Titel:

archaja · Verfasst am: 25.03.2007, 17:33 Titel:

Hallo!

Danke, das war´s! Jetzt machen die Browser, was ich möchte.
Das mit den Layern war mir schon klar. Es war einer meiner Versuche, das Problemchen in den Griff zu bekommen, hatte nur vergessen, es wieder rückgängig zu machen.

archaja

thepiep · Verfasst am: 25.03.2007, 18:34 Titel:

nebenbei, layer und divs sind NICHT das gleiche - layer sind was netscape spezifisches und werden kaum benutzt...