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
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL='http://www.w3.org/1999/xhtml']XHTML namespace[/URL]" 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ößern</p>
</div>
<div id="fussbereich">
<ul>
<li>© <a href="[URL='http://www.siegener-computer-service.de%22%3ESiegener']http://www.siegener-computer-service.de">Siegener[/URL] 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
Code
/* ================================================== =======
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
====================================== */