CSS-Problem: Seht euch bitte diese Navigationsleiste an!

bigtail · 19. Dezember 2004

Bitte hier klicken, um die Navigationsleiste zu sehen bekommen

Problem:

Wenn man die Seite mit "Internet Explorer" aufruft und mit der Maus auf die Navigationsleiste geht. ändert sich alles so wie ich es mir gewünscht habe.

Wenn man aber die Seite mit "Mozilla" aufruft, und mit der Maus auf die Navigationsleiste geht, ändert sich die Breite der Navigationsleiste.

Frage:

Was muss ich in meinem CSS-Script ändern, um das Problem mit Mozilla zu beheben??

Danke

Hier sind beide Dateien:

navigations.htm

PHP:

<LINK href="format.css" type="text/css" rel="stylesheet">
  <TABLE  id=links  border=0 cellSpacing=0 cellpadding=0>
	<tr>
	  <td id=td><a href=''>Home</a></td>
	</tr>
	<tr>
	  <td width=160 bgColor=#ffffff height=1></td>
	</tr>
	<tr>
	  <td id=td><A href=''>Pictures</A></td>
	</tr>
	<tr>
	  <td width=160 bgColor=#ffffff height=1></td>
	</tr>
	<tr>
	  <td id=td><A href=''>Download</A></td>
	</tr>
</TABLE>

format.css

PHP:

BODY {
	BACKGROUND-COLOR: #E4EBF0;
}
TABLE {
	FONT-SIZE: 12px; 
	COLOR: #000000; 
	LINE-HEIGHT: 12pt; 
	FONT-FAMILY: Verdana, Arial, Helvetica; 
}
TH {
	BACKGROUND: #5DA5F4;
}
TD {
	FONT-SIZE: 12px; 
	COLOR: #000000; 
	LINE-HEIGHT: 12pt; 
	FONT-FAMILY: Verdana, Arial, Helvetica;
}
TR {
	FONT-SIZE: 12px; 
	COLOR: #000000; 
	LINE-HEIGHT: 12pt; 
	FONT-FAMILY: Verdana, Arial, Helvetica;
}
DIV {															
	FONT-SIZE: 12px; 
	COLOR: #000000; 
	LINE-HEIGHT: 12pt; 
	FONT-FAMILY: Verdana, Arial, Helvetica;
}
P {
	FONT-SIZE: 12px; 
	COLOR: #000000; 
	LINE-HEIGHT: 12pt;  
	FONT-FAMILY: Verdana, Arial, Helvetica;
}
UL {
	FONT-SIZE: 12px; 
	COLOR: #000000; 
	LINE-HEIGHT: 12pt; 
	FONT-FAMILY: Verdana, Arial, Helvetica;
}
A:link {
	FONT-WEIGHT: normal; 
	COLOR: #0000FF;
}
A:visited {
	FONT-WEIGHT: normal; 
	COLOR: #0000FF; 
}
A:hover {
	FONT-WEIGHT: normal; 
	COLOR: #0000FF; 
}
A:active {
	COLOR: #0000FF; 
}
#links {
    WIDTH: 160; 
	BORDER-COLLAPSE: collapse
}
#links A {
	PADDING-RIGHT: 10px; 
	PADDING-LEFT: 10px; 
	PADDING-BOTTOM: 4px; 
	MARGIN: 0px auto; 
	FONT: bold 12px Arial, Verdana; 
	WIDTH: 160;
	COLOR: #FFFFFF; 
	PADDING-TOP: 4px; 
	TEXT-DECORATION: none;
}
#links A:hover {
	BACKGROUND: #2D77DB; 
	COLOR: #FFFFFF;
	TEXT-DECORATION: none;
	display : block;
}
#td {
	BACKGROUND: #0C4D9E;
	WIDTH: 160;
	Height: 24px;
}
#td_button {
	BACKGROUND: #FFFFFF;
}

FH16 · 19. Dezember 2004

Hier mal die Seite mit stark vereinfachtem Code:

HTML:

<html>
<head>
<style type="text/css">
	body { background-color:E4EBF0; }
	a { display:block; margin-bottom:1px;  color:#FFFFFF; background-color:#0C4D9E; width:160px; font-family:Arial; font-weight:bold; font-size:12px; padding:4px; padding-left:10px; text-decoration:none;}
	a:hover { background-color:#2D77DB; color:#FFFFFF; text-decoration:none; }
</style>
</head>

<body>
<a href="home">Home</a>
<a href="home">Pictures</a>
</body>
</html>

Falls Mozilla das noch nicht korrekt darstellt (kanns nicht testen), liegts an der Breite: so weit ich weiss, interpretiert der IE die Breite ("width") anders als Mozilla (das eine Mal ist der Padding in der Breite enthalten, das andere Mal nicht).

Raechaer · 19. Dezember 2004

bigtail schrieb:
Was muss ich in meinem CSS-Script ändern, um das Problem mit Mozilla zu beheben??

Am einfachsten dürfte es wohl sein, in #links a auch ein display:block hinzuzufügen (das ist nämlich der Grund warum die Links beim hover breiter werden) und dann unter Umständen die Breite der Links anpassen.

[edit]Ich merk jetzt erst, dass du das ja mit einer Tabelle machst. Wie wär's stattdessen mit einer Liste?[/edit]

bigtail · 20. Dezember 2004

Danke für die Antwort.

Suche

CSS-Problem: Seht euch bitte diese Navigationsleiste an!

bigtail

Ensign

FH16

Lieutenant

Raechaer

Lt. Junior Grade

bigtail

Ensign

Ähnliche Themen