Anzeige:
Ergebnis 1 bis 2 von 2

Thema: CSS: Positionierungsfehler in Firefox

  1. #1
    frankpr
    Gast

    CSS: Positionierungsfehler in Firefox

    Hallo!

    Gegenwärtig programmiere ich meine Webseite neu, komplett in XHTML+CSS, Auf Tabellen und Frames möchte ich komplett verzichten.
    In der Bilder galerie habe ich im Firefox ein Problem mit der Positionierung der einzelnen Elemente.
    Ich habe eine Box erstellt, in der sich 4 weitere Boxen befinden, in denen sich die Vorschaubilder und ggf. erläuternder Text befinden. Jetzt habe ich das Problem, daß beim ersten Bild der ersten Box Text dabei ist, bei den weiteren 3 nicht. Die nächste Box wird nicht genau unter der ersten positioniert, sondern rechts neben dem ersten Bild der ersten Box etwas nach unten verschoben (genau um die padding und margin Werte). Außerdem wird die Hintergrundfarbe nur so hoch dargestellt, wie die Summe aller zutreffenden padding und margin Werte beträgt, darunter wird als Boxhintergrung wieder der Seitenhintergrund genommen.
    In IE6, Opera, Konqueror wird das Ganze korrekt dargestellt.

    Hier mal alles relevante aus den Stylesheet, was die Darstellung der Boxen betrifft:
    Code:
    body             
    	{
    	color: rgb(0, 0, 102);
    	background-image: url(back1.jpg);
    	background-attachment: fixed;
    	font-family: 'Bitstream Vera Serif', 'Microsoft Sans Serif', 'Sans Serif';
    	font-style: normal;
    	font-weight: normal;
    	font-size: 10pt;
    	overflow: auto;
    	}
    		#sitebox
    			{
    			width: 770px;
    			margin: 0 auto;
    			padding: 0.5em;
    			font-family: 'Bitstream Vera Serif', 'Microsoft Sans Serif', 'Sans Serif';
    			text-align: left;
    			}
    		.picgroup
    			{
    			width: 100%;
    			border: 0px solid black;
    			padding: 5px;
    			text-align: justify;
    			}
    		.picbox
    			{
    			width: 170px;
    			float: left;
    			padding: 5px;
    			}
    		.picbox img
    			{
    			display: inline;
    			margin: 10px;
    			text-align: center;
    			width: 150px;
    			height: 100px;
    			}
    und der betreffende HTML Code:
    Code:
    <div id="sitebox">
    
    	<div class="picgroup">
    
    		<div class="picbox">
    			<a href="tiere/stoerche/vetschau05/vetschau01.jpg" target="_blank"><img src="tiere/stoerche/vetschau05/vetschau01.jpg"></img></a><br>
    			Ein Eindruck von der Umgebung des Nestes, im Bild der Webcam ist die ja nicht zu sehen.
    		</div>
    
    		<div class="picbox">
    			<a href="tiere/stoerche/vetschau05/vetschau02.jpg" target="_blank"><img src="tiere/stoerche/vetschau05/vetschau02.jpg"></img></a>
    		</div>
    
    		<div class="picbox">
    			<a href="tiere/stoerche/vetschau05/vetschau03.jpg" target="_blank"><img src="tiere/stoerche/vetschau05/vetschau03.jpg"></img></a>
    		</div>
    
    		<div class="picbox">
    			<a href="tiere/stoerche/vetschau05/vetschau04.jpg" target="_blank"><img src="tiere/stoerche/vetschau05/vetschau04.jpg"></img></a>
    		</div>
    
    	</div>
    
    	<div class="picgroup">
    
    		<div class="picbox">
    			<a href="tiere/stoerche/vetschau05/vetschau05.jpg" target="_blank"><img src="tiere/stoerche/vetschau05/vetschau05.jpg"></img></a>
    		</div>
    
    		<div class="picbox">
    			<a href="tiere/stoerche/vetschau05/vetschau06.jpg" target="_blank"><img src="tiere/stoerche/vetschau05/vetschau06.jpg"></img></a>
    		</div>
    
    		<div class="picbox">
    			<a href="tiere/stoerche/vetschau05/vetschau07.jpg" target="_blank"><img src="tiere/stoerche/vetschau05/vetschau07.jpg"></img></a>
    		</div>
    
    		<div class="picbox">
    			<a href="tiere/stoerche/vetschau05/vetschau08.jpg" target="_blank"><img src="tiere/stoerche/vetschau05/vetschau08.jpg"></img></a>
    		</div>
    
    	</div>
    
    </div>
    Kann evtl. jemand einen Fehler sehen, der mir schon gar nicht mehr auffällt, oder ist jemandem ein entsprechender Bug im Firefox (1.0.6) bekannt?

    Danke

    Edit: ich habe zur Verdeutlichung noch Screenshots angehängt.
    Geändert von frankpr (31-08-2005 um 19:08 Uhr)

  2. #2
    frankpr
    Gast
    Habs gefunden.
    Wen es interessiert, in der Klasse .picgroup muß auch float: left; stehen, dann stimmts.

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •