Unerklärliche Fehler mit Firefox und Co

[GrafAlucard]

hallo leute,

problem: ich habe 1 kopfziele und darunter die navigationsleiste, diese habe ich mit einem farbverlauf als background image versehen, von dunkelgrün zu grün in der kopfzeile und von grün zu hell grün in der navi leiste. damit das farblich einen guss ergibt. jetzt ist es so das bei mir dazwischen ein weißer strich auftaucht, ich dchte erst es ist eine rahmen einstellunga ebr nichts, bei einem kumpel auf dem pc, (die gleiche firefox version) ist diese linie nicht! dazu habe ich karteikarten in das menü gebastelt die mit dem oberen rand des textblocks abschließen, bei mir stimmt das, bei ihm ist es versetzt um 1-2px.
im IE und Opera ist es genauso wie im firefox bei mir (konnte er nicht testen).

woran kann das liegen?

zur besseren verdeutlichung ist hier ein screenshot und der code aus der css und der htm (index).
wäre echt nett wenn mir jemand helfen könnte. Danke schon mal!!!
p.s. die farbverläufe liegen ja in meinem ordner, nun weiß ich nicht wie ihr das prüen wollt ohne die dateien:(

screenshot:

css:
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
font-family:verdana, arial, sans-serif; font-size:12px;
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
line-height: 1.5;
}
#wrapper {
color: black;
background-color: white;
width: 88%;
margin: auto; /* Div soll zentriert werden */
min-height: 90%; /* Mindesthöhe für moderne Browser */
height:auto !important; /* Important Regel für moderne Browser */
height: 90%; /* Mindesthöhe für den IE */
overflow: hidden !important; /* FF Scroll-leiste */
bottom: 10%;
margin-top: 10%;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#kopfzeile {
position: relative;
color: black;
background-image: url(bg-kopfzeile1.png);
background-repeat: no-repeat;
background-position: center center;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
padding-top: 15px;
padding-right: 20px;
padding-bottom: 38px;
padding-left: 20px;
}
#kopfzeile p {
position: absolute;
left: 10px;
font-variant: small-caps;
font-size: 100%;
font-weight: bold;
color: #434242;
}
#kopfzeile p span {
color: maroon;
font-style: italic;
}
#kopfzeile img {
position: absolute;
right: 10px;
}
#navigation {
color: black;
background-image: url(bg-kopfzeile2.png);
background-repeat: no-repeat;
background-position: center center;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
padding-top: 10px ;
padding-right: 0px;
padding-bottom: 2.5px;
padding-left: 5px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: maroon;
}
#navigation ul {
margin-bottom: 0;
}
#navigation li {
display: inline;
margin: 0;
}
#navigation a {
color: black;
background-image: url(bg-menue.png);
background-repeat: no-repeat;
background-position: center center;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
text-decoration: none;
padding-top: 4px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 10px;
border-width: 2px;
border-style: solid;
border-color: maroon;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#navigation a:hover {
color: black;
background-color: white;
}
#navigation a:active {
color: black;
background-color: blue;
}
#startseite #navi1 a,
#vereinsgeschichte #navi2 a,
#vereinsleben #navi3 a,
#veranstaltungen #navi4 a,
#termine #navi5 a,
#kontakt #navi6 a {
color: black;
background-color: white;
border-bottom-color: white;
font-style: italic;
}
#textbereich {
padding: 20px;
}
#fusszeile {
color: black;
background-image: url(bg-kopfzeile3.png);
background-repeat: no-repeat;
background-position: center center;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
text-align: center;
padding-top: 10px;
padding-bottom: 5px;
}
p, ul {
margin-top: 0 ;
margin-right: 0 ;
margin-bottom: 1em ;
margin-left: 0;
}
ul ul {
margin: 0;
}
li {
margin-top: 0 ;
margin-right: 0;
margin-bottom: 0;
margin-left: 1em;
}
#textbereich h1 {
font-size: 145%;
letter-spacing: 1pt;
}
#textbereich h2 {
font-size: 125%;
letter-spacing: 1pt;
}
a:link { color: maroon; }
a:visited { color: maroon }
a:hover { background-color: #ffeda0; }
a:active { color: white; background-color: red; }

/*Gestaltung der Tabelle*/
table {
width: 100%;
text-align: center;
background-color: #F3FFB1;
color: black;
border-width: 2px;
border-style: groove;
border-color: #D6D5D5;
border-collapse: collapse;
}
th {
padding: 5px;
font-variant: small-caps;
background-color: #9DD1D1;
color: black;
border-width: 1px;
border-style: groove;
border-top-color: white;
border-right-color: black;
border-bottom-color: black;
border-left-color: white;
}
td {
padding: 3px;
border-width: 1px;
border-style: groove;
border-color: #D6D5D5;
}
tr.zebra {
background-color: #D5F238;
color: black;
}
td.variante1 {
background-color: #BDF9F9;
color: black;
}
td.variante2 {
background-color: #93E3E3;
color: black;
}
tr:hover {
background-color: #9cc;
color: #000;
cursor: pointer;
}

htm index:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>KGV &quot;Einigkeit&quot; e.V. Leipzig</title>
<link rel="stylesheet" type="text/css" href="mylayout.css" media="screen" />
<link rel="stylesheet" type="text/css" href="printlayout.css" media="print" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body id="startseite">
<div id="wrapper">
<!-- im Browser sichtbarer Teil -->
<div id="kopfzeile">
<p><span>KGV &quot;Einigkeit&quot; e.V. Leipzig</span></p>
<img src="logo.png" alt="Logo" width="75" height="75" />
</div>
<div id="navigation">
<ul>
<li id="navi1"><a href="index.html">Startseite</a></li>
<li id="navi2"><a href="vereinsgeschichte.html">Vereinsgeschichte</a></li>
<li id="navi3"><a href="vereinsleben.html">Vereinsleben</a></li>
<li id="navi4"><a href="veranstaltungen.html">Veranstaltungen</a></li>
<li id="navi5"><a href="termine.html">Termine</a></li>
<li id="navi6"><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
<div id="textbereich">
<h1>Überschrift</h1>
<p>Satz<br />
Satz</p>
<h2>kleine Überschrift</h2>
<p>Satz</p>
<ul>
<li>erste Ebene
<ul>
<li>Satz</li>
<li>Satz</li>
</ul>
</li>
<li>wieder die erste Ebene</li>
</ul>
<p>Satz
<a href="http://www.css-einfach.de" title="Quickinfo">Link</a> Satz</p>
</div>
<div id="fusszeile">
© by Heinz Homepagebauer
</div>
</div>
</body>
</html>

wenn mir noch jemand sagen könnte wie ich die fußleiste aud den wrapper bekomme, der 10% abstand von rand hat, wäre das toll. ich habe immer nur gefunden wie ich die ganz runter als an das bild ende bekomme, aber nicht wie ein stück hoch^^

 

[Wustersoss]

woran kann das liegen?

Bei mir ist das sauber, also ohne Linie
Vermutlich liegt das an deinem Cache, du solltes den Firefoxcache mal komplett leeren, mit STRG-Umschalt-Entf öffnet sich das Fenster dort Cache anhaken und löschen.

p.s. die farbverläufe liegen ja in meinem ordner, nun weiß ich nicht wie ihr das prüen wollt ohne die dateien

Das sind die grossen Geheimnisse der Meister.

Ich sag´s dir trotzdem. In dem du für die Hintergründe unterschiedliche Farben definierst, so einfach ist das manchmal.

 

[GrafAlucard]

ok ich werde das gleich mal probieren, also ich ahbe das so gemacht das ich im office einen farbverlauf erzeugt ahben von hell zu dungel, udn den als bild gespeichert ahbe so das ich diesen dann als bild angeben kann.
die farbverläufe mit css3 sind ja bei den browsern noch nicht so drin.

wie war das bei dir mit der linie und den registerkarten= auf einer linie oder versetzt?

ps gerade cache gelehrt, nix ist immer noch so^^
ich bin am verzweifeln:(
denn im ie und opera ist das auch so bei mir:(

 

[Wustersoss]

Bei mir sieht das so aus(anderes Hintergrundbild ausgewählt)



Wenn es bei dir immer noch so ist, dann hast du uns einen anderen Code zur Verfügung gestellt, oder in deinem Verlaufsbild ist oben eine weisse Linie. Überpüf das mal alles.

Die Umlaute sind bei mir anders, weil als UTF-8 gespeichert, als nicht wundern.

 

[struppi]

Ein Blick in die Fehlerkonsole kann auch bei CSS Problemen hilfreich sein. CSS Fehler werden dort als Warnungen angezeigt.

 

[Wustersoss]

Danke Struppi aber HTML und CSS ist Valide, das hatten wir schon in diesem Thread bereinigt http://www.html.de/css/41755-hintergrundbild-fixed.html
Das Thema hier zieht sich etwas... naja.

Aber was anderes, ich habe da mal reingeschaut in die Fehlerconsole und da kamen etliche CSS-Fehler von Bmedien.eu.

 

[GrafAlucard]

die fehler sind raus, nur fehler die jetzt nur in css3 gehen würden. also keine richtigen fehler.
der code ist auch kein anderer, da es der selbe ist den ich verwende.
mit dem text hier wurde mir aber nicht wirklich geholfen, die registerkarten die bei mir richtig sind, sind bei euch falsch und der hintergrund der bei mir die linie hat, ist bei euch ok.

habe den cache gelöscht und firefox neu installiert.
es kommt ja komischerweise auch im ie und opera ds gleich eproblem. nur hab ich keinen plan woran das liegt.

 

[struppi]

valide heißt nicht, das keine Fehler mehr vorhanden sind.

Das die Fehlerkonsole durch diese Forum fast unbenutzbar ist, habe ich auch schon mehrmals gesagt. http://www.html.de/html-de-intern/32747-fehlerkonsole.html
Aber die Forensoftware ist in dieser Hinsicht Schrott - zumal die meisten Fehler so Sachen wie fehlende Farbangaben sind.

EDIT: Die Fehlerkonsole ist immer besser, als ein Validator, da sie auch falsche Werte anzeigt.

 

[Wustersoss]

Gut, dann will ich auch darauf eingehen, keine Beanstandungen durch die Fehlerkonsole, zumindest auf meinem Rechner mit dem von ihm zur Verfügung gestellten Code.
Der Fehler liegt irgendwo bei ihm auf dem Rechner, da es ja andere Personen nicht nachvollziehen können.

Aber wenn du einen Tipp hast immer her damit, bin auch immer wieder neugierig(nein, wissbegierig war ich früher mal ).

 

[GrafAlucard]

ok dann amche ich mich mal ans notebook und guck wie es da aussieht. falls jemand einen geistisblitz hat wo das problem an meinem pc ist, kann sich egrne melden:)

 

[GrafAlucard]

ok ich habe das problem mit dem streifen gelöst, war doch einfacher als gedacht, denn noch kaum zu finden...
ich habe die seite jetzt probe geladen
KGV "Einigkeit" e.V. Leipzig
jetzt würde ich gerne die karteikarten so fixieren das wenn jemand die seite größer oder kleiner macht die menüpunkte sich nicht überlabben, sondern im notfall ein scrollbalken auftaucht.
wie kann ich das machen?

 

[Tronjer]

Ersetze mal deine Prozentangaben durch Pixelwerte. Dann verschiebt sich das Layout auch nicht.

 

[GrafAlucard]

sry, ich wie sist ne dumme frage, aber wo welche werte? blicke da noch nicht so durch:(

 

[Tronjer]

Du hast bei vielen Größenangaben Prozentwerte gesetzt.

Gib mal der ID navigation eine eine feste Breite (width) in Pixeln.

 

[GrafAlucard]

wo sind da viele prozent werte?
#navigation {
color: black;
background-image: url(bg-kopfzeile2.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%, auto;
padding-top: 10px ;
padding-right: 0px;
padding-bottom: 2.5px;
padding-left: 5px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: maroon;
}
#navigation ul {
margin-bottom: 0;
}
#navigation li {
display: inline;
margin: 0;
}
#navigation a {
color: black;
background-image: url(bg-menue.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%, auto;
text-decoration: none;
padding-top: 4px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 10px;
border-width: 2px;
border-style: solid;
border-color: maroon;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#navigation a:hover {
color: black;
background-color: white;
}
#navigation a:active {
color: black;
background-color: blue;
}
das sind doch nur die 100& werte, oder meinst du diese? sry blicke echt nicht durch.

 

[threadi]

Gib #wrapper noch eine Mindestbreite (min-width) von z.B. 800px. Dadurch verhinderst Du, dass die Box kleiner als diese Breite wird.

 

[GrafAlucard]

wow das ist genau so wie ich mir das dachte:)
1000 dank.

könntest du mir noch bei meiner fußzeile helfen? sie ist nur unten wenn der seiten inhalt lang genug ist.
sonst rutscht die hoch an das ende vom inhalt.
habe zwar beispiele gefunden, aber da ich unten einen abstand habe geht das nicht, da es mir die fußzeile im ganz nach unten setzt ohne den abstand zwis chen wrapper und boddy.

 

[threadi]

Siehe: Footer immer unten anordnen