Willkommen in der Webstatt Zum Webstatt Blog und Stories
theidmann am 14.03.07 09:51

Hallo,
ich versuche mich gerade an meinem ersten XHTML/CSS Layout. Das funktioniert auch schon ganz gut, nur hab ich leider einen Anzeigefehler im Firefox. Es steht praktisch der Footer über dem Inhalt. Ich finde Fehler leider nicht. Ich hoffe mir kann hier jemand helfen.

Ich habe jeweils einen Screenshot vom IE7 und einen vom Firefox angehängt.

Gruß
Thomas

netcup.de Warum gibt es hier Werbung?
theidmann am 14.03.07 09:53

CSS - Datei

/* Start Character Encoding */
@charset "ISO-8859-1";
/* Ende Character Encoding */

html {
background-color: #d0cccc;
}

body {
width: 1024px;
margin: auto;
height: 100%;
font-family: Arial, Helvetica, Sans Serif;
font-size: 0.8em;
background-color: #ffffff;
}

/***************************************************************/
/* Start Header */
#header {
width: 1024px;
height: 120px;
background-color: #ffffff;
background-image: url(../images/header.jpg);
background-repeat:no-repeat;
background-position:left;
vertical-align: middle;
}

#header h1 a {
text-decoration: none;
text-indent: -10000px;
display: block;
width: 1024px;
height: 120px;
background-image: url(../images/header.jpg);
background-repeat:no-repeat;
background-position:left;
}
/* Ende Header */
/***************************************************************/

/***************************************************************/
/* Start Navigation */
.nav {
width: 1024px;
background-color: #000000;
padding-top: 10px;
padding-bottom: 10px;
margin-right: 0px;
}

a.nav:link, a.nav:visited {
color: #ffffff;
text-decoration: none;
font-weight: bold;
background: #000000;
padding: 10px;
margin-right: 5px;
border-right-style: solid;
border-right-color: #000000;
border-right-width: 2px;
border-left-style: solid;
border-left-color: #000000;
border-left-width: 2px;
height: 100%;
}

a.nav:hover {
color: #ffffff;
text-decoration: none;
font-weight: bold;
background: #3366ff;
}

a.nav:focus {
color: #ffffff;
text-decoration: none;
font-weight: bold;
background: #3366ff;
}


/* Ende Navigation */
/***************************************************************/

/***************************************************************/
/* Start layout_nav */
#layout_nav {
background-image: url(../images/rundung.jpg);
background-repeat:no-repeat;
background-position:left;
height: 165px;
width: 290px;
}
/* Ende layout_nav */
/***************************************************************/

/***************************************************************/
/* Start Pathway */
.pathway {
width: 1024px;
background-color: #3366ff;
padding-top: 10px;
padding-bottom: 10px;
margin-right: 0px;
background-image: url(../images/pathway.jpg);
background-repeat:no-repeat;
background-position:left;
}
/* Ende Pathway */
/***************************************************************/

/***************************************************************/
/* Container mit runden Ecken auf der Startseite */
.container_blau {
float: left;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
color: #ffffff;
}

.container_blau h1 {
text-align: center;
color: #000000;
font-size: 1.0em;
padding-top: 5px;
padding-bottom: 5px;
}

.bl {
background: url(../images/corner_03.jpg) 0 100% no-repeat #3366ff;
width: 236px;
}

.br {
background: url(../images/corner_04.jpg) 100% 100% no-repeat;
}

.tl {
background: url(../images/corner_01.jpg) 0 0 no-repeat;
}

.tr {
background: url(../images/corner_02.jpg) 100% 0 no-repeat;
padding:10px;
height: 300px;
}

.clear {
font-size: 1px;
height: 1px;
}
/* Ende Container */
/***************************************************************/

/***************************************************************/
/* Start Content / nur fuer Inhaltsseiten, wird nicht auf der
Startseite benutzt */
.content {

position:relative;
left:150px;
top:-100px;
padding-top: 5px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: auto;
margin-left: auto;
background-color: #ffffff;
width: 500px;
padding-bottom: 5px;
text-align:justify;
}

.content td {
vertical-align: top;
}

.content h1 {
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: auto;
margin-left: auto;
width: 500px;
background-color: #3366ff;
color: #ffffff;
font-size: 1.0em;
padding-top: 5px;
padding-bottom: 5px;
}

/* Ende Content */
/***************************************************************/

/***************************************************************/
/* Start Footer */
.footer {
width: 1024px;
height: 40px;
background-color: #000000;
color: #ffffff;
font-size: 12px;
text-align: center;
font-weight: bold;
}

a.footer:link, a.footer:visited {
color: #ffffff;
text-decoration: none;
font-weight: bold;
margin: 5px;
}

a.footer:hover {
color: #ffffff;
text-decoration: underline;
font-weight: bold;
}

.footer img {
vertical-align: middle;
padding-top: 5px;
padding-bottom: 2px;
}

/* Ende Footer */
/***************************************************************/


HTML-Datei

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>prosensys.de - Startseite</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="robots" content="index, follow" />
<meta name="Author" content="Prosensys, interDV, Thomas Heidmann" />
<meta name="title" content="Prosensys GmbH" />
<meta name="description" content="Mess-und Sensortechnik für die Serienproduktion,Ultraschalltechnik,Ultraschalldichtheitspruefung,Wanddickenmessung, Blasendetektion,Lunkerdetektion,CAQ-Systeme..." />
<meta name="copyright" content="Copyright &copy; 2007 interDV, Bexbach, Saarland" />
<meta name="generator" content="interDV, Bexbach" />
<meta name="keywords" content="Ultraschall,Dichtheitspruefung,Messtechnik,Sensortechnik,LabVIEW,CAQ-Systeme,Ultaschalldichtheitspruefung,Blasendetektion,Wanddickenmessung,Ultraschalltechnik" />
<meta name="page-topic" content="Firmenpr&auml;sentation" />
<meta name="page-type" content="Information" />
<meta name="content-language" content="de" />
<meta name="audience" content="all" />
<meta name="revisit-after" content="10 days" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

<style type="text/css">
<!--
@import url(css/layout.css);
-->
</style>
<link rel="shortcut icon" href="images/prosensys.ico" type="image/x-icon" />
</head>

<body>

<div id="header">
<h1><a href="index.html" title="Zur&uuml;ck zur Startseite">Prosensys GmbH - Starseite</a></h1>
</div>

<div class="nav">
<a class="nav" href="index.html">Home</a>
<a class="nav" href="">Firmenprofil</a>
<a class="nav" href="">Produkte</a>
<a class="nav" href="">Partner</a>
<a class="nav" href="">Kunden</a>
<a class="nav" href="">Kontakt</a>
</div>

<!--
<div class="pathway">
pathway
</div>
-->

<!-- 1. Container der Startseite -->
<div class="container_blau">
<div class="bl">
<div class="br">
<div class="tl">
<div class="tr">
test
</div>
</div>
</div>
</div>
</div>

<div class="clear">&nbsp;</div>
<!-- Ende erster Container der Startseite -->


<div class="footer">
Copyright &copy; 2007 Prosensys GmbH <a class="footer" href="">Home</a> | <a class="footer" href="impressum.html">Impressum</a> | <a class="footer" href="hinweis.html">rechtlicher Hinweis</a> | <a class="footer" href="http://validator.w3.org/check?uri=referer"><img src="images/valid-xhtml10-blue.png" alt="Valid XHTML 1.0 Transitional" height="31" border="0" width="88" />
</div>

</body>
</html>


Michael_Genf am 14.03.07 11:19

Servus,

kannst du vielleicht einen Link zur einer Live Version des Fehlers posten? Dann man ihn direkt im FF analysieren. Das geht viel leichter, als sich erst durch die gesamte Struktur etc durchzuarbeiten.

theidmann am 14.03.07 13:50

hallo,
ich hab den fehler mittlerweile gefunden. ich hatte vergessen ein float zu beenden. jetzt gehts. trotzdem danke.

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt