✔ In FF verschiebt sich alles

highflyer73 · 8. Juni 2006

Hallo,
ich sitze schon seit Tagen an einem Design für unsere neue Seite und krieg es einfach nicht für IE und FF gleichermaßen hin. Entweder es sieht im IE gut aus und im FF nicht oder umgekehrt. Im Moment sieht es im IE optimal aus, im FF aber:

Ist der Text für den Content nicht an der richtigen Position
Sobald das Fenster verkleinert wird, wandert der Hintergrund ins Nimmerland, die obere und untere Leiste, die über die gesamte Fensterbreite gehen soll, wird auf der rechten Seite abgeschnitten. Sieht man wenn man nach rechts scrollt.

Die URL ist: http://www.cams-media.de/

Ich hab schon alle möglichen Varianten probiert. Mal passt alles, aber das was im oberen Bereich als Leiste ist, wird einfach in der Größe nach unten dazugerechnet. Das heißt, obwohl im unteren Bereich kein Content ist, ist ein leerer Platz dort. Mal wird es rechts und Links abgeschnitten usw. Bin langsam am verzweifeln. Könnte ein CSS Experte sich das mal anschauen? Vielen Dank

highflyer

Maik · 8. Juni 2006

Verwende für das Dokument mal einen Doctype, der den IE nicht in den Quirksmodus versetzt, da er so das Boxmodell falsch interpretiert, was dann auch die unterschiedlichen / gegensätzlichen Darstellungsweisen in den beiden genannten Browsern erklärt.

Hier das überarbeitete Stylesheet, damit sich der Text an der gewünschten Position befindet und sich die Hintergrundgrafik typo3-hintergrund.jpg beim Verkleinern des Browserfensters nicht verschiebt:

Code:

html, body {
margin: 0;
padding: 0;
text-align: center;
min-width: 100%;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
}

body {
background: url(bilder/webdesign-verlauf.jpg) repeat-x #ededed;
}

div.wrapper {
margin: 0 auto;
width: 850px;
min-height: 100%;
background: url(bilder/typo3-hintergrund.jpg) repeat-y center top;
}

* html div.wrapper { /* Für IE */
height: 100%;
}

div.header {
width: 850px;
height: 225px;
}

div.topNavi {
width: 850px;
height: 225px;
background: url(bilder/leiste.jpg) no-repeat;
}

div.navigation {
position:relative;
margin: auto;
text-align: center;
top: 200px;
padding:0px;
height:20px;
}

div.centerCol {
padding-left: 50px;
padding-right: 50px;
padding-top: 10px;
padding-bottom: 10px;
width: 650px;
margin: auto;
text-align: justify;
}

div.clear {
clear: both;
margin: 0;
padding: 0;
height: 40px;
line-height: 40px;
}

div.footer {
margin: -40px auto 0 auto;
padding: 0;
width: 100%;
height: 40px;
line-height: 40px;
background: url(bilder/typo3-verlauf.jpg) repeat-x;
}
div.unten-mitte {
margin: auto;
padding: 0;
width: 850px;
height: 40px;
line-height: 40px;
background: url(bilder/footer.jpg) no-repeat;
}
div.unten-navigation {
margin: auto;
padding: 0;
width: 768px;
height: 40px;
line-height: 40px;
}
h1 {
font-size: 12pt;
}

highflyer73 · 13. Juni 2006

Ich krieg langsam echt die Krise.
Ich hab das Ding jetzt komplett umgestellt. Zig mal probiert und es treten immer neue Probleme auf. Aktuell:

1. Die Klasse center geht nicht bis zum Browserrand in FF. Obwohl ich min-height: 100% eingestellt habe. Er geht nur soweit der Text geht.

2. Das was in FF zuwenig ist, ist im IE zuviel. Das Menu auf der linken Seite ist auf min-height: 100% eingestellt aber leider geht er über den Browserrand hinaus.

Kann sich das jemand mal anschauen? Vielen Dank.

Maik · 13. Juni 2006

Mein zuletzt erarbeiteter und empfohlener Lösungsvorschlag funktioniert bei mir in beiden Browsern einwandfrei, wie die Screenshots belegen:

Für das Dokument habe ich folgenden Doctype gewählt, damit der IE 6.0 nicht in den Quirksmodus versetzt wird:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

Und hier der vollständige HTML-Quelltext der Testseite:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--
        This website is powered by TYPO3 - inspiring people to share!
        TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
        TYPO3 is copyright 1998-2006 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
        Information and contribution at http://typo3.com/ and http://typo3.org/
-->


        <link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_71e56952f4.css" />
        <link rel="stylesheet" type="text/css" href="fileadmin/templates/suchmaschinen-optimierung.css" />
        <title>Startseite</title>
        <meta name="generator" content="TYPO3 4.0 CMS" />


</head>
<body>

<div class="wrapper">
     <div class="header">
          
          <div class="topNavi">
          <div class="navigation"><a href="online-shop/" class="linkschrift">Online Shop</a> | <a href="suchmaschinenoptimierung/" class="linkschrift">Suchmaschinenoptimierung</a> | <a href="programmierung/" class="linkschrift">Programmierung</a> | <a href="webdesign/" class="linkschrift">Webdesign</a> | <a href="typo-3/" class="linkschrift">Typo3</a> | <a href="streaming/" class="linkschrift">Streaming</a> | <a href="schulung/" class="linkschrift">Schulung</a> </div>
     </div>
     </div>

    <!--<div class="leftCol">
          leftCol
     </div>
     <div class="rightCol">
          rightCol
     </div> -->
  <div class="centerCol">
        <!--  CONTENT ELEMENT, uid:5/header [begin] -->
                <a id="c5"></a>
                <!--  Header: [begin] -->
                        <div class="csc-header csc-header-n1"><h1 class="csc-firstHeader">Willkommen bei cams-media.de - Ihre Internet-Agentur</h1></div>
                <!--  Header: [end] -->

        <!--  CONTENT ELEMENT, uid:5/header [end] -->

        <!--  CONTENT ELEMENT, uid:6/text [begin] -->
                <a id="c6"></a>
                <!--  Text: [begin] -->
                        <p class="bodytext">Seit 1998 beschäftigen wir uns mit der Konzeption und Realisierung von Internetauftritten. Angefangen mit HTML, weiterentwickelt über Editoren bis hin zu komplexen Datenbankgestützten Internetauftritten. Wir waren von Anfang an dabei.
</p>
<p class="bodytext">Unser Standort liegt in Rödental bei Coburg in Bayern. Unsere Kunden sind in ganz Deutschland vertreten.
</p>
<p class="bodytext">Wir realisieren Ihren professionellen Internetauftritt. Wir beherrschen nahezu alle gängigen Technologien und bieten unseren Kunden umfassende Lösungen an. Umfassend bedeutet für uns: Design, Technik, Suchmaschinentauglichkeit und&nbsp;Besucherzahlen gehören zusammen.
</p>
<p class="bodytext">Was nützt Ihnen die tollste Webseite wenn niemand sie findet? Wenn Sie sich diese Frage schon mal gestellt haben, sind Sie bei uns richtig. Denn wir wissen die Antwort und vor allem die Lösung.
</p>
<p class="bodytext">Unsere Kreativität und Know-How kennt keine Grenzen. Schauen Sie sich ruhig auf unseren Seiten an, was wir Ihnen bieten können und wie wir arbeiten.</p>
                <!--  Text: [end] -->

        <!--  CONTENT ELEMENT, uid:6/text [end] -->
                </div>
     <!--<div class="clear">&nbsp;</div>-->
</div>

<div class="footer"><div class="unten-mitte"><div class="unten-navigation"><a href="startseite/" class="linkschrift">Startseite</a> | <a href="kontakt/" class="linkschrift">Kontakt</a> | <a href="impressum/" class="linkschrift">Impressum</a> </div>
</div>
</div>

</body>
</html>

highflyer73 · 13. Juni 2006

vielen dank, ich hab jetzt den doctype geändert und generell alles neu aufgesetzt. klappt alles ganz gut. bis auf eine sache. wenn ich im firefox den browser verkleinere, so dass ich hoch und runter scrollen muss, verschwindet das hintergrundbild immer mehr. woran liegt das denn?

Maik · 14. Juni 2006

Die rotmarkierte XML-Angabe versetzt den IE (noch immer) in den Quirksmodus, wodurch er das Boxmodell falsch interpretiert:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Von welcher der verwendeten Hintergrundgrafiken sprichst du?

Im Firefox (1.5.0.4) verschwindet bei mir keine der Hintergrundgrafiken, wenn ich die Online-Version der Problemseite vertikal scrolle (abgesehen von den "Header"-Grafiken, die beim Runterscrollen nach oben in den nicht-sichtbaren Bereich des Browserfensters verschwinden).

Ansonsten kann ich mich nur wiederholen, daß auch dieses vermeintliche Problem in meiner vorliegenden Testseite nicht auftritt.

Und bitte achte in deinen Beiträgen auf die Groß- und Kleinschreibung, siehe Netiquette Nr.15.

Gumbo · 14. Juni 2006

Wozu verwendest du überhaupt XHTML wenn HTML doch auch ausreicht? Welchen Vorteil erhoffst du dir davon? Oder möchtest du als „zukunftsweisend“ oder als „immer auf dem neuesten Stand“ rüber kommen?

Sonst probier mal Folgendes:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Startseite</title>
	<base href="http://www.cams-media.de/cams-media/">
	<style type="text/css">
		html, body {
			height: 100%;
		}
		body {
			margin: 0;
			padding: 0;
			background: #ededed url(http://www.cams-media.de/cams-media/fileadmin/templates/bilder/typo3-hintergrund.jpg) repeat-y 50% 0;
			font-size: .3em;
		}
		#wrapepr {
			position: relative;
			min-height: 100%;
			height: 100%;
			voice-family: "\"}\"";
			voice-family: inherit;
			height: auto;
		}
		html>body #wrapper {
			height: auto;
		}
		#wrapper {
			text-align: center;
		}
		#wrapper-header {
			background: url(http://www.cams-media.de/cams-media/fileadmin/templates/bilder/webdesign-verlauf.jpg) repeat-x;
		}
		#header {
			width: 750px;
			height: 225px;
			margin: 0 auto;
			padding: 0 50px;
			background: url(http://www.cams-media.de/cams-media/fileadmin/templates/bilder/leiste.jpg) no-repeat 50% 0;
		}
		#navigation-header {
			padding-top: 200px;
		}
		#content {
			width: 750px;
			margin: 0 auto;
			padding: 0 50px;
			text-align: left;
		}
		#wrapper-footer {
			position: absolute;
			bottom: 0;
			width: 100%;
			background: url(http://www.cams-media.de/cams-media/fileadmin/templates/bilder/typo3-verlauf.jpg) repeat-x;
		}
		#footer {	
			width: 750px;
			height: 40px;
			margin: 0 auto;
			padding: 0 50px;
			background: url(http://www.cams-media.de/cams-media/fileadmin/templates/bilder/footer.jpg) no-repeat 50% 0;
		}
		#navigation-footer {
			padding-top: 10px;
		}
	</style>
	<!--[if IE]>
	<style type="text/css">
		#header,
		#content,
		#footer {
			width: 850px;
		}
	</style>
	<![endif]-->
</head>

<body>
<div id="wrapper">

	<div id="wrapper-header">
		<div id="header">
			<div id="navigation-header"><a href="online-shop/">Online Shop</a> | <a href="suchmaschinenoptimierung/">Suchmaschinenoptimierung</a> | <a href="programmierung/">Programmierung</a> | <a href="webdesign/">Webdesign</a> | <a href="typo-3/">Typo3</a> | <a href="streaming/">Streaming</a> | <a href="schulung/">Schulung</a></div>
		</div>
	</div>

	<div id="content">
		<h1>Willkommen bei cams-media.de - Ihre Internet-Agentur</h1>
		<p>Seit 1998 beschäftigen wir uns mit der Konzeption und Realisierung von Internetauftritten. Angefangen mit HTML, weiterentwickelt über Editoren bis hin zu komplexen Datenbankgestützten Internetauftritten. Wir waren von Anfang an dabei.</p>
		<p>Unser Standort liegt in Rödental bei Coburg in Bayern. Unsere Kunden sind in ganz Deutschland vertreten.</p>
		<p>Wir realisieren Ihren professionellen Internetauftritt. Wir beherrschen nahezu alle gängigen Technologien und bieten unseren Kunden umfassende Lösungen an. Umfassend bedeutet für uns: Design, Technik, Suchmaschinentauglichkeit und Besucherzahlen gehören zusammen.</p>
		<p>Was nützt Ihnen die tollste Webseite wenn niemand sie findet? Wenn Sie sich diese Frage schon mal gestellt haben, sind Sie bei uns richtig. Denn wir wissen die Antwort und vor allem die Lösung.</p>
		<p>Unsere Kreativität und Know-How kennt keine Grenzen. Schauen Sie sich ruhig auf unseren Seiten an, was wir Ihnen bieten können und wie wir arbeiten.</p>
	</div>

	<div id="wrapper-footer">
		<div id="footer"><div id="navigation-footer"><a href="startseite/">Startseite</a> | <a href="kontakt/">Kontakt</a> | <a href="impressum/">Impressum</a></div></div>
	</div>

</div>
</body>
</html>

Die Stilangaben für den Internet Explorer werden wahrscheinlich nicht stimmen, da ich keinen Internet Explorer zum Teste zur Hand habe.

highflyer73 · 14. Juni 2006

Im Prinzip ist es mir egal, welchen Doctype ich verwende. Hauptsache es funktioniert. Jedenfalls hatte ich gestern mit einem Trick die Hintergrundfarbe zwar hingekriegt, 100%ig ist es aber nicht. Habe es wieder wie vorher. Könnt ihr euch mal in FF anschauen. Sobald ich den Browser so verkleinere dass ich hoch und runter scrollen muss, verschwindet das Hintergrundbild immer mehr. Ich lass es mal so lange stehen, bis ihr das gesehen habt.

Maik · 14. Juni 2006

Hast du eigentlich mal meinen Lösungsvorschlag vom 08.Juni "eins-zu-eins" übernommen?

Ich geb dir einen Tipp: er funktioniert in allen mir zur Verfügung stehenden Browsern einwandfrei.

Nachtrag: in der Doctype-Deklaration fehlt am Ende die schliessende >-Klammer:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

Und werfe (noch) mal einen Blick auf CSS 4 You - The Finest in Stylesheets: Workshop Doctype-Switch: Teil 2 - Browser-Übersicht, um einen Doctype auszuwählen, der den IE nicht in den Quirksmode versetzt.

highflyer73 · 14. Juni 2006

Ja, hab ich übernommen. Da trat aber ein anderes Problem auf. Nämlich dass der Footer nach oben wanderte sobald ich den Browser kleiner gemacht hab. Ich stell das mal ein. Dann siehst es. Hoffe du hast aber den Hintergrund gesehen wie es im Moment in FF aussieht.

// edit

Komisch, jetzt gehts soweit bis auf paar Kleinigkeiten. Muss noch das Submenu auf der linken Seite einbauen. Mal schauen wie es dann aussieht. Vielen Dank erstmal.

✔ In FF verschiebt sich alles

highflyer73

Maik

highflyer73

Maik

highflyer73

Maik

Gumbo

Erfahrenes Mitglied

highflyer73

Maik

highflyer73

Neue Beiträge