✔ Darstellung im Explorer korrekt, im Firefox nicht

A

aze

Mitglied
Dummyfrage: Warum wird meine Navigationsleiste im Explorer korrekt, im Firefox unbrauchbar dargestellt?

Vor zwei Jahre habe ich mühevoll mit einem css-Skript eine Navigationsleiste gebastelt, diese aber immer nur im Explorer betrachtet. Nun ist mir aufgefallen, dass die Darstellung im Firefox vollkommen unbrauchbar ist. (siehe Anhang) Kann mir jemand sagen, woran das liegt bzw. was ich tun muss, um das Problem zu beheben?


Danke
Martin

Hier der Link zu meinen Seiten: http://www.keep-on-moving.de/main_06.html



<style type="text/css">
<!--
ul {
list-style-type : none;
margin : 0;
padding : 0;
white-space: nowrap;
}
li {
width : 100px;
margin : 1px;
float :left;
text-align : center;


}
li a {
text-decoration : none;
color : black;
font-size: 8pt;
font-family: sans-serif;
padding: 2px;
width : 100%;
background-color : #3300FF;

border : none;
}
li a:hover {
color: #fff;
background-color: #CCCCFF;
text-decoration: none;
}
t1 { font-size: 8px; font-family: Verdana }


#bildunter { color: #333333; font-size: 12px; font-family: Arial, Helvetica, Geneva, sans-serif; margin-top: 0px }
.copyright-7px-grau { color: #808080; font-size: 7pt; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular }
.body-10px-blau-bold { color: #f00; font-weight: bold; font-size: 10px; font-family: Arial, Helvetica }
.body-9px-normal-grau { color: white; font-size: 9px; font-family: Arial, Helvetica; font-weight: bold }
.body-10px-blau-bold-mehr { color: #f00; font-style: italic; font-weight: bold; font-size: 10px; font-family: Arial, Helvetica; text-align: right }
.body-10px-grau-fett { color: black; font-size: 10px; font-family: Arial, Helvetica; font-style: normal; font-weight: bold; text-indent: 20px; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0 }
.body-10px-grau-normal { color: black; font-size: 10px; font-family: Arial, Helvetica; font-style: normal; font-weight: normal; text-indent: 35px; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0 }
.body-10px-grau-normal_Liste { color: black; font-size: 10px; font-family: Arial, Helvetica; font-style: normal; font-weight: bold; text-indent: 20px; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0 }
.aufzählung-10px-normal { color: black; font-size: 10px; font-family: Arial, Helvetica; font-style: normal; font-weight: bold; text-indent: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0 }
.body-10px-blau-kursiv { color: white; font-size: 10px; font-family: Arial, Helvetica; font-style: italic; line-height: 10px; text-indent: 20px; margin-top: 6px; margin-bottom: 6px; vertical-align: 6px }
.body-10px-sw-bold { color: black; font-weight: bold; font-size: 10px; font-family: Arial, Helvetica }
.body-10px-sw-bold-eng-zentriert { color: black; font-size: 10px; font-family: Arial, Helvetica; font-weight: bold; margin-top: 0; margin-bottom: 0; padding: 0 8px; top: 0; bottom: 0; vertical-align: middle }
.body-10px-sw-normal { color: black; font-size: 10px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular }
.body-10px-sw-normal_Zeilenabstand { color: black; font-size: 10px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; position: relative; top: 0; bottom: 0 }
.body-10px-sw-normal-140 { color: black; font-size: 10px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; width: 140px }
.body-10px-sw-normal-Aufzählung { color: black; font-size: 10px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; white-space: normal; list-style-type: disc; list-style-position: outside }
.body-10px-sw-eng { color: black; font-size: 10px; font-family: Arial; text-indent: 0; margin-top: 0; margin-bottom: 0; padding: 0; top: 6px; bottom: 6px; vertical-align: 0 }
.aufzählung-10px-sw-eng { color: black; font-size: 10px; font-family: Arial; font-style: italic; font-weight: 900; text-align: left; text-indent: 0; white-space: normal; margin-top: 0; margin-bottom: 0; padding: 0; top: 6px; bottom: 6px; left: 0; vertical-align: 0 }
.body-10px-sw-eng-fett { color: black; font-size: 10px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-weight: bold; margin-top: 0; margin-bottom: 0; padding: 0; top: 6px; bottom: 6px }
.body-12px-blau-bold { color: white; font-size: 12px; font-family: Arial, Helvetica; font-weight: bold; text-indent: 8px }
.normal-fett { color: black; font-size: 12px; font-family: Arial, Helvetica; font-weight: bold }
.normal { color: black; font-size: 12px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-align: left }
.head-14px-blau-bold { color: #f00; font-weight: bold; font-size: 14px; font-family: Arial, Helvetica }
.head-14px-sw-bold { color: black; font-weight: bold; font-size: 14px; font-family: Arial, Helvetica }
.head-14px-sw-normal { color: black; font-size: 14px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular }
.head-14px-sw-kursiv { color: black; font-size: 14px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-style: italic; font-weight: bold; text-align: center; padding-top: 8px; padding-bottom: 0 }

b { font-weight: bold; font-size: 14px; font-family: Arial, Helvetica, Geneva, sans-serif }
body { font-size: 14px; font-family: Arial, Helvetica, Geneva, sans-serif }

p { color: black; font-size: 12px; font-family: Arial, Helvetica, Geneva, sans-serif; font-style: normal; font-weight: normal; text-align: left; margin-bottom: 6px }
td { color: black; font-size: 12px; font-family: Arial, Helvetica, Geneva, sans-serif }
.li-eigen { font-family: Arial; list-style-type: disc }
 

Anhänge

Hi,

zunächst beginnt deine CSS-Datei mit
Code: 
<style type="text/css">

	<!--
Das solltest du entfernen.

Weiterhin musst du die A-Tags der Navigation als Blockelemente auszeichnen (display: block).

Um weiterhin die gleiche Ansicht in den aktuellen Browsern zu erhalten, solltest du die Breite in den Links entfernen. Stattdessen erhalten sie linke und rechte Aussenabstände. Diese werden korrigierend bei den LI-Aussenabständen geändert.
Code: 
		ul {
			list-style-type : none;
			margin : 0;
			padding : 0;
			white-space: nowrap;
		}
		li {
			width : 100px;
			float: left;
      margin : 1px 0;
			text-align : center;
		}
		li a {
			text-decoration : none;
			color : black;
			font-size: 8pt;
			font-family: sans-serif;
			padding: 2px;
			/*width : 100%;*/
			background-color : #3300FF;
      margin: 0 1px;
      display: block;

			border : none;
		}
		li a:hover {
			color: #fff;
      background-color: #CCCCFF;
      text-decoration: none;
		}

Ein ähnliches Problem vermute ich in der vertikalen Navigation links.

Ciao
Quaese
 
Danke Quaese!

Jetzt ist es schon etwas besser. Aber da sind immer noch diese schwarzen Punkte. Wie bekomme ich die weg?

Martin



<style type="text/css">

ul {
list-style-type : none;
margin : 0;
padding : 0;
white-space: nowrap;
}
li {
width : 100px;
float :left;
margin : 1px 0;
text-align : center;


}
li a {
text-decoration : none;
color : black;
font-size: 8pt;
font-family: sans-serif;
padding: 2px;
/*width : 100%;*/
background-color : #3300FF;
margin: 0 1px;
display: block;
border : none;
}
li a:hover {
color: #fff;
background-color: #CCCCFF;
text-decoration: none;

}
t1 { font-size: 8px; font-family: Verdana }
 

Anhänge

Hi,

mit den von mir genannten Änderungen funktioniert es bei mir.

Du hast in dem von dir geposteten Code noch
Code: 
<style type="text/css">
stehen. Das muss aus der css-Datei raus.

Ciao
Quaese
 
Hi, ist nicht deine Frage gewesen, doch hab ich was an deinen Design im Allgemeinen an der Seite geändert. Solange es nicht nur provisorisch ost, hab ich folgendes zu bemängeln:

Deune Startseite weist einen intensiven Blauton auf, und die von dir Gewählte Schrift ist Rot. Zwei Kontrastfarben die nicht schön zu betrachten sind und eher abschrekend als werbend wirken;) Vllt passt du ja noch die Farben an, und frischt dein Design vllt im allgemeinen ein wenig auf, so das es modernen und einladender wirkt;)

MfG Dimitrij
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück