✔ iE zeigts anders an und -> HOVER in Tabelle

Status
Nicht offen für weitere Antworten.
D

dan2web

Grünschnabel
Hallo ,
ich hab zwei kleine Probleme:

1. Ich habe eine kleine CMS Umgebung geschaffen die ein Horizontales Menü enthält
Dieses Menü wird im Firefox korrekt angezeigt, aber leider nicht im IE6.0. Dort
ist eine Linie sichtbar (unten). Die sollte eigentlich genau 1Pixel weiter unten sein und
sich so mit der Hauptlinie decken ->
Das ganze muss man sehen um es zu begreifen denke ich ^^
Also: http://www.mondseedart.at
Den Unterschied erkennt man sofort zwischen den beiden Browsern !

2. Ich versuche eine Tabelle zu designen damit ich Listen schön anzeigen kann.
Sieht auch gut aus soweit, aber ich möchte einen HOVER Effekt auf dem <TR>
Element. Leider funktioniert der nicht.
AUch mit Javascript habe ich es versucht, funktioniert leider auch ned :(

Hier der Code:
Code: 
.list table{
  border:               solid 1px;
	margin-top:						10px;
}

.list th {
	background-image:url(../images/bg_tablehead.jpg);
	background-repeat:repeat-x;	
	border-left:          1px solid #CCC;
	border-right:         1px solid #CCC;
	border-top:           1px solid #DDD;
	font-weight:          normal;
	padding:              4px 3px;
	text-align:           left;
  color:                #EAEEF0;
	font-weight:          bold;
}

.list tr.normal td {
	background:           #CEDBE7;
	border-bottom:        none;
	border-left:          none;
	border-right:         1px solid #CCC;
	border-top:           1px solid #DDD;
	padding:              2px 3px 3px 4px
}

.list tr.alternate td {
	background:           #A5BAC6;
	border-bottom:        none;
	border-left:          none;
	border-right:         1px solid #CCC;
	border-top:           1px solid #DDD;
	padding:              2px 3px 3px 4px
}

.list tr.normal:hover {
  background:	 	        #000000;
}

.list tr:hover {
  background:	 	        #000000;
}

.list a, list.a:link, list.a:visited {
	color:                #000000;
	text-decoration:      underline;
}

.list a:hover {
  color:                #FF0000;
}

Mit JavaScript habe ich es auch im TR Element versucht, leider ohne Erfolg mit
diesem Befehl:
Code: 
<tr class="alternate" onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor='#FFFFFF'">

Wäre für Hilfe sehr dankbar !
 
Ich würde mal für den aktiven Link eine transparente Hintergrundfarbe einrichten:

Code: 
#hormenu li a#current {
  color:                #012839;
  background-color:transparent;
  background-image:url(../images/bar_active.jpg);
  background-repeat:repeat-x;                                 /* muss gleiche Farbe haben wie Hintergrund                   */
  border-bottom:        1px solid #57798A;       /* muss gleiche Farbe haben wie Hintergrund                   */
}
Das ":hover"-Problem liesse sich folgendermaßen lösen:

Code: 
.alternate {
background: #fff;
}

.alternate:hover, .alternate_hover {
background: #eee;
}
Code: 
<tr class="alternate" onmouseover="this.className='alternate_hover'" onmouseout="this.className='alternate'">
 
Danke erstmal für die Antwort :)
Also das "background-color:transparent"; hat geholfen ^^
Aber wenn ich mit der Maus über einen Link gehe dann ist die Linie immer noch da.
Ich hab versucht das "background-color:transparent"; auch im :hover bereich einzufügen, das hat aber nichts geändert !?

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

Das HOver funktioniert jetzt in vom Prinzip her. Nur das Meine, so sorgsam gebastelte,
ursrüngliche tabelle total zerdeppert wird, sobald ich mit der maus über die Zeilen
gehe !?
Ich schätze das liegt daran das .current ja ne völlig eigene Klasse ist :(

Kann ich das nicht irgendwie in meine einbauen .. ich hab leider keinen plan wie :(
 
Vielleicht solltest du auch in den "herkömmlichen" Links die Hintergrundfarbe rausnehmen, zumal du dort ein Hintergrundbild eingesetzt hast?

Das "neu-entstandene" Problem kann ich bei mir nicht nachvollziehen und ebenso wenig reproduzieren, da ja ausschliesslich die Hintergrundfarbe getauscht wird.

Und von welcher Klasse .current sprichst du?
 
Ich meinte die Klasse .alternate

Ich habe ja, um die Zeilenfarbe in jeder zweiten Zeile zu ändern, in meiner CSS Definition
bereits eine Klasse definiert. Die hab ich nun durch Deine ersetzt und dann kommt
es, wenn ich mit der Maus über die Tabelle gehe, zur Zerstörung der selben.

Ich habe die Hintergrundfarbe bei den Links entfernt. Du hattest recht .. jetzt funktioniert es auch im IE einwandfrei ^^
Damit wär mein erstes Problem gelöst ^^

Danke für Deine Hilfe ... ich werde die Tabelle öffentlich zugänglich machen, dann sieht man
was mit der passiert ^^
 
Zuletzt bearbeitet:
Die Seite kann ja bis runter zu den Links berechtigt werden :)

Aber jetzt ist die Liste zugänglich -> Verwaltung -> Sites

Ich habe es jetzt geschafft das die Tabelle nicht mehr zerstört wird. Aber der Hover
Balken stimmt noch nicht. Die Formatierung darinn ist völlig anders als ohne
hover !?
 
Hi,

versuch mal die allgemeinen Angaben für die Tabellenzellen an einer Stelle zu definieren.

Weiterhin solltest Du für "hover-Klassen" (alternate_h, normal_h) definieren, die beim mouseover-Event zugewiesen
werden können. Die Eigenschaften dieser Klassen sind mit den hover-Pseudoklassen identisch und können
daher durch Kommata getrennt angegeben werden.

CSS:
Code: 
/*------------------------------------------------------------------------------------------------------------------------------------------------
Tabelle gestalten ...
--------------------------------------------------------------------------------------------------------------------------------------------------*/
.list table{
  border:               solid 1px;
	margin-top:						10px;
}

.list th {
	background-image:url(images/bg_tablehead.jpg);
	background-repeat:repeat-x;
	border-left:          1px solid #CCC;
	border-right:         1px solid #CCC;
	border-top:           1px solid #DDD;
	font-weight:          normal;
	padding:              4px 3px;
	text-align:           left;
  color:                #EAEEF0;
	font-weight:          bold;
}

.list th:hover, a.list:link {
	background-image:url(images/bg_tablehead_over.jpg);
	background-repeat:repeat-x;
	color: #FFFFFF;
}

.list table td{
  border-bottom:        none;
  border-left:          none;
  border-right:         1px solid #CCC;
  border-top:           1px solid #DDD;
  padding:              2px 3px 3px 4px;}

.list tr.normal td {
	background:           #CEDBE7;

}

.list tr.alternate td {
	background:           #A5BAC6;
}

.list tr.normal_h,
.list tr.normal:hover {
  background:           #7491A1;
}

.list tr.alternate_h,
.list tr.alternate:hover {
  background:           #7491A1;
}

.list a, list.a:link, list.a:visited {
	color:                #000000;
	text-decoration:      underline;
}
Die Aufrufe in den onmouseover-Events sehen damit folgendermassen aus:
Code: 
<tr class="alternate" onmouseover="this.className='alternate_h'" onmouseout="this.className='alternate'">
bzw.
Code: 
<tr class="alternate" onmouseover="this.className='normal_h'" onmouseout="this.className='normal'">
Vielleicht hilft Dir das weiter.

Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück