CSS wird in Firefox nicht dargestellt

chantal

Hallo Profis!
Ich bin absolut amateurin und bastle als "hobby". Ich will für eine Sportveranstaltung eine Website erstellen. Sieht in iex tip top aus, aber das CSS wird in Firefox nicht angezeigt. Wie kann ich das Problem beheben? Hier noch die CSS Codes:
Ich bin um jeder Tipp super dankbar! Vielen Dank. Chantal

HTML

/* CSS Document */
html, body {
 height:100%
}
body {
 text-align:center;
 background-color:#dcdcdc;
 margin:0px;
 padding:0px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:11px;
 color:#0e3f6d;
}
h2 {
 margin:0px;
 padding:0px;
 line-height:15px;
 color:#1e88e8;
 font-size:12px;
 font-weight:bold;
 background-image:
 background-repeat:no-repeat;
 padding-left:20px;
}
a {
 color:#0e3f6d;
 text-decoration:none;
}
a:hover {
 color:#0e3f6d;
 text-decoration:underline;
}
/* Classes */
div.inlay {
 margin:26px;
}
div.inlay2 {
 margin:20px;
}
div.welcomebox {
 width:605px;
 height:142px;
 background-color:#1e88e8;
 color:#ffffff;
 background-image:url('img/bg_welcomebox2.jpg');
 background-repeat:no-repeat;
 background-position:top left;
 margin-bottom:20px;
}
div.welcomebox p {
 margin-top:10px;
 margin-bottom:0px;
 margin-left:80px;
}
img.right {
 margin-left:10px;
}
div.welcomebox h1 {
 margin:0px;
 padding:0px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:11px;
 color:#ffffff;
 font-weight:bold;
 padding-top:10px;
 margin-left:80px;
}
div.teaserbox {
 float:left;
 width:302px;
 height:250px;
}
div.teaserbox2 {
 float:left;
 width:600px;
}
div.teaserbox p, div.teaserbox2 p {
 margin-left:20px;
}
div.sep {
 border-bottom:1px dotted #6eb2f0;
 color:#ffffff;
 margin:10px;
}
/* IDs */
#wrapper {
 text-align:left;
 width:956px;
 margin:0 auto;
 height:100%;
 background-image:url('img/bg_wrapper.jpg');
}
#uphead {
 float:left;
 width:956px;
 height:30px;
 background-image:url('img/bg_uphead2.jpg');
}
#head {
 float:left;
 width:956px;
 height:161px;
}
#logobox {
 float:left;
 width:295px;
 height:161px;
 background-image:url('img/bg_logo1.jpg');
}
#logobox img {
 padding:0px;
 border:0;
 margin-left:28px;
}
#logobox h1 {
 margin:0px;
 padding:0px;
 margin-right:10px;
 font-family: Tahoma, sans-serif;
 font-size:48px;
 color:#0e3f6d;
 font-weight:normal;
 text-align:right;
}
#logobox h4 {
 margin:0px;
 padding:0px;
 margin-right:10px;
 margin-top:-10px;
 font-family: Tahoma, sans-serif;
 font-size:15px;
 color:#0e3f6d;
 font-weight:bold;
 text-align:right;
}
#topnavi {
 float:left;
 width:956px;
 height:42px;
 background-image:url('img/bg_topnavi1.jpg');
}
#topnavi ul {
 margin:0px;
 padding:0px;
 margin-left:50px;
 list-style-type:none;
}
#topnavi ul li {
 float:left;
 margin-top:6px;
 height:25px;
 background-image:url('img/topnavi_norm1.jpg');
 margin-left:4px;
}
#topnavi ul li.select {
 float:left;
 margin-top:6px;
 height:25px;
 background-image:url('img/topnavi_select.jpg');
 margin-left:4px;
}
#topnavi ul li a {
 display:block;
 color:#ffffff;
 font-weight:bold;
 font-family:Arial, sans-serif;
 font-size:12px;
 text-decoration:none;
 padding-left:30px;
 padding-right:30px;
 line-height:25px;
}
#topnavi ul li a:hover {
 display:block;
 color:#ffffff;
 font-weight:bold;
 font-family:Arial, sans-serif;
 font-size:12px;
 text-decoration:underline;
 padding-left:30px;
 padding-right:30px;
 line-height:25px;
}
#topnavi ul li.select a {
 display:block;
 color:#0e3f6d;
 font-weight:bold;
 font-family:Arial, sans-serif;
 font-size:12px;
 text-decoration:none;
 padding-left:30px;
 padding-right:30px;
 line-height:25px;
}
#topnavi ul li.select a:hover {
 display:block;
 color:#0e3f6d;
 font-weight:bold;
 font-family:Arial, sans-serif;
 font-size:12px;
 text-decoration:underline;
 padding-left:30px;
 padding-right:30px;
 line-height:25px;
}
#contentbody {
 float:left;
 width:956px;
 background-image:url('img/bg_contentbody.jpg');
}
#contentbox {
 float:left;
 width:660px;
}
#rightbox {
 float:left;
 width:296px;
 padding-bottom:20px;
}
#rightbox h3 {
 margin:0px;
 padding:0px;
 background-image:url('img/bg_h3.jpg');
 height:24px;
 color:#0e3f6d;
 font-size:11px;
 font-weight:bold;
 line-height:24px;
 font-family:Arial, Helvetica, sans-serif;
 padding-left:40px;
}
#rightbox ul {
 margin:0px;
 padding:0px;
 list-style-type:none;
 background-color:#ACDFFC;
 width:204px;
 padding-top:20px;
 padding-bottom:20px;
 margin-bottom:20px;
 margin-left:20px;
}
 
#rightbox ul li a {
 display:block;
 line-height:26px;
 color:#3a96fc;
 font-family:Arial, Helvetica, sans-serif;
 font-size:11px;
 font-weight:bold;
 padding-left:20px;
 padding-right:20px;
 text-decoration:none;
}
#rightbox ul li a:hover {
 display:block;
 line-height:26px;
 color:#3a96fc;
 font-family:Arial, Helvetica, sans-serif;
 font-size:11px;
 font-weight:bold;
 padding-left:20px;
 padding-right:20px;
 text-decoration:underline;
}
#rightbox ul li.select a {
 display:block;
 line-height:26px;
 color:#0e3f6d;
 font-family:Arial, Helvetica, sans-serif;
 font-size:11px;
 font-weight:bold;
 padding-left:20px;
 padding-right:20px;
 text-decoration:none;
}
#rightbox ul li.select a:hover {
 display:block;
 line-height:26px;
 color:#0e3f6d;
 font-family:Arial, Helvetica, sans-serif;
 font-size:11px;
 font-weight:bold;
 padding-left:20px;
 padding-right:20px;
 text-decoration:underline;
}
#rightbox p {
 padding-left:30px;
 padding-right:80px;
}
#footer {
 float:left;
 width:956px;
 height:60px;
 margin-bottom:20px;
 background-image:url('img/bg_footer.jpg');
 text-align:center;
 line-height:45px;
 color:#ffffff;
}
#footer a {
 color:#ffffff;
 text-decoration:none;
}
#footer a:hover {
 color:#ffffff;
 text-decoration:none;
}

Alles anzeigen

MrMurphy

Hallo,

wenn das CSS gar nicht angezeigt wird, hilft der Inhalt der CSS-Datei wenig.

Entweder wurde die Seite aus dem Cache geladen (mehrmals F5 drücken) oder die Pfadangabe stimmt nicht. Mit den bisherigen Informationen kann man aber nur raten.

Beliebte Fehler bei Pfad- und Dateinamen sind:

Groß-/Kleinschreibung nicht beachtet
Leerzeichen
Sonderzeichen
Umlaute

Deshalb sollten nur die Buchstaben (und am besten nur die kleinen) des englischen Alphabets sowie der Unterstrich genommen werden.

Gruss

MrMurphy

imRa

strg+f5 wenn schon - klappt auch immer beim ersten mal xD ein weitere fehler ist oftmals schlicht der falsche pfad zur css. daher den link zur css datei bitte immer mit / angeben. das / symbolisiert den root ordner, von dort aus schreibst du dann den pfad rein. ansonsten geb uns doch mal bitte einen link zu der seite oder poste den head-block. ps: kennst du den unterschied zwischen id und class bei html/css? jede id darf laut standard nur einmalig benutzt werden, klassen hingegen beliebig oft. also ersetze bitte solchen code

Code

#footer a { color:#ffffff; text-decoration:none; } #footer a:hover { color:#ffffff; text-decoration:none; }

durch solchen

Code

a.footer, a.footer:hover { color:#ffffff; text-decoration:none; }

das ganze wird dann anstelle von <a href* id=*> mit <a href* class"footer"> in html geschrieben.

Tobse

Habt ihr nich gelesen?

Zitat von cahntal

Sieht in iex tip top aus,

D.h, der IE grifft auf das Sylesheet zu. Es kann sein, dass du im HTML-Code vergessen hast, ein type-Attribut hibnzuzufügen. Wenn das nicht text/css ist, laden es die Gecko-Browser (Firefox, Opera, Netscape) nicht.
Andernfalls kann es sein, dass du die datei einfach mal in .txt umbenennen musst und dann wieder turück in .css, das hat bei mir schon wunder gewirkt.

threadi

Oder die eingebundene CSS-Datei wird mit einem falschen Content-type ausgeliefert. Der IE verarbeitet das oft anders als andere Browser.

imRa

sry aber was du schreibst stimm so einfach nicht...ein

Code

<link rel="stylesheet" href="test.css">

ist voellig ausreichend und valid. jegliche fehlinterpretation seitens des browsers waere demnach ein programmierungsfehler dessen! ein umbenennen der datei kann auch kein wunder bewirken, es ist dem browser schlichtweg egal wie oft du von datei x die endung hin und her aenderst -es sei denn er cashed nicht oder nur falsch, allerdings waere dann noch immer ein strg+f5 schneller und effektiver. abgesehen davon waren die vier angesprochene von murphy lediglich ein hinweis auf gerne begangene fehler, meiner diente nur zur ergaenzung.

chantal

Vielen Dank allerseits für die Tipps.
Der link auf die CSS-Sheet sieht so aus:

<style type="text/css" media="all">
@import "global.css";
</style>

Soll ich hier etwas ändern?
Ctrl + F5 hat gar nichts gebracht

Tobse

ja. Schreib

Code

<link href="global.css" rel="stylesheet" type="text/css" media="screen">

chantal

Mmmh... leider hat es nichts geändert

Hier noch der Link zur Website

http://www.womensmasters.ch/2011/index.html

imRa

hi, kein wunder das du probleme hast. dein link tur csss datei zeigt auf eine lokale windowsdatei. bitte aender folgende zeile

Code

<link href="file:///C|/Users/Laurence%20Bidaud/Documents/Website%20Women%27s%20Masters/2011/global.css" rel="stylesheet" type="text/css" media="screen">

folgendermassen um

Code

<link rel="stylesheet" href="/2011/global.css">

wenn du willst kannst du den type mit angeben, dies ist allerdings nicht notwendig.

bitte passe noch deine ganzen links nach dem gleichen prinzip an, denn auch dort hast du lokale links gesetzt.

chantal

Es klappt bestens so! Vielen Dank. Ich habe allerdings noch ein Problem mit dem unteren Link. Sieht in iex perfekt aus...aber die Tabelle ist bei Firefox rechts verschoben....

http://www.womensmasters.ch/2011/seiten/registration.html

Kann mir da auch jemand helfen?

Vielen Dank, Chantal

imRa

natuerlich funktiniert es ;} achte aber bitte darauf das du die pfade anpasst sobald dein neues werk die alte seite ersetzen wird - sonst hast du das gleiche problem wieder.

ohje...erm bei deinem quellcode mach ich es dir lieber leicht, ist zwar alles andere als sauber aber es wird funktinieren und darauf kommt es dir ja an xD

loesche bitte das letzte

Code

</div>

in folgender zeile

Code

[FONT=monospace]
[/FONT]<div class="inlay2"><span class="Stil36 Stil36 style85"><font size="2"><span class="style75">All fields marked with an astrix must be correctly filled out.</span></font></span></div></div>

und fuege es nach

Code

</form></h2>

ein. dann kannst du noch unten im footer div eine andere schriftfarbe auswaehlen, damit man den text auch lesen kann und das ? nach copyright durch

Code

&copy;

ersetzen.

Unregistriert

Siehe auch http://validator.w3.org/check?uri=http…=Inline&group=0

chantal

Vielen Dank imRa! Du hast mir recht geholfen... ja und betreffend "unorthodoxe" Codes... na ja, ich weiss, ich habe recht gebastelt... nur learning by doing... aber für meine Zwecke reicht es für den Moment

Tags