Работа с невидимыми радиобатонами

[leonid12345]

Подскажите, пожалуйста, есть вот такой незамысловатый код

<style type="text/css">
ul{
	list-style:none;
	margin:0;
	padding:0
}
li{
	display:block;
	float:left;
	width:150px;
	height:30px;
	margin:0;
	padding:0;
		margin-right:10px;
}
.radio{
	display:none;
}
label{
	display:block;
	height:30px;
	width:150px;
	text-align:center;
	background-color:#00F;
}

</style>
<script type="text/javascript">
function testRadio(){
	var input = document.getElementsByTagName("INPUT");
	for(i=0; i<input.length;i++){
		input.item(i).parentNode.style.backgroundColor = "#00F";
	}
	this.parentNode.style.backgroundColor = "#F00";
	alert(this.value);
}
window.onload = function(){
	var input = document.getElementsByTagName("input");
	for(i=0; i<input.length;i++){
		input.item(i).onclick = testRadio;
	}
}
</script>
...
<ul>
    	<li>
             <label for="RadioGroup1_0">
                   <input type="radio" class="radio" name="RadioGroup1" value="Радио1"
 id="RadioGroup1_0"/>Переключатель1
            </label>
        </li>
        <li>
             <label for="RadioGroup1_1">
                   <input type="radio" class="radio" name="RadioGroup1" value="Радио2"
 id="RadioGroup1_1"/>Переключатель2
            </label>
        </li>
</ul>

Хотелось бы организовать некое меню с помощью невидимых радиобатонов, так как особенности их работы очень удобны. Однако в ie 7, ie 8 данная штука не работает, можно ли это обойти? желательно без jquery

[Deff]

Хотелось бы организовать некое меню с помощью невидимых радиобатонов, так как особенности их работы очень удобны. Однако в ie 7, ie 8 данная штука не работает, можно ли это обойти? желательно без jquery

Попробуйте невидимость делать не display:none а
position:absolute; z-index:-2000;

[leonid12345]

Попробуйте невидимость делать не display:none а
position:absolute; z-index:-2000;

Так работает! Спасибо вам ОГРОМНОЕ!

[leonid12345]

Возникла еще небольшая проблема с данным кодом...
если вместо текста внутри label картинка вместо текста, аля

<li>
             <label for="RadioGroup1_1">
                   <input type="radio" class="radio" name="RadioGroup1" value="Радио2"
 id="RadioGroup1_1"/><img src="test.png">
            </label>
        </li>

то при нажатии в область картинки в ie7, ie8 событие у радиобаттона онклик не срабатывает(
подскажите, как это можно обойти без сильной модификации кода

[Deff]

leonid12345,
Полный css нарисуйте для этого кода

[leonid12345]

вот что-то такое

<style type="text/css">
ul{
	list-style:none;
	margin:0;
	padding:0;
}
li{
	display:block;
	float:left;
	width:150px;
	height:30px;
        padding-right:10px;
	padding-bottom:10px;
	padding-top:10px;
        text-align:center;
}
li label{
	display:block;
	width:150px;
	height:30px;
	background-image:url(/images/butt3.png);
	background-repeat:no-repeat;
	background-position:center;
}
.radio{
	position:absolute;
	z-index:-2000;
}
</style>

[leonid12345]

ну то есть можно было бы второй фон добавить к li, к примеру, но это не очень удобно, мне кажется, так как кнопки создаются php-скриптом по количеству записей в таблице бд и в img втыкается картинка из соответствующей записи...

Хотя можно и 2 фоном вместо Img, но хотелось бы узнать, может быть можно как-то по-другому

[Deff]

leonid12345, Пробуйте добавить Id к батону и переддать ему клик сквозь картинку

<img src="test.png" onclick="document.getElementById('id').click()">

[leonid12345]

Спасибо! Даже не подозревал, что так можно!