CSS Problem bei Bilderrahmen - BITTE UM HILFE

Bin mir nicht ganz sicher, aber eventuell hilft ein

display:block;

Hab es nicht ausprobiert da ich die Plugins nicht nutze.
Gruß, Philippp

a img hat scheinbar kein Padding (Innenabstand) - und beim Hovern gibt's hingegen einen solchen. Deshalb wird das Element beim Mausüberfahren breiter, als es vorher war.

Abgesehen davon rechnen einige Browser "Padding" sowie "Randbreiten" zur Gesamtbreite Hinzu, andere ziehen sie ab. Dürfte in diesem Fall allerdings wurscht sein, weil a) keine Breite angegeben ist und b) das umschließende DIV "floatet" und dadurch (sofern nicht anders angegeben) immer so groß ist wie sein Inhalt.

Die ungewollte "Verbreiterung" könntest Du z.B. "vorwegnehmen" - Also nicht erst für a:hover img einen Innenabstand angeben, sondern gleich schon für a img. Die zusätzliche Farbe kann dann beim Hovern dazukommen. Weil Innenabstand und Border "zusammengezählt" werden, müsste das "normale" Bild also ein Padding von 3px bekommen.

Mein Vorschlag wäre

.myinlinepictureleft {
	padding: 2px;
	border: 1px solid #666;
	background: #fff;
	float: left;
	margin-right: 10px;
	margin-top: 23px;
}


.myinlinepictureleft a img {
	padding: 3px;
}
 
.myinlinepictureleft a:hover img {
	padding: 2px;
	border: 1px solid #666;	 
	background: #c00;
}

Vermutlich wird der InternetExplorer aber wieder aus der Reihe tanzen, wenn das der Fall ist ...

.myinlinepictureleft {
	padding: 2px;
	border: 1px solid #666;
	background: #fff;
	float: left;
	margin-right: 10px;
	margin-top: 23px;
}


.myinlinepictureleft a img {
	padding: 2px;
	border: 1px solid #???;
	/* Hintergrundfarbe wählen, transparent funktioniert für border nicht */
}
 
.myinlinepictureleft a:hover img {
	border: 1px solid #666;	 
	background: #c00;
}

Je nachdem, was sonst noch so für Anweisungen greifen, kann's gut sein, dass die "border"-Anweisung für a img "ausgehebelt" wird. Da die üblichen hässlich-blauen Link-Ränder um Bilder drumherum ziemlich sch..ße aussehen, gibt's viele, die deshalb "sehr starke" Anweisungen wie beispielsweise

* a img { border: none }

in ihr Stylesheet schreiben. Wenn das mit dem Border also gar nicht klappen mag, mal "weiter vorne" gucken, was noch Einfluss haben könnte.

upsa ... Ich hab mir gar nicht den Quelltext angeguckt ...

<div class="myinlinepictureleft" style="width:243px">
<div class="myinlineborder"  style="width:243px"><a rel="#"><img class="myinlinepictureimg" src="#" alt="bla" title="bla" width="243" height="161"  /></a></div>
<div class="myinlinepicdescription"><span>Sonnenuntergang im Naturbad</span></div>
</div>

Demnach ... Nimm mal am besten wieder die Original-Styles ... (hätte nicht damit gerechnet, dass den umschließenden DIVs eine "Breite" mit auf den Weg gegeben wird) ...

Das ist einerseits ganz praktisch, denn damit steht schon mal etwas FEST. Andererseits doof für Ausreißer wie Internet-Explorer, der Padding und Randbreite von fixen Breiten abzieht, während andere Browser diese Werte hinzufügen ...

Aber wurscht. Jedenfalls kannst Du durch die "fixe Breite" von der Eigenschaft "overflow: hidden" Gebrauch machen. Damit bleibt alles so breit wie es festgelegt ist, auch wenn sich der Inhalt vergrößert. Überstehendes sollte "abgeschnitten" werden. Musst Du mal gucken, was wie wo wupp auf welchem Browser und so ... Kennt man ja, das Gezeter ...

:-)

Irgendwie ist der Quelltext für diese Zwecke auch ... naja ... ungeeignet, sagen wir mal so ... Man kann nicht an DREI Stellen eine fixe Breite vorgeben - und an DREI Stellen gleich auch noch Padding und Border. IE-Scheiße hin, IE-Scheiße her - Damit weicht der (immer noch am weitesten verbreitete Browser) beinahe zwangsläufig an DREI Stellen - und zwar multipliziert mit den aufaddierten Breiten vom Standard ab.

Auch wenn andere Browser auf Breiten-Angaben bei Inline-Elementen nicht reagieren, bei IE ist es nun mal möglich, einem Inline-Element zu sagen, wie breit es sein soll ...

... Fehlt nur noch so n draufstolzierter "To Cool for IE"-Button, und ich ziehe meinen Hut in absoluter Ehrfurcht ...

Am besten wäre das da auszubauen, style="width:243px", 2x!
Früher mal war es nötig floats ne Breite zu geben, verzichte aber schon lange darauf wenn sie mir nicht bekannt ist, sollte also keine Probleme machen.

Falsch, denn das steht hier
title="Sonnenuntergang im Naturbad" height="161" width="243">
und das soll bleiben, nur die DIVs die brauchen es nicht, vielleicht fällt dir jetzt auch was auf, vergleich mal ;)

öhm ... was gibst Du denn in deinen Seitentext ein, damit diese ganze DIV-Geschichte inklusive Bild "aufgebaut" wird?

Nach der Funktion müsstest Du suchen ... Und (den Bereich von myGallery hab ich noch nie genutzt ...) - wenn dort irgendwo irgendwelche "Bildmaße" berechnet und als style eingefügt werden sollten ... wechdamit.

Das Bild hat schon eine Breite und eine Höhe, das sollte reichen. Die Maße vom Rest ergeben sich aus den Maßen des Bildes (plus Innenabstand und Randdicke) - Und diese Folge-Maße sind eben nur DANN in allen Browsern gleich, wenn Du nicht noch zusätzlich "für außendrum" irgendwelche Werte wiederholst ...

Such am besten nach "myinlinepictureleft" und "myinlineborder" (ohne die ") in den Dateien die mygal mitbringt, dann findest du gleich danach bestimmt das style=\"width: $IRGENDWASINPHP \"

mygalleryfunctions.php suchen:

// build the final string


	$my_string='<div class="'.$float.'" style="width:'.$mybigimg_width.'px"><div class="myinlineborder"  style="width:'.$mybigimg_width.'px">'.$fullref_pre.'<img class="myinlinepictureimg" src="'.$myurl.$result->name.'/'.$prefix.$result->picturepath.'" alt="'.$result->alttitle.'" title="'.$result->alttitle.'" width="'.$mybigimg_width.'" height="'.$mybigimg_height.'"  />'.$fullref_post.'</div>'.$mydescription.'</div>'.$flag;
	
	return $my_string;

ersetzen

// build the final string


	$my_string='<div class="'.$float.'"><div class="myinlineborder">'.$fullref_pre.'<img class="myinlinepictureimg" src="'.$myurl.$result->name.'/'.$prefix.$result->picturepath.'" alt="'.$result->alttitle.'" title="'.$result->alttitle.'" width="'.$mybigimg_width.'" height="'.$mybigimg_height.'"  />'.$fullref_post.'</div>'.$mydescription.'</div>'.$flag;
	
	return $my_string;

Ach so, wir reden nicht aneinander vorbei.