Anzeigefehler im FF

Status
Nicht offen für weitere Antworten.
L

Lemmygoe

Grünschnabel
Hallo,
da ich blutiger Anfänger in Sachen CSS Design bin, habe ich mir Euer Tutorial "Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken" hergenommen und wollte es für meine Zwecke anpassen.

In die Klasse #Oben wollte ich jetzt meine Navi einbauen, etwa so:

HTML: 
 <div id="oben">
  <div class="inhaltDiv">
    <p><img src="gfx/01.png" alt="1" width="205" height="14" /><img src="gfx/02.png" alt="" width="317" height="14" /><img src="gfx/disclamer.png" alt="" width="78" height="14" /><img src="gfx/kontakt.gif" alt="" width="71" height="14" /><img src="gfx/impressum.png" alt="" width="89" height="14" /><br />  
     <img src="gfx/08.png" alt="" width="205" height="55" /><img src="gfx/Logo.png" alt="" width="388" height="55" /><img src="gfx/07.png" alt="" width="167" height="55" /><br />    
     <img src="gfx/4_09.png" alt="" width="205" height="52" /><img src="gfx/4_10.png" alt="" width="388" height="52" /><img src="gfx/09.png" alt="" width="167" height="52" /><br />  
       <img src="gfx/10.png" alt="" width="205" height="20" /><img src="gfx/4_13.png" alt="" width="50" height="20" /><img src="gfx/news.png" alt="" width="53" height="20" /><img src="gfx/fotos.png" alt="" width="65" height="20" /><img src="gfx/videos.png" alt="" width="78" height="20" /><img src="gfx/awards.png" alt="" width="79" height="20" /><img src="gfx/team.png" alt="" width="59" height="20" /><img src="gfx/gb.png" alt="" width="100" height="20" /><img src="gfx/links.png" alt="" width="71" height="20" /></p>    </div></div>

Im IE sieht das auch ordentlich aus, nur im Firefox gibts seltsame leere Spalten zwischen den Bilderreihen. Habe schon Google sowie die Suchfunktion dieses Forums befragt und komme nicht weiter.

So die gewünschte Darstellung im IE.
IE.JPG


So die (fehlerhafte) Darstellung im FireFox.
FF.JPG


Über Antworten würd ich mich freuen und bedanke mich schon im Voraus.

Gruß
Jens
 
Probier mal folgendes:

CSS: 
img {
display: block;
float: left;
}

p {
margin: 0;
padding: 0;
clear: left;
}
HTML: 
<div id="oben">
  <div class="inhaltDiv">
    <p><img src="gfx/01.png" alt="1" width="205" height="14" /><img src="gfx/02.png" alt="2" width="317" height="14" /><img src="gfx/disclamer.png" alt="3" width="78" height="14" /><img src="gfx/kontakt.gif" alt="4" width="71" height="14" /><img src="gfx/impressum.png" alt="5" width="89" height="14" /></p>
    <p><img src="gfx/08.png" alt="" width="205" height="55" /><img src="gfx/Logo.png" alt="test" width="388" height="55" /><img src="gfx/07.png" alt="" width="167" height="55" /></p>
    <p><img src="gfx/4_09.png" alt="" width="205" height="52" /><img src="gfx/4_10.png" alt="" width="388" height="52" /><img src="gfx/09.png" alt="" width="167" height="52" /></p>
    <p><img src="gfx/10.png" alt="" width="205" height="20" /><img src="gfx/4_13.png" alt="" width="50" height="20" /><img src="gfx/news.png" alt="" width="53" height="20" /><img src="gfx/fotos.png" alt="" width="65" height="20" /><img src="gfx/videos.png" alt="" width="78" height="20" /><img src="gfx/awards.png" alt="" width="79" height="20" /><img src="gfx/team.png" alt="" width="59" height="20" /><img src="gfx/gb.png" alt="" width="100" height="20" /><img src="gfx/links.png" alt="" width="71" height="20" /></p>
  </div>
</div>
 
Bei mir besteht das Problem nicht; Testumgebung: Win2k, FF 1.5, IE 6.0.

Stellt sich die Frage, welche CSS-Formatierungen die beiden übergeordneten DIVs besitzen?
 
Hallo, nochmals vielen Dank für Deine Mühe,
habe das Ganze jetzt über den Haufen geworfen, mich nochmal näher mit dem Thema CSS auseinander gesetzt und siehe da ich bin schon fast bei dem gewünschten Ergebnis, nur noch eine Kleiningkeit bereitet mir Kopfzerbrechen und zwar das "eintauchen" des Scrollbalkens für den Contentbereich in den Footer. Schön wärs, wenn ich die untere Kante des Scrollbalkens an der Oberkante des Footers abschließen lassen könnte.

http://lemmygoe.le.ohost.de/Pfreaks/ndex.php?section=links

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
	
background-color:#283d8c;
}
html, body {
overflow: hidden;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	padding: 0;
}
body,td,th {
	color: #FFFFFF;
}
-->
</style></head>
<div style="width:760px;height:144px;position:absolute; left:50%; top:0; margin-left:-380px; overflow: hidden; z-index: 4;">
<? include ("Top.tpl"); ?>
</div>
<div style="width:760px; height:100%; position:absolute; left:50%; top:143px; bottom: 50px; margin-left:-380px;overflow:auto;background-color:#283d8c;">
<?
switch($section){
case "news": include("news.tpl"); break;
case "links": include("links.php"); break;
case "team": include("team.html"); break;
default: include("news.tpl"); break;
}
?> 
</div>
<div style="width:760px;height:50px; position:absolute; left:50%; bottom:0; margin-left:-380px; overflow: hidden; padding: 0; background-color:#283d8c;">
<? include ("unten.tpl"); ?>
</div>
<body>
</body>
</html>

Wenn da noch jemand einen Rat wüsste, wäre das prima.

Gruß
Jens
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück