Browserübergreifende Pixel/unregelmäßige Abstände?

Doombringer · 16.12.2013

Heya!

Ich hoffe, ich sehe nicht bloß vor lauter Bäumen den Wald nicht mehr, aber ich habe da ein kleines Problem und hoffe, dass ihr mir dabei weiterhelfen könnt:

Das Ziel:
Ich habe eine Galerie bestehend aus gleichseitigen Thumbnails (150x150).
Ich habe mich einem Script bedient, welches die anderen Thumbs außer dem Ausgewählten (hover) ausblendet (opacity).
Unter die eigentlichen Thumbs habe ich exakt die gleichen in schwarz-weiß gelegt, so dass der Eindruck entsteht, die unausgewählten Bildchen würden schwarz-weiß werden (bedinbgt durch die darüberliegenden Farbigen, die bei Transparenz die sw-Bildchen darunter freigeben).

Zwischen den Thumbs soll ein Pixelabstand von 2px liegen.
Und jetzt kommt das Problem:
Diese 2px scheinen, je nach Browser, unterschiedlich interpretiert zu werden.
Ich bekomme es nicht auf die Reihe, die farbigen und die sw-Bilder genau übereinanderzulegen. Wenn sie in Opera sitzen, sind sie in anderen Browsern schief. Opera ist übrigens der einzige Browser, in dem sie überhaupt deckungsgleich werden, in Firefox zum Beispiel scheinen die Reihen unregelmäßig zu sein, da ist eindeutig an einer Stelle ein Abstand von 2px, an anderer Stelle ist der Abstand dann wieder größer. So geht das natürlich nicht auf.

Ich hoffe, dass das halbwegs verständlich geschrieben war.
Hier jetzt noch ein wenig Code, vielleicht wird es dadurch ersichtlicher:

html:

HTML:

<div class="content">
		<a href="./source/artwork/Distant%20Horizon.jpg" rel="lightbox[artwork]" title="Distant Horizon"><img src="./source/artwork/thumbs/Distant%20Horizon.jpg" class="artwork" alt=""/></a>
		<a href="./source/artwork/Continuum%20Asteroids.jpg" rel="lightbox[artwork]" title="Continuum"><img src="./source/artwork/thumbs/Continuum%20Asteroids.jpg" class="artwork" alt=""/></a>
		<a href="./source/artwork/Exitus%20Pyramids%20Grain.jpg" rel="lightbox[artwork]" title="Exitus"><img src="./source/artwork/thumbs/Exitus%20Pyramids%20Grain.jpg" class="artwork" alt=""/></a>
		<a href="./source/artwork/Lost%20Titan.jpg" rel="lightbox[artwork]" title="Lost Titan"><img src="./source/artwork/thumbs/Lost%20Titan.jpg" class="artwork" alt=""/></a>
		<a href="./source/artwork/White%20Star.jpg" rel="lightbox[artwork]" title="White Star"><img src="./source/artwork/thumbs/White%20Star.jpg" class="artwork" alt=""/></a>
		<a href="./source/artwork/Sundance.jpg" rel="lightbox[artwork]" title="Sundance"><img src="./source/artwork/thumbs/Sundance.jpg" class="artwork" alt=""/></a>
		<a href="./source/artwork/A%20long%20story%20to%20go.jpg" rel="lightbox[artwork]" title="A Long Story To Go"><img src="./source/artwork/thumbs/A%20long%20story%20to%20go.jpg" class="artwork" alt=""/></a>
		<a href="./source/artwork/Silent%20Lake%20bTitle.jpg" rel="lightbox[artwork]" title="Silent Lake"><img src="./source/artwork/thumbs/Silent%20Lake%20bTitle.jpg" class="artwork" alt=""/></a>
		<a href="./source/artwork/haven-of-tranquility.jpg" rel="lightbox[artwork]" title="Haven Of Tranquility"><img src="./source/artwork/thumbs/haven-of-tranquility.jpg" class="artwork" alt=""/></a>
		<a href="#" rel="lightbox[artwork]"><img src="./source/gfx/thumb_v.png" class="artwork" alt=""/></a>
		<a href="#" rel="lightbox[artwork]"><img src="./source/gfx/thumb_v.png" class="artwork" alt=""/></a>
		<a href="#" rel="lightbox[artwork]"><img src="./source/gfx/thumb_v.png" class="artwork" alt=""/></a>
		<a href="#" rel="lightbox[artwork]"><img src="./source/gfx/thumb_v.png" class="artwork" alt=""/></a>
		<a href="#" rel="lightbox[artwork]"><img src="./source/gfx/thumb_v.png" class="artwork" alt=""/></a>
		<a href="#" rel="lightbox[artwork]"><img src="./source/gfx/thumb_v.png" class="artwork" alt=""/></a>
		<a href="#" rel="lightbox[artwork]"><img src="./source/gfx/thumb_v.png" class="artwork" alt=""/></a>
		<a href="#" rel="lightbox[artwork]"><img src="./source/gfx/thumb_v.png" class="artwork" alt=""/></a>
		<a href="#" rel="lightbox[artwork]"><img src="./source/gfx/thumb_v.png" class="artwork" alt=""/></a>
		<script type='text/javascript'>
			new FadeAround("fade=0", "artwork");
		</script>
		<div id="thumbs">
			<img src="./source/artwork/thumbs/gray_Distant%20Horizon.jpg" class="thumb" alt=""/>
			<img src="./source/artwork/thumbs/gray_Continuum%20Asteroids.jpg" class="thumb" alt=""/>
			<img src="./source/artwork/thumbs/gray_Exitus%20Pyramids%20Grain.jpg" class="thumb" alt=""/>
			<img src="./source/artwork/thumbs/gray_Lost%20Titan.jpg" class="thumb" alt=""/>
			<img src="./source/artwork/thumbs/gray_White%20Star.jpg" class="thumb" alt=""/>
			<img src="./source/artwork/thumbs/gray_Sundance.jpg" class="thumb" alt=""/>
			<img src="./source/artwork/thumbs/gray_A%20long%20story%20to%20go.jpg" class="thumb" alt=""/>
			<img src="./source/artwork/thumbs/gray_Silent%20Lake%20bTitle.jpg" class="thumb" alt=""/>
			<img src="./source/artwork/thumbs/gray_haven-of-tranquility.jpg" class="thumb" alt=""/>
			<img src="./source/gfx/thumb_v.png" class="thumb" alt=""/>
			<img src="./source/gfx/thumb_v.png" class="thumb" alt=""/>
			<img src="./source/gfx/thumb_v.png" class="thumb" alt=""/>
			<img src="./source/gfx/thumb_v.png" class="thumb" alt=""/>
			<img src="./source/gfx/thumb_v.png" class="thumb" alt=""/>
			<img src="./source/gfx/thumb_v.png" class="thumb" alt=""/>
			<img src="./source/gfx/thumb_v.png" class="thumb" alt=""/>
			<img src="./source/gfx/thumb_v.png" class="thumb" alt=""/>
			<img src="./source/gfx/thumb_v.png" class="thumb" alt=""/>
		</div>
	</div>

css:

* {
padding:0px;
margin:0px;
border:none;
}
body{
width:100%;
}
.content{
width:1014px;
margin-top:50px;
}
.artwork{
width:150px;
height:150px;
margin-bottom:2px;
margin-right:2px;
border:1px solid black;
}
.artwork:hover{
border:1px solid #2F82E0;
}
#thumbs{
position:relative;
z-index:-99;
margin-top:-476px;
width:1014px;
}
.thumb{
width:150px;
height:150px;
margin-bottom:2px;
margin-right:2px;
border:1px solid black;
}

Gruß,
Doom

msblacky · 16.12.2013

AW: Browserübergreifende Pixel/unregelmäßige Abstände?

Hallo,

ich hab mir jetzt Deinen Code gar nicht angeschaut, aber jeder Browser hat ein paar html Befehle intern bereits festgelegt. Suche mal im Netz nach reset.css und binde diese in Deine Datei mit ein, damit werden alle Browserinternen html Dinge erst einmal auf 0 gesetzt und erst danach dann Deine genommen. Also ich benutze das schon länger und hab keine Probleme mit den verschiedenen Browsern, könnte ja sein das damit Deine Frage schon erledigt ist.

msblacky

patrick_l · 16.12.2013

AW: Browserübergreifende Pixel/unregelmäßige Abstände?

msblacky schrieb:
ich hab mir jetzt Deinen Code gar nicht angeschaut,

Erst lesen, dann posten. :rolleyes:

Es ist ja nett wenn du helfen möchtest, aber dann bitte sich auch mit dem Problem oder der Frage auseinandersetzen. Hier wird in den ersten drei bzw. vier Zeilen ein kurzes Reset mit Hilfe des Universal-Selektors (*) gemacht.

Kann dir aber trotzdem soweit zustimmen, das mit Hilfe eines CSS-Resets oft vieles gelöst ist. Zumindest bringt man so schnell »alle« Browser auf einen Nenner. Was aber gleichzeitig bedeutet, das selbige Angaben neu definiert werden müssen.

@Doombringer:
Erst einmal solltest du für deine Galerie eine unsortierte Liste (<ul>) verwenden. Mit Hilfe von CSS und der Pseudo-Klasse hover kannst du dann das Aussehen bzw. das Verhalten beim drüberfahren mit der Maus anpassen.

Aufbau deiner Galerie:

HTML:

<div class="content">
    <ul class="galerie">
      <li><a rel="lightbox[artwork]" href="#"><img class="artwork" src="pfad/zum/bild" alt=""/></a></li>
    <li><a rel="lightbox[artwork]" href="#"><img class="artwork" src="pfad/zum/bild" alt=""/></a></li>
    <li><a rel="lightbox[artwork]" href="#"><img class="artwork" src="pfad/zum/bild" alt=""/></a></li>
    <li><a rel="lightbox[artwork]" href="#"><img class="artwork" src="pfad/zum/bild" alt=""/></a></li>
  </ul>
</div>

Liebe Grüße, Patrick

Doombringer · 17.12.2013

AW: Browserübergreifende Pixel/unregelmäßige Abstände?

Okay, das hätte ich selbst merken müssen, vielen Dank soweit schonmal! ^^

Das eigentliche Problem hat sich damit zwar noch nicht gelöst, aber ich versuche es gerade ohne das Script zu lösen, also ohne zweite Bildchen.
Mit reinem CSS scheint es aber nicht möglich zu sein, farbige Bildchen beim hovern desaturieren zu lassen (per grayscale-filter), stattdessen werden sie einfach transparent...
Der IE scheint da mitzumachen, aber die anderen Browser brauchen offenbar eine Sonderbehandlung.