css: a p img - problem

[maks]

Hi!

Ich würde ganz gerne Links mit border gestalten.
Es gibt nun ein Problem mit verlinkten Bildern innerhalb der Posts.
Diese bekommen nämlich auch den Rahmen zugewiesen, was eigentlich nicht so sein sollte.
Genauer gesagt umgibt die Bilder ein <p>, welches den Rahmen bekommt.

Nun kriege ich die Bilder nicht mit css zu fassen, um es dort auszuschalten.
D.h. die Bilder bekomme ich natürlich schon, nur nicht das <p>, welches die Links umfasst und aus einem mir unbekannten Grund den Link bekommt.
Obwohl der Quelltext des veröffentlichen posts so aussieht: <p><a><Img></a></p>
Komscherweise wird der border wird dem äußeren p zugewiesen.

Im css steht zu links nur das: p a:link {border:...;}

Hat jemand eine Idee, wie das möglichst mit css zu lösen wäre? Oder kennt jemand einen Editor, der <br /> statt <p> verwendet, um Absätze zu machen? Klar, wäre nicht valide, aber das ist in diesem Fall nicht wichtig.
An Editoren habe ich jetzt den normalen tiny, tinymce advanced und fck getestet.

m.

[Alphawolf]

Hmm, das wird rein mit CSS IMO nicht gehen. Du müsstest Links um Bilder mit einer Klasse auszeichnen, um den Border dann wegzubekommen. Oder andersrum, dass standardmäßig Links keinen Rahmen bekommen, sondern nur Links, die du mit einer Klasse auszeichnest...

Man müsste auch die Seite sehen... wenn die Bilder von einem Plugin kommen, so wird der Bereich vllt von einem DIV umschlossen, worin man dann die Links entsprechend gesondert ansprechen könnte..

[maks]

Ja, mittlerweile ist es mir auch gedämmert, dass es ohne eindeutige Klassen nicht gehen wird.
Die Bilder kommen von einem Plugin. Ich denke auch, dass ich es hinbekäme, dem beizubringen den <img> tag mit einer Klasse zu versehen.

Das Problem ist ja aber nicht, dass ich nicht auf die img's mit css zugreifen kann - das geht ja - sondern dass die Formatierung dem <p> zugewiesen wird, welches das Bild umgibt.

Und die <p>'s kommen vom Editor.

[Monika]

Zitat von maks

....

Im css steht zu links nur das: p a:link {border:...;}
....

gut dann verbiete den verlinkten Bildern den Rahmen

PHP-Code:

p a:link img{border:none;} 


[maks]

Na das ist doch das Problem!

Das funktioniert alles nicht.

OK. hier nochmal das komplette css:

.entry p a:link, .entrytext p a:link, .entry p a:visited, .entrytext p a:visited {
	border-bottom:#666 dotted 1px;
	}

auf ganz blöd habe ich das alles nochmal hinzugefügt:

.entry p a:link img {
	border-bottom:none !Important;
	}
	
.entry a:link img {
	border-bottom:none !Important;
	}
	
.entry p img {
	border-bottom:none !Important;
	}
	
.entry img {
	border-bottom:none !Important;
	}

und hier ist der Code auf der Seite:

div class="entry">
				<p><a href="http://www.usdesignstudio.co.uk/" title="Us Design Studio" target="_blank">Us Design Studio</a>, always famous for blurring the boundaries between design and art, made a new piece:</p>
<p><a href="http://www.soundofsirens.net/wp-content/uploads/2008/03/whole_human.jpg" title="Whole Human"><img src="http://www.soundofsirens.net/wp-content/uploads/2008/03/whole_human1.jpg" alt="Whole Human" /></a></p>

Und hier die Seite selbst. Habs jetzt mal so gelassen, damit ihr seht, was ich meine: Sound Of Sirens » Blog Archive

(ja, ich weiss - die pagenav oben. Und das der Rahmen rechts 10 pixel raussteht ist auch normal, weil die Bilder alle einen margin von 10px nach rechts haben wegen Textumfluss)

m.

[maks]

Das gleiche Problem existiert übrigens auch, wenn ich aufs p verzichte und nur sage .entry a {border...}

[marX]

Zitat von maks

Das Problem ist ja aber [...] dass die Formatierung dem <p> zugewiesen wird, welches das Bild umgibt.

Falsch. Die Rahmen werden dem Link-Element <a> hinzugefügt - und die benötigen eine Klasse, wenn Bilder verlinkt sind, um das Verhalten abzustellen (siehe Alphawolfs Posting). Das Problem ist, dass du mit CSS nicht sagen kannst: "Wenn der Link ein Bild enthält, dann keinen Rahmen, sonst Rahmen".

[maks]

Zitat von marX

Falsch. Die Rahmen werden dem Link-Element <a> hinzugefügt - und die benötigen eine Klasse, wenn Bilder verlinkt sind, um das Verhalten abzustellen (siehe Alphawolfs Posting). Das Problem ist, dass du mit CSS nicht sagen kannst: "Wenn der Link ein Bild enthält, dann keinen Rahmen, sonst Rahmen".

Danke! Ich hab endlich eine Idee...

[spickzettel]

Die "normalen" Links haben, soweit ich das gesehen habe, ein onclick-Attribut. Dann geht so etwas:

.entry p a:link {border:none;}
.entry p a:link[onclick] {border:red 1px solid;}

[Alphawolf]

Hmm, kleines Experiment, wobei ich aber bezweifle, dass es funktioniert (aber ich würd mir im Jahre 2080 vermutlich vorwerfen, warum ich es 2008 nicht versucht habe )...

a[href~=http://www.soundofsirens.net/wp-content/] {
 border-width: 0px;
}

Da im Grunde nur Bilder-Links auf wp-content linken, ist es einen Versuch wert.. du brauchst dafür aber mind. IE7 oder FF etc..