<?
$time = $_POST['time'];
echo 'you have choosen '. $time;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.radio > input[type=radio]{
position:absolute;
margin-left:-99999px;
}
input[type=radio] + span{
cursor:pointer;
border:2px solid transparent;
}
span.active{
background-color:green;
}
.but1{
background-color:#009;
color:#FFF;
border:none;
border-radius:15px;
width:200px;
height:50px;
font-size:18px;
font-weight:bold;
border-radius:15px;
text-align:center;
padding:8px;
font-family:Verdana, Geneva, sans-serif;
float:left;
margin-left:10px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<form action="Untitled3.php" method="post">
<label class="radio" for="fb1">
<input id="fb1" type="radio" name="time" value="all day" checked />
<span class="but1 active">Available<br>All day</span>
</label>
<label class="radio" for="fb2">
<input id="fb2" type="radio" name="time" value="between 8-12"/>
<span class="but1">Between<br>8am - 12am</span>
</label>
<label class="radio" for="fb3">
<input id="fb3" type="radio" name="time" value="between 12-4" />
<span class="but1">Between<br>12pm - 4pm</span>
</label>
<input name="submit" type="submit" value="send" />
<script type="text/javascript">
$('.radio').click(function(){
if( $(this).find('input').is(":checked") ){
$('.radio span').removeClass('active');
$(this).find('span').addClass('active');
}
});
</script>
</form>
</body>
</html>
why is it that when i add the submit button the css dont work in IE, fine in all other browsers. when i remove the button the css works fine in all browsers?
please help, this problem is driving my nuts, IE should be banned
live code with the button is http://goo.gl/LbSWQG
