css linkdefinition für ein bild

kuschti

hallo.
ich verzweifle.

in der sidebar.php habe ich folgendes:

PHP

<div id="sidebar">
		<?php /* If this is the frontpage */ if ( is_home() || is_home() ) { ?>
		<h2>&Uuml;ber mich</h2>
		<ul>
			<li style="color:#FF9900">[b]['ku:schti][/b]
			[*]Ein 21 Jahre alter Informatiker
 aus Hochdorf (CH)
			[url="about"][img]<?php bloginfo('stylesheet_directory'); ?>/images/me_kl.jpg[/img][/url]
		[/list]
...
...

Alles anzeigen

unten habe ich ja folgendes drin:

PHP

[url="about"][img]<?php bloginfo('stylesheet_directory'); ?>/images/me_kl.jpg[/img][/url]

und so sieht die definition im css aus:

Code

img {
	border: 0;
}
.imgblock img {
	background: #DADADA;
	border: 1px solid #585a67;
    padding: 5px;
}
.imgblock {
	background: #ffffff;
    text-align: center;
}
.imgblock img:hover{
	border: 1px solid Orange;
	background: #fff;
}

Alles anzeigen

nun mein problem.
im FF wird das bild richtig angezeigt. mit einem rahmen um das bild, mit einem padding von je 5px zum bild. und ein hover das die rahmenfarbe ändert.
im IE wird einfach ein rahmen um das bild angezeigt, ohne padding zum bild und ohne hover effekt.

wie löse ich das?es soll im IE so aussehen wie im FF.

zum anschauen: http://www.kuschti.ch

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

kuschti

kann mir hierbei niemand behilflich sein?
wäre sehr froh wenn ich das so hinkriege das es auch im IE richtig aussieht.

Monika

der IE beservicst die Pseudoklasse hover nicht
nur bei a --also einem Link;

ich bessere gleich aus -- auch den html code -soeit ich dort was finde:

PHP

<div id="sidebar">
		<?php /* If this is the frontpage */ if ( is_home() || is_home() ) { ?>
		<h2>&Uuml;ber mich</h2>
		<ul>
			<li style="color:#FF9900">[b]['ku:schti][/b]
			[*]Ein 21 Jahre alter Informatiker
 aus Hochdorf (CH)




		[*]	[url="about"][img]<?php bloginfo('stylesheet_directory'); ?>/images/me_kl.jpg[/img][/url]
		[/list]
...
...

Alles anzeigen

unten habe ich ja folgendes drin:

PHP

[url="about"][img]<?php bloginfo('stylesheet_directory'); ?>/images/me_kl.jpg[/img][/url]

###########

Code

img {
	border: none;
}
a.imgblock {
	background: #DADADA;
	border: 1px solid #585a67;
    padding: 5px;
 text-align: center;
margin-left:10px;
}


a:hover.imgblock{
	border: 1px solid Orange;
	background: #fff;
padding: 5px;
}

Alles anzeigen

müßte funktionieren --auch wenn ich es jetzt nicht überprüft habe

img und br sind selbstschließende tags , die brauchen immer einen / vor dem >

lg
Monika

kuschti

danke monika für die hilfe.
aber leider klappt es nicht.
hab ein wenig rumprobiert, jedoch erfolglos.

hast du, oder jemand anders, sonst eine idee wie das geht?

auf http://www.siriux.net (der auch ein gallery2 theme gemacht hat) funktioniert dies im IE und FF.
Auf seiner blog seite und in der gallery.

habe mir mal sein css angeschaut und den aufbau wo das bild im code ist, es genau gleich gemacht, aber auch dies geht nicht.

gruss

telekommander

Ich schliess mich da Monika an, das MUSS funktionieren, sogar die Spassbremse IE 5.5 kapierts.

Habe mal alles zusammengepackt in eine Datei.

HTML

<html>
<head>
<title>Test</title>
</head>
<style>
img { 
   border: none; 
} 
a.imgblock { 
   background: #DADADA; 
   border: 1px solid #585a67; 
   padding: 5px; 
   text-align: center; 
   margin-left:10px; 
} 
a:hover.imgblock{ 
   border: 1px solid Orange; 
   background: #fff; 
}
</style>
<body>
[url="http://test.com"][img]bild.gif[/img][/url] 
</body>
</html>

Alles anzeigen

kuschti

klar funktionier dass...im IE.
aber schau dir das mal im Firefox an.

Entweder klappts im FF, oder es klappt im IE :(

kuschti

das selbe im Opera, der zeigts gleich an wie der FF

telekommander

ähm ja ...

Der Abstand vom Bild zum Rahmen ist, bei deiner genannten Seite ( http://www.siriux.net ) aber NICHT CSS formatiert ! Sondern diesen weissen Bereich besitzt das Bild selbst.

kuschti

hä?
wenn ich auf siriux.net ein bild, sagen wir das mit dem kaktus weiter unten, anschaue, also nur das bild.
und dann seine breite betrachte und das abmesse so beinhaltet dieses bild keinen weissen rahmen

http://siriux.net/images/blog/teneriffa2.jpg

telekommander

... grübel ...

Monika

nein die Bilder haben den weissen Rahmen nicht,
aber der Hintergrund des Contents und der Sidebar..
da ja padding im Einsatz ist, ist da ein weißer Rahmen zu sehen,

padding=Abstand innerhalb eines Elementes,

lG
Monika

telekommander

it works ...

Code

<head>
<title>Test</title>
</head>
<style>


a:hover { color: #000; }
img.imgblock {
	margin: 5px;
	padding: 4px;
	background: #fff;
	border: 1px solid #999999;
}
a:hover img.imgblock {
	border: 2px solid #FF0000;
	margin: 4px;
}
</style>
<body>
<a href="http://test.com/" >
[img]http://www.listen-project.de/images/logo.gif[/img]
</a>
</body>
</html>

Alles anzeigen

Die Klasse "imgblock" gehört dem Bild, und nicht dem Link <a> .

kuschti

das klappt bei dir?

wenn ich deinen code in ein html file packe, einmal im IE und einmal im FF öffne, so funktioniert dies nur im FF.

Bei dir in beiden?

telekommander

... yes, grosses pionierehrenwort.

( Nur die Spassbremse IE5.5 rafft das nicht. )

kuschti

ich glaub langsam ich bin zu blöd oder mein IE.
bei mir in der firma und zuhause klappt dein letzter code nicht im IE, sondern nur im FF.

ich dreh durch.

telekommander

Langsam fang ich auch an zu zweifeln ...

IE Version : 6.0.2900.2180
FF Version: 1.0.6

Screens :

[Blockierte Grafik: http://www.listen-project.de/wordpress/wp-content/uploads/img_hover_ie.jpg] [Blockierte Grafik: http://www.listen-project.de/wordpress/wp-content/uploads/img_hover_ff.jpg]

kuschti

hab die selbe IE version (sp2)
und FF 1.0.4

[Blockierte Grafik: http://www.kuschti.ch/SUB/pku/IE.gif]
[Blockierte Grafik: http://www.kuschti.ch/SUB/pku/FF.gif]

und genau den gleichen code genommen den du als letztes gepostet hast.

EDIT:
Ein kumpel hat den code auch getestet im IE6 und FF.
und wie ich keinen rahmen im IE.

telekommander

Geht nicht gibts nicht.

Was zum Henker ist an deiner IE Version anders ?
Habe es auch an einem anderen Rechner getestet mit positven Ergebniss.

Könnte mal bitte jemand diesen "Test" testen, und Ergebnisse posten ?!

Liegt HIER.

peti

Den einzigen Unterschied den ich erkennen kann ist, dass telekommander die class im <img> Tag untergebracht hat. Beim kuschti ist es allerdings so, dass sich dieser im <anchor> Tag befindet.

Also wäre die Rätsles Lösung doch das hier:

Just my 2 cents.

kuschti

des rätsels lösung!!!!!
im header.php ist auf der ersten zeile dies:

PHP

<?php echo '<?xml version="1.0" encoding="iso-8859-1"?>'?>

wenn ich das rausnehme klappts.
was bewirkt dies eigentlich?und, darf ich das rausnehmen?mit welchen auswirkungen.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

css linkdefinition für ein bild

Jetzt mitmachen!