✔ Mozilla Firefox und CSS

lamoe · 23. November 2004

Hallo Leute,

eine Frage, kann es sein das der Mozilla Firefox keine CSS versteht oder habe ich einfach zu viele td Tag verschieden Befehle gegeben, im IE funktioniert meine Seite, aber in Mozilla nicht. Hier mein Code.

<html>
<head>
<STYLE TYPE="text/css">

</STYLE>
</head>
<body bgcolor="#FFFFFF" >

<TABLE height="12" align="center" cellSpacing="0" cellPadding="0" width="900" border="0">
<TBODY>
<TR>
<TD>
<TABLE height="23" cellSpacing="0" cellPadding="0" width="140">
<TBODY>
<TR>
<TD width="8" bgcolor="#005B00"> </TD>
<TD style="border:1px solid #005B00" width="140" bgcolor="#C4FFC4" class="1"><B><A href="....html" onFocus="if(this.blur)this.blur()"> ....</A></B></TD>
<td width="10"> </td>
</TR>
</TBODY>
</TABLE>
</TD>
<TD vAlign="top">
<TABLE height="23" cellSpacing="0" cellPadding="0" width="140">
<TBODY>
<TR>
<TD width="8" bgcolor="#D56A00"> </TD>
<TD class="2" style="border:1px solid #D56A00" width="140" bgcolor="#FFEAD5"><B><A href="....html" onFocus="if(this.blur)this.blur()"> ....</A></B></TD>
<td width="10"> </td>
</TR>
</TBODY>
</TABLE>
</TD>
<TD vAlign="top">
<TABLE height="23" cellSpacing="0" cellPadding="0" width="140">
<TBODY>
<TR>
<TD width="8" bgcolor="#000075"> </TD>
<TD class="3" style="border:1px solid #000075" width="140" bgcolor="#CCE9F9"><B><A href=".....html" onFocus="if(this.blur)this.blur()"> ....</A></B></TD>
<td width="10"> </td>
</TR>
</TBODY>
</TABLE>
</TD>
<TD vAlign="top">
<TABLE height="23" cellSpacing="0" cellPadding="0" width="140">
<TBODY>
<TR>
<TD width="8" bgcolor="#810117"> </TD>
<TD class="4" style="border:1px solid #810117" width="140" bgcolor="#FFCCD5"><B><A href=".....html" onFocus="if(this.blur)this.blur()"> ....</A></B></TD>
<td width="10"> </td>
</TR>
</TBODY>
</TABLE>
</TD>
<TD vAlign="top">
<TABLE height="23" cellSpacing="0" cellPadding="0" width="140">
<TBODY>
<TR>
<TD width="8" bgcolor="#595900"> </TD>
<TD class="5" style="border:1px solid #595900" width="140" bgcolor="#EBECCC"><B><A href="......html" onFocus="if(this.blur)this.blur()"><font class="ubersicht"> ......</font></A></B></TD>
<td width="10"> </td>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</body>
</html>

hela · 23. November 2004

Hallo lamoe,

bei mir sind kaum Unterschiede zwischen IE6 und Firefox 0.9.3 zu sehen.
Welche Unterschiede siehst du denn?

SilentWarrior · 23. November 2004

Also hier mal ein kurzer Styleguide zum vernünftigen Posten:

1. Beschreibe dein Problem genauer. Was macht Firefox nicht, was er sollte? Worin bestehen konkret die Unterschiede?
2. Nur die relevanten Codeausschnitte posten - niemand hat Lust, hunderte von Zeilen durchzuwuseln auf der Suche nach einem Fehler.
3. Code unbedingt mit [code] oder [code=php] (dann wird's schön bunt

) formatieren, zur besseren Lesbarkeit.
4. Ein Link zu der Seite wäre auch toll. Ich hab nämlich keine Lust, erst eine HTML-Datei zu erstellen, um zu sehen, wo genau dein Problem liegt.

lamoe · 24. November 2004

Hallo,

im IE und Opera Browser kann man bei der linken Navigation und bei der Navigation im Titel einfach drüber fahren und die Maus sowie der Hintergrund ändern sich also ein hover effekt mit Css für die Links dort.

Beim Firefox und Netscape geht das aber nicht und warum weis ich nicht, ich habe die Seite auch noch nicht im Netz, wofür auch, wenn ich die nocht nicht funktioniert, aber trotzdem wäre ich froh wenn einer mir meinen Fehler erklärt.

P.S. ich habe extra CSS genommen, den im Falle das einer sein Javasricpt ausstellt im Browser soll das ja trotzdem weiterfunktionieren.

Quaese · 24. November 2004

Hi,

schreibe mal für Deine CSS-Klassen mehr als nur eine Ziffer - also z.B. td.t1 statt td.1.
Testen konnte ich es gerade nicht, müsste aber funktionieren.

Ciao
Quaese

hela · 24. November 2004

Hallo lamoe,

brauchst du diese komplizierte Tabellenstruktur mit den verschachtelten Tabellen? Für die Darstellung der Verweise als Block ist das nicht notwendig. Die Umsetzung in CSS ist auch nicht ganz konsequent gemacht worden.
Ich habe deine Datei mal als Beispiel vereinfacht und bloß noch die Rahmentabelle gelassen, vielleicht kommst du damit zurecht.
Der DIV-Block um die Verweise realisert noch mal einen Rahmen, der auf der linken Seite 8px und sonst 1px breit ist. Das wesentliche müsste sich aus den Stylesheets erkennen lassen. Wenn du damit Probleme hast, dann musst du dich nochmal melden.

HTML:

   <html>
   <head>
   <title>?</title>
   <STYLE TYPE="text/css">
   <!--
   body {
   	background-color: #FFFFFF;
   }
   table {
   	width: 900px;
   	border-collapse: collapse;
   }
   div.f1, div.f2, div.f3, div.f4, div.f5 {
   	width: 140px;
   	border-width: 1px 1px 1px 8px;
   	border-style: solid;
   }
   div.f1 a, div.f2 a, div.f3 a, div.f4 a, div.f5 a {
   	display: block;
   	height: 23px;
   	line-height: 23px;
   	padding-left: 5px;
   	text-decoration: none;
   	font-family: arial, sans-serif;
   	font-size: 12px;
   	font-weight: bold;
   	border-width: 1px;
   	border-style: solid;
   }
   div.f1 {
   	border-color: #005B00;	
   	background-color: #C4FFC4;
   }
   div.f1 a {
   	border-color: #C4FFC4;
   	color: #005B00;
   }
   div.f1 a:hover {
   	color:#C4FFC4;
   	background-color: #005B00;
   }
   div.f2 {
   	border-color: #D56A00;	
   	background-color: #FFEAD5;
   }
   div.f2 a {
   	border-color: #FFEAD5;
   	color: #D56A00;
   }
   div.f2 a:hover {
   	color:#FFEAD5;
   	background-color: #D56A00;
   }
   div.f3 {
   	border-color: #000075;	
   	background-color: #CCE9F9;
   }
   div.f3 a {
   	border-color: #CCE9F9;
   	color: #000075;
   }
   div.f3 a:hover {
   	color:#CCE9F9;
   	background-color: #000075;
   }
   div.f4 {
   	border-color: #810117;	
   	background-color: #FFCCD5;
   }
   div.f4 a {
   	border-color: #FFCCD5;
   	color: #810117;
   }
   div.f4 a:hover {
   	color:#FFCCD5;
   	background-color: #810117;
   }
   div.f5 {
   	border-color: #595900;	
   	background-color: #EBECCC;
   }
   div.f5 a {
   	border-color: #EBECCC;
   	color: #595900;
   }
   div.f5 a:hover {
   	color:#EBECCC;
   	background-color: #595900;
   }
   -->
   </STYLE>
   </head>
   <body>
   
   <TABLE>
   <TR>
     <TD> <div class="f1"> <A href="#"> Verweis 1 </A> </div> </TD>
     <TD> <div class="f2"> <A href="#"> Verweis 2 </A> </div> </TD>
     <TD> <div class="f3"> <A href="#"> Verweis 3 </A> </div> </TD>
     <TD> <div class="f4"> <A href="#"> Verweis 4 </A> </div> </TD>
     <TD> <div class="f5"> <A href="#"> Verweis 5 </A> </div> </TD>
   </TR>
   </TABLE>
   
   </body>
   </html>

Funktioniert bei den aktuellen Browsern (IE6, Opera, Mozilla).

lamoe · 24. November 2004

Hallo hela,

vielen Dank guter Mann/Frau, dein Beispiel funktioniert in allen mir bekannten Browsern.

Hast du aber vielleicht zufällig auch mal mein original Code ausprobiert, beim drüber fahren der Maus färbt sich nur der mittlere Hintergrund um den Text und nicht der ganze. Weist du was ich meine und kannst du das auch hinbekommen?

Noch ne Frage, wärest du bereit mir gegen Bezahlung von meiner Homepage Startseite eine Vorlage per div Tags usw. und mit scrollbaren Tabellenzeile zu erstellen, so das ich keine Frames mehr benutzen müste. Damit wäre ich sicher für die nächsten par Jahre bedient und müste die Homepage nicht ständig ändern?

Gruß
L.A. - MOE

Quaese · 24. November 2004

Hi,

füge bei Deinen Orginal-CSS-Deklarationen eine Angabe für die Zeilenhöhe ein.

Code:

td.t1 a{ /* Bisherige CSS-Deklarationen*/
         line-height: 21px;}

So sollte die gesamte Zellenhöhe beim Überfahren mit der Maus mit der gewünschten Hintergrundfarbe gefüllt werden.

Edit:
Um die Eigenschaft für alle Zellen zu setzen, könntest Du folgendes Konstrukt verwenden.

Code:

td.t1 a, td.t2 a, td.t3 a, td.t4 a, td.t5 a{ line-height: 21px;}

Ciao
Quaese

lamoe · 24. November 2004

Hallo Leut von heut,

ich habe euch jetzt meine Problemseite mal ins Netz geladen, http://www.n-k-s.de/dieerste.html

Ich möchte gerne meine gesamte Homepage umbauen um von den Frames wegzukommen, bitte lasst euch nich von den fehlenden Bildern im Titel stören.

Wer kann mir für diese Problemseite ein perfekte Vorlage verkaufen, so das ich ein für alle mal Ruhe habe mit diese Homepage und alles in jedem Browser funktioniert? Oben soll immer der Titel erscheinen links das Linkmenü und unter dem Titel noch ein kleines Auswahlmenü, in der Mitte dann der Inhalt, welchen man bitte scrollen können soll, ohne den Scroller des Browser also im Tabelen Div Tag oder so Ihr wist schon.

Bitte schickt mir Angebote oder direkt kostenlose Lösungen, mir egal ich möchte nur diese eine perferkte Vorlage, damit ich dann jeweils die restlichen HTML Seiten der kompletten Homepage in aller Ruhe fertig machen kann, denn leider haben ich net so viel Ahnung von programmieren, aber dafür wird schicken Leut.

So und jetzt freu ich mich mal wieder auf eure zahlreichen Antworten.

hela · 24. November 2004

zu 1.)

Die Unterschiede zwischen IE und Firefox beim "hover"-Effekt ergeben sich tatsächlich nur aus dem Klassenname. Wenn man die Klassen von "1" usw. auf "t1" oder "f1" umbenennt, sind diese Unterschiede weg.

zu 2.)

Ein Vorschlag für ein tabellenloses grobes Gerüst deiner Seite wird im Rahmen dieses Forums sicherlich möglich sein. Für die funktionelle Ausgestaltung (und künftige Aktualisierung) deiner Seite kannst du ja den kommerziellen Weg gehen.

✔ Mozilla Firefox und CSS

lamoe

Gesperrt

hela

SilentWarrior

Erfahrenes Mitglied

lamoe

Gesperrt

Quaese

Moderator

hela

lamoe

Gesperrt

Quaese

Moderator

lamoe

Gesperrt

hela

Neue Beiträge