• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage

I

it-freak2008

Neues Mitglied
Ich habe unter folgender URL eine Seite zum Test hochgeladen:
Pizza Treff Siegen
Im Internet Explorer sieht sie korrekt aus. Im Firefox ist alles durcheinander. Ich wäre für einen Patch, Fix, Lösungsansatz sehr dankbar.

Ich versuche mal den Quellcode der html und css hier noch einzufügen:

1. HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="XHTML namespace" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Pizza Treff Siegen</title>
<meta name="robots" content="index, follow" />
<meta name="Description" content="Die beste Pizza der Stadt." />
<meta name="author" content="Siegener Computer Service" />
<link href="favicon.ico" rel="shortcut icon" />
<link href="css/zentrale.css" rel="stylesheet" type="text/css" />
</head>
<body id="startseite">
<div id="oben"></div>
<div id="container">
<div id="saeule"><img src="grafiken/saeule.jpg" width="245" height="454" /></div>
<div id="logo"><img src="grafiken/top2.jpg" width="554" height="200" align="right" /></div>
<div id="navibereich">
<ul>
<li id="navi01"><strong>Startseite</strong></li>
<li id="navi02"><a href="pizza.html">Pizza</a></li>
<li id="navi03"><a href="pasta.html">Pasta</a></li>
<li id="navi04"><a href="salate.html">Salate</a></li>
<li id="navi05"><a href="imbiss.html">Imbiss</a></li>
<li id="navi06"><a href="getraenke.html">Getränke</a></li>
</ul>
</div>
<div id="auto"><img src="grafiken/auto.png" width="245" height="130" /></div>
<div id="karte">
<p><img src="grafiken/karte-klein.jpg" width="232" height="145" /><br />
<b>Anfahrt:</b> klicken zum vergr&ouml;&szlig;ern</p>
</div>
<div id="fussbereich">
<ul>
<li>&copy; <a href="http://www.siegener-computer-service.de">Siegener Computer Service 2009</a></li>
<li><a href="impressum.html" title="Gesetzliche Pflichtangaben zu dieser Site">Impressum</a></li>
</ul>
</div>
<div id="zeiten">
<p><b>Montag - Freitag:</b><br />
12:00 - 14:00 / 17:00 - 23:00
</p>
<p><b>Samstag, Sonntag, Feiertag:</b><br />
17:00 - 23:00
</p>
</div>
</div>
</body>
</html>

2. zentrale.css

/* =========================================================
Zentrales Stylesheet - wird im HEAD der Webseiten aufgerufen
Datei: zentrale.css
Datum: 2009-05-09
Autor: David Mack
========================================================== */
/* Reset, Restaurierung und grundlegende Formatierung */
@import url(fundament.css);
/* Formatierung der Navigation */
@import url(navi-sliding01.css);
/* Formatierung für den Bildschirm */
@import url(bildschirm.css);
/* Formatierung für den Drucker */
@import url(druckversion.css);
/* ======================================
E N D E zentrale.css
====================================== */

3. Bildschirm css

/* =========================================================
Stylesheet zur Formatierung am Bildschirm
Datei: bildschirm.css
Datum: 2009-05-09
Autor: David Mack
========================================================== */
@media screen {
/* ======================================
1. Allgemeine Styles
====================================== */
body {
background-color: #353535;
color: white;
}
h1 { padding:0; margin:0; }
/* Hyperlinks */
a { text-decoration: none; outline: none;}
a:link { color: #d90000; }
a:visited { color: #cc6666; }
a:hover,
a:focus {
border-bottom: 1px solid #d90000
}
a:active {
color: white;
background-color: #d90000;
}

/* ====================================
2. Styles für die Layoutbereiche
==================================== */
#oben {
width: 1px;
height: 50%;
float: left;
margin-bottom: -460px;
}
#container {
position:relative;
margin: 0 auto;
height: 920px;
width: 920px;
clear: left;
background-color:#FFFFFF;
}
#saeule {
position:absolute;
width:245px;
height:454px;
z-index:5;
left: 0px;
top: 0px;
background-color: #f6e660;
}
#logo {
position:absolute;
width:674px;
height:210px;
left: 245px;
top: 0px;
background-color: #f6e660;
}
#logo img{
padding-right: 15px;
padding-top: 5px;
}
#auto {
position:absolute;
width:245px;
height:130px;
z-index:8;
left: 0px;
top: 708px;
}
#zeiten {
position:absolute;
width:233px;
height:86px;
z-index:11;
left: 0px;
top: 454px;
color: #000;
padding-left:12px;
background-color: #f6e660;
}
#karte {
position:absolute;
width:240px;
height:167px;
z-index:10;
left: 0px;
top: 541px;
background-color: #f6e660;
padding-left: 5px;
}
#fussbereich {
position:absolute;
width: 200px;
height: 60px;
left: 0px;
top: 844px;
}
#fussbereich ul {
text-align:center;
font-size: 80%;
font-style: normal;
letter-spacing: 2px;
padding: 10px;
}
#fussbereich ul li {
list-style-type: none;
padding: 0;
margin: 0;
color: #F00;
}
/* =======================================
E N D E bildschirm.css
======================================= */

4. navi css

/* =========================================================
Stylesheet zur Gestaltung der Navigation
Datei: navi-sliding01.css
Datum: 2008-05-09
Autor: David Mack
========================================================== */
@media screen {
#navibereich {
position: absolute;
top: 210px;
left: 245px;
width: 654px;
overflow:hidden; /* containing floats (Alternativ Easy Clearing) */
color: black;
background: #f3c600 url(../grafiken/border-bottom.gif) repeat-x left bottom;
padding: 5px 10px 0px 10px;
background-color: #f6e660;
}
/* Sternchen-Hack für IE6 & Co. */
* html #navibereich { height:auto;}
#navibereich ul {
float: right;
width: auto;
margin-bottom: 0;
}
#navibereich li {
float:left;
width: auto;
background: #ffeda0 url(../grafiken/rechts.gif) no-repeat right top;
list-style-type: none;
margin: 0 ;
margin-right: 0.4em;
}
#navibereich a,
#navibereich strong {
display: block;
color: black;
background-color: #ffeda0;
font-weight: normal;
padding: 6px 8px;
border-bottom: 1px solid #8c8c8c;
}
#navibereich a {
background: transparent url(../grafiken/links.gif) no-repeat left top;
}
#navibereich a:hover,
#navibereich a:focus,
#startseite #navi01 strong,
#pizza #navi02 strong,
#pasta #navi03 strong,
#salate #navi04 strong,
#imbiss #navi05 strong,
#getraenke #navi06 strong
{
background: transparent url(../grafiken/links_aktiv.gif) no-repeat left top;
color: black;
font-weight: normal;
border-bottom-color: white;
}
#navibereich li:hover,
#navibereich li:focus,
#startseite #navi01,
#pizza #navi02,
#pasta #navi03,
#salate #navi04,
#imbiss #navi05,
#getraenke #navi06 {
background: transparent url(../grafiken/rechts_aktiv.gif) no-repeat top right;
color: black;
border-bottom-color: white;
}
#navibereich a:active {
background: transparent url(../grafiken/links_aktiv.gif) no-repeat left top;
color: #d90000;
text-decoration: underline;
}
/* Sternchen-Hack, IE < V7 versteht li:hover nicht => einfacher Hover-Effekt */
* html #navibereich a:hover,
* html #navibereich a:focus,
* html #navibereich a:active {
background: transparent url(../grafiken/links.gif) no-repeat left top;
color: #d90000;
text-decoration: underline;
border-bottom: 1px solid #8c8c8c;
}
} /* Ende @media - nicht löschen! */
/* ======================================
E N D E navi-sliding.css
====================================== */
 
Eines ist klar, Firefox liest Deine Stylesheets nicht. Sieht man auch schön im Firebug.
Aber ich hab noch nicht rausbekommen, warum das so ist.

P.S.: Das Posten des Codes hättest Du Dir sparen können, den sieht man doch auf der Seite...und viele antworten gar nicht, wenn sie von so viel Code erschlagen werden... :-)
 
Efchen schrieb:
Laut SelfHTML ist das CSS-Syntax, und was im HTML-Head innerhalb eines <style>-Tags funktioniert, sollte auch innerhalb eines externen Stylesheets funktionieren, oder nicht?
SELFHTML: Stylesheets / CSS-Formate definieren / Stylesheets in HTML einbinden
Zum Vergrößern anklicken....


Hm könnte wohl sein, aber sicher bin ich mir da nicht. Hab das auch ehrlich geasgt noch nie so verwendet. Wenn ich so dürber nachdenke könntest du recht haben, bzw hast es sogar, aber welcher Grund würde dafür sprechen dies so anzuwenden? Damit nur eine CSS im Chache ist? Aber dennoch setzt sich diese eine CSS aus zich zusammen, was ja auch Ladezeit verursacht.


Grüßle
Loon3y

P.S.: selfhtml == veraltet...man sollte sicherheitshalber noch andere Quellen dazuholen..mal googlen.

Edit:
W3C Spezifikation:
6.3 The @import rule

The '@import' rule allows users to import style rules from other style sheets. In CSS 2.1, any @import rules must precede all other rules (except the @charset rule, if present). See the section on parsing for when user agents must ignore @import rules. The '@import' keyword must be followed by the URI of the style sheet to include. A string is also allowed; it will be interpreted as if it had url(...) around it.
Example(s):
The following lines are equivalent in meaning and illustrate both '@import' syntaxes (one with "url()" and one with a bare string):
@import "mystyle.css";
@import url("mystyle.css");

So that user agents can avoid retrieving resources for unsupported media types, authors may specify media-dependent @import rules. These conditional imports specify comma-separated media types after the URI.
Example(s):
The following rules illustrate how @import rules can be made media-dependent:
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;

In the absence of any media types, the import is unconditional. Specifying 'all' for the medium has the same effect. The import only takes effect if the target medium matches the media list.
A target medium matches a media list if one of the items in the media list is the target medium or 'all'.
Note that Media Queries [MEDIAQ] extends the syntax of media lists and the definition of matching.
When the same style sheet is imported or linked to a document in multiple places, user agents must process (or act as though they do) each link as though the link were to a separate style sheet.
Zum Vergrößern anklicken....

EDIT2: hab das jetzt mal getestet mit dem @import in einer css-datei und es geht nicht....
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben