Javascript-форум - Ссылка + картинка + трехцветная рамка + IE

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Ссылка + картинка + трехцветная рамка + IE (https://javascript.ru/forum/xhtml-html-css/21321-ssylka-kartinka-trekhcvetnaya-ramka-ie.html)

Ссылка + картинка + трехцветная рамка + IE

Нужно сделать чтобы у картинки была граница из трех цветов и это всё было ссылкой.
Сделал, но только в ИЕ7 ( и более ранних версиях ) не работает, а именно ссылка не кликается, хотя при наведении на нижней панели пишется адрес ссылки.

<a href="test20.html" class="avatar"><div class="b_yellow"><div class="b_yellow"><div class="b_yellow"><img src="image_d4d70f_30.jpg" width="30" height="30" /></div></div></div></a>

.avatar img { float:left; }
.b_white, .b_yellow, .b_blue, .b_pink, .b_silver, .b_green { margin:0; padding:0; float:left; }
.b_white { border:#ccc 1px solid; }
.b_yellow { border:#FFCC00 1px solid; }
.b_blue { border:#0099CC 1px solid; }
.b_pink { border:#FF0099 1px solid; }
.b_silver { border:#CCCCCC 1px solid; }
.b_green { border:#009900 1px solid; }

Итого, не получается сделать в ИЕ7 чтобы ссылка работала.
Заранее спасибо.

Даже работает по-разному...

<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
img {
	border: 0;
}
a {
	display: block;
	float: left;
}
div {
	float: left;
	cursor: pointer;
}
.c0 {
	border: 4px solid #000000;
}
.c1 {
	border: 4px solid green;
}
.c2 {
	border: 4px solid red;
}
</style>
<div class='c0'>
	<div class='c1'>
		<div class='c2'>
			<img src='http://javascript.ru/forum/images/smilies/smile.gif' />
		</div>
	</div>
</div>
<br />
<br />
<br />
<a href='http://javascript.ru/forum/xhtml-html-css/21321-ssylka-kartinka-trekhcvetnaya-ramka-ie.html' class='c0'>
	<a href='http://javascript.ru/forum/xhtml-html-css/21321-ssylka-kartinka-trekhcvetnaya-ramka-ie.html' class='c1'>
		<a href='http://javascript.ru/forum/xhtml-html-css/21321-ssylka-kartinka-trekhcvetnaya-ramka-ie.html' class='c2'>
			<img src='http://javascript.ru/forum/images/smilies/smile.gif' />
		</a>
	</a>
</a>

Цитата:

Сообщение от ksa

Даже работает по-разному...

Если честно не совсем понял что вы имеете в виду, видимо что обрабатываются браузерами теги "а" по-разному, поэтому и не переходит...

Но ваш код натолкнул меня на такую мысль/решение:

<a href="/test20.html" onclick="return false;" class="avatar"><div class="b_yellow"><div class="b_yellow"><div class="b_yellow"><img src="image_d4d70f_30.jpg" width="30" height="30" onclick="window.location.href='/test20.html'" /></div></div></div></a>

Хм. Не многовато сущностей?

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" >
<style type="text/css">
    a {
        float: left;
        padding: 4px;
        border: 4px solid black;
        background-color: green;
    }

    img {
        float: left;
        border: 4px solid red;
    }
</style>
</head>
<body>
    <a href="http://javascript.ru/forum/"><img src="http://javascript.ru/forum/images/smilies/smile.gif" /></a>
</body>
</html>

Цитата:

Сообщение от greatilya

не совсем понял что вы имеете в виду

Просто удивился что 3 ссылки с дисплей блок отрисовались не как 3 дива... :(

Цитата:

Сообщение от e1f

Хм. Не многовато сущностей?

Спасибо за решение! Гениально )

Цитата:

Сообщение от ksa

Просто удивился что 3 ссылки с дисплей блок отрисовались не как 3 дива...

а ты смотрел, как они браузером распарсились? Теги a не могут быть вложенными:

Цитата:

Content model:
Transparent, but there must be no interactive content descendant.

иначе куда должен перейти браузер при клике по ссылке, в которой есть еще одна ссылка?

Цитата:

Сообщение от x-yuri

Теги a не могут быть вложенными

Ясно. Спасибо... :)