IE / FF Darstellungsproblem (rollover)

kleinerna77 · 09.03.2009

Hallo User,
ich bin neu hier und dachte, evtl. hat jemand einen Tipp für mein Problem.

Zu dem folgendes:

Ich habe mir ein 5-teiliges Rollover gebastelt, in dem ich jeweils ein Bild eigenständig anklicken kann. Beim überfahren mit der Maus färbt sich das graue Bild bunt. Soweit so gut, das hab ich - als blutiges html / css Anfängerin - auch halbwegs hinbekommen :uhm: Die Anordnung habe ich erstmal über frames gelöst (nutzt man das heute noch sehr oder eher tabellen)?

Hier ist der framecode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>index</title>
</head>
<frameset cols="15%,14%,14%,14%,14%,14%,15%" frameborder="0" border="0">
<frame src="leer.htm" name="leer" srcolling="no" noresize>
<frame src="Bild1.htm" name="Bild1" scrolling="no" noresize>
<frame src="Bild2.htm" name="Bild2" scrolling="no" noresize>
<frame src="Bild3.htm" name="Bild3" scrolling="no" noresize>
<frame src="Bild4.htm" name="Bild4" scrolling="no" noresize>
<frame src="Bild5.htm" name="Bild5" scrolling="no" noresize>
<frame src="leer1.htm" name="leer1" scrolling="no" noresize>
</frameset>
<body>
</body>
</html>

-------------------------------------------------------------------------
==> in den Bild1.htm bis Bild5.htm sind jeweils ein Rollover-Bild aufgeführt.

Siehe hier:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Bild1</title>
<style type="text/css">

</style>
</head>
<body bgcolor="#FFFFFF">
<a href="home.htm" target="_parent"></a>
</body>
</html>

-------------------------------------------------------------------------

Mein Problem ist jetzt:

im IE 7 funktioniert das einwandfrei ... Anordnung ist in Ordnung, Rollover funktioniert auch

Schaue ich mir über die index (frames) das ganze im FF an ... hab ich nur nen weißen Bildschirm. Komplett gar keine Darstellung ... kann der FF die Zusammenstellung von Frames und den Rollover in den einzelnen nicht darstellen?

-------------------------------------------------------------------------

Hier habe ich auch noch eine andere kleine Version ... dort wieder das selbe Problem. Im IE werden die Bilder angezeigt und auch der Rollover an sich funktioniert und im FF absolut keine Darstellung.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Rollovereffekt</title>
<style type="text/css">
<!--

table {width:100%; height:100%;}

a#rollover{
width: 128px;
height: 300px;
display: block;
background: url(deckblatt home grau.jpg) no-repeat;
}

a#rollover:hover {
background: url(deckblatt home.jpg) no-repeat;
}

a#rollover1{
width: 128px;
height: 300px;
display: block;
background: url(deckblatt about me grau.jpg) no-repeat;
}

a#rollover1:hover {
background: url(deckblatt about me.jpg) no-repeat;
}

a#rollover2{
width: 128px;
height: 300px;
display: block;
background: url(deckblatt portfolio grau.jpg) no-repeat;
}

a#rollover2:hover {
background: url(deckblatt portfolio.jpg) no-repeat;
}

a#rollover3{
width:128px;
height:300px;
display:block;
background:url(deckblatt kontakt grau.jpg) no-repeat;
}
a#rollover3:hover{
background:url(deckblatt kontakt.jpg) no-repeat;
}

a#rollover4{
width:128px;
height:300px;
display:block;
background:url(deckblatt impresum grau.jpg) no-repeat;
}
a#rollover4:hover{
background:url(deckblatt impresum.jpg) no-repeat;
}
</style>

</head>

<body>

<table>
<tr>
<td><a href="home.htm" id="rollover"></a></td>
<td><a href="aboutme.htm" id="rollover1"></a></td>
<td><a href="portfolio.htm" id="rollover2"></a></td>
<td><a href="kontakt.htm" id="rollover3"></a></td>
<td><a href="impressum.htm" id="rollover4"></a></td>
</tr>
</table>
</body>
</html>

-------------------------------------------------------------------------

Ich tüftel jetzt schon 3 Tage daran und komme auf keinen grünen Zweig. Im Internet konnte ich auch noch eine Lösung für mein Problem finden ... deshalb hab ich mich mal an euch gewandt.

Vielleicht hat jemand ein paar Anregungen oder Tipps, was hier vielleicht total schief gelaufen ist oder an was für ein Gedankenproblem ich noch nicht gestolpert bin :rolleyes:

Ich danke euch schon mal ...

Grüße kleinerna

Akano · 09.03.2009

AW: IE / FF Darstellungsproblem (rollover)

Hi,

also zuerst würde ich von frames abraten, da diese eigentlich schon nicht mehr eingesetzt werden.

Tabellen werden nach den Standarts eigentlich auch nur noch eingesetzt um Daten tabelarisch dar zu stellen und nicht für das Design, jedoch zum Anfang kann man das noch ruhig machen.

Nun zum problem... Wenn Dein html code hier richtig angezeigt wird, dann liegt das problem an den bildernamen. Der IE nimmt den Dateinamen ohne probleme auch mit leerzeichen, wo jedoch der FF dies einfach als falsches statement interpretiert und den background ignoriert.

Als kleiner Tip kannst Du dir das FF AddOn "Web-Developer" installieren, das zeigt dir die Fehler an:
Web Developer

Der Fehler der Angezeigt wird ist: "Fehler beim Verarbeiten des Wertes für Eigenschaft 'background'. Deklaration ignoriert.

FF rendert Deine Seite zwar richtig, jedoch einfach ohne die Background Bilder.

kleinerna77 · 09.03.2009

AW: IE / FF Darstellungsproblem (rollover)

soll es vielleicht nur daran liegen?
An den Leerzeichen im Bildnamen?

Nun des Rätsels Lösung werd ich morgen mal posten :-D

Grüße kleinerna

kleinerna77 · 10.03.2009

AW: IE / FF Darstellungsproblem (rollover)

So heute konnte ich einmal den Tipp ausprobieren, und habe die Leerzeichen in meinen Bilddateinamen entfernt und siehe da :rolleyes:

es funktioniert

!

Mit letzteren Skript (bei den oben beschriebenen) klappt das mit den Rollover in beiden Versionen FF und IE.

Vielen Dank für den Tipp ... hat mir wirklich sehr weitergeholfen.

Thanks kleinerna

Akano · 10.03.2009

AW: IE / FF Darstellungsproblem (rollover)

Kein Problem. Helfen alle gerne.

Was ich noch bei den Frames gesehen habe, nutzt Du für die Dateinamen am Anfang Großbuchstaben. Hier würde ich empfehlen alles in kleinbuchstaben zu schreiben, da wenn Du die Seiten später mal auf einen Linux basierten Server aufspielst, es schnell zu Fehlern kommen kann. Windows ist es egal ob die Dateien Groß oder klein geschrieben sind, jedoch Linux Systeme unterscheiden hier.

Grüße Akano