✔ Firefox macht Probleme, 2spaltig -> Hintergrundgrafik + Pixelfehler

Status
Nicht offen für weitere Antworten.
J

Jantz

Erfahrenes Mitglied
Hallo, ich bin gerade bisschen am basteln. Jedoch habe ich 2 wirklich blöde Fehler bei Firefox2 die im IE6,7 nicht auftreten!

1 Fehler: Pixelfehler

Ich habe mal ein Screenshot gemacht mit dem Fehler, vielleicht ein Firefox bug?
http://www.jan-at-work.de/s/fehler.gif


2 Fehler: Backgroundfehler beim Div! GELÖST!

Lösung: Ich habe die Hintergrundgrafik dem div "Container"zugewiesen. Dies hat geklappt, eine Erklärung kenn ich jedoch nicht!

Ich habe den Content bereich so aufgebaut, dass ein Hauptdiv die Hintergrundgrafik für das folgende 2spaltenlayout vorgibt. Komischerweise macht Firefox alles richtig (textausirchten usw.) außer das er den Hintergrund anzeigt :confused: . Wenn ich auf die besagte stelle "hintergrund anzeigen" klicke zeigt er mir im seperaten Fenster den Korrekten Hintergrund. Es sieht so aus, als würde die body definition (background-color) den Hintergrund des Divs überdecken. Wenn ich jedoch background-color auskommentiere, bleibt das Problem bestehen. (btw. lasst euch nicht vom 1Fehler Pic irritieren, hab da was anderes ausprobiert).

Hier der Code.

Code: 
body {
	background-image : url(../Bilder/bg.gif);
	background-color:#806040;
	background-repeat : repeat-x;
	font-family : Verdana, "Arial";
	font-size : 0.7em;
	padding:30px;
	margin:0px;
}

h1 {
	color : #cb8b1d;
	font-size : 1.4em;
	margin : 0;
	padding : 10px 0 0 0;
}

h2 {
	margin : 0;
	padding : 0 0 15px 0;
	color : #494949;
	font-size : 12px;
}

#Container {
	width : 802px;
	height : auto;
	margin : 0px auto;
}

#menu {
	background-color:none;
}

#menu a {
	text-decoration : none;
	color:black;
	text-decoration: underline;
}

#menu a:hover {
	background-color: white;
	text-decoration : none;
	color:black;
}


#menu table {
	padding:0px;
	margin:0px;
	height:26px;
	width:802px;
	background-color:#E0E0E0;
	border-right:1px solid white;
}

#menu td {
	padding:0px 8px;
	margin:0px 0px;
	border-top:1px solid white;
	border-left:1px solid white;
	border-right:none;
	color:black;
}

#menu a.td:hover{
	padding:0px 8px;
	margin:0px 0px;
	background-color:grey;
	border-top:1px solid white;
	border-left:1px solid white;
	border-right:none;
	color:black;
}

#content {
	width : 802px;
	height : auto;
	margin : 0px auto;
	background-image:url(../Bilder/inhalt_mitte.gif);
}

#content_links {
	width:554px;
	float:left;
}

#content_rechts {
	width:248px;
	float:right;
	border-bottom:1px solid white;
}

#content_unten {
	background-color:#A0A080;
	border:1px solid white;
	clear:both;
	width:552px;
	
}

#text_links {
	margin:20px;
}

#text_links h1 {
	color : #634D37;
	font-size : 1.4em;
	margin : 0;
	padding : 10px 0 0 0;
}

#text_recht h2 {
	margin : 0;
	padding : 0 0 15px 0;
	color : #96724E;
	font-size : 12px;
}


#text_rechts {
	margin:20px;
}

#text_rechts h1 {
	color : #634D37;
	font-size : 1.1em;
	margin : 0;
	padding : 10px 0 0 0;
}

#text_rechts h2 {
	margin : 0;
	padding : 0 0 15px 0;
	color : #96724E;
	font-size : 10px;
}

#text_unten {
	margin:20px;
}

Und der HTML Code

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">
<html>
<head>
	<title> Jan-at-work.de - Webdesign aus dem Norden</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
	<meta name="description" content="Webdesign aus Gettorf." />
	<meta name="author" content="Jan Teumer" />
	<meta name="keywords" content="Webdesign, Webseite, Homepgae, Kiel, Gettorf, Eckernförde, Rendsburg, Freelancer" />
</head>
<body>
	<div id="Container">
		<div><img src="Bilder/banner.gif" alt="banner" /></div>
		<div id="menu">
			<table cellspacing="0" cellpadding="0">
				<tr>
					<td><a href="#">Home</a></td>
					<td><a href="#">Philosophie</a></td>
					<td><a href="#">Referenzen</a></td>
					<td><a href="#">Projekte</a></td>
					<td><a href="#">Über mich</a></td>
					<td><a href="#">Kontakt</a></td>
					<td><a href="#">Partner</a></td>
				</tr>
			</table>
		</div>
		<div><img src="Bilder/inhalt_oben.gif" alt="banner" /></div>
		
		<!-- Hier beginnt der Contentbereich -->
		<div id="content">
		
			<!-- text links -->
			<div id="content_links"> 
				<div id="text_links">
					<h1>Willkommen auf Jan-at-work.de</h1>
					<h2>Webdesign aus Gettorf</h2>
					<p>
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
						dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
						lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
						esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui 
						blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, 
						consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
						Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
						consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore 
						eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit 
						augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet 
						doming id quod mazim placerat facer possim assum.
					</p>
				</div>
			</div>
			
			<!-- Text rechts -->
			<div id="content_rechts">
				<div id="text_rechts">
					<h1>Aktuelle Projekte</h1>
					<h2>Was z.Z. ansteht</h2>
				</div>
			</div>
		</div>	
			<!-- Text unten -->
			<div id="content_unten">
				<div id="text_rechts">Hallo text :D
				</div>
			</div>
		
		<!-- Schluss von Contentbereich -->
	</div>
</body>
</html>

Vielleicht kann mir ja jmd bei dem ein oder anderen Problem helfen oder einen Tip geben.

Vielen Dank schonmal im Voraus.

Lg jantz
 
Zuletzt bearbeitet:
Hi,

vielleicht hilft es, wenn du innerhalb des DIVs content nach den beiden floatenden Spalten wieder den normalen Textfluss herstellst?

Code: 
<!-- Hier beginnt der Contentbereich -->
                <div id="content">

                        <!-- text links -->
                        <div id="content_links">
                                <div id="text_links">
                                        ...
                                </div>
                        </div>

                        <!-- Text rechts -->
                        <div id="content_rechts">
                                <div id="text_rechts">
                                        ...
                                </div>
                        </div>
                        <div class="clear"></div>
                </div>
<!-- Hier endet der Contentbereich -->
Code: 
div.clear {
clear: both;
}
 
Danke, guter Tip mit dem Div!

Jop so würde es auch klappen, hatte zuvor nen
Code: 
<br style="cleat:both;" />

drinne. Der hatte jedoch paar Probleme gemacht. Das mit dem Pixelfehler liegt leider an Firefox :( .

Ich makiere dieses Thema mal als erledigt :).
 
Hi,

von welchem Pixelfehler sprichst du? :confused:

Gibt es evtl. eine Online-Version der Seite, um das mal "live" betrachten zu können?
 
Den Sreenshot kenn ich schon aus deinem ersten Beitrag. ;)

Du meinst den "Strich", der sich da in der Vertikalen wiederholt?

Diesen Darstellungsfehler kann ich im Firefox nicht reproduzieren, was evtl. an den fehlenden Grafiken liegt, von daher wäre mir ein Link zur Seite, oder alle im Dokument eingebundenen Dateien in einer ZIP-Datei lieber, als der gezeigte Schnappschuß.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück