I have following code
<!DOCTYPE html>
<html>
<head>
<title>jQuery goes to DOM-ville</title>
<style>
#change-me {
position:absolute;
top:500px;
left:400px;
font:24px arial;
}
#move_up #move_down #color #disappear {
padding:5px;
}
</style>
<script src="jquery-1.6.2.js"></script>
</head>
<body>
<button id="move_up">Move Up</button>
<button id="move_down">Move Down</button>
<button id="color">Change Color</button>
<button id="disappear">Disappear/Re-appear</button>
<div id="change_me">Make me do stuff</div>
<script>
$(document).ready(function(){
$("#move_up").click(function(){
$("#change_me").animate({top:30}, 200);
});//end move up
$("#move_down").click(function(){
$("#change_me").animate({top:500}, 2000);
});//end move down
$("#color").click(function(){
$("#change_me").css("color","purple");
});//end color
$("#disappear").click(function(){
$("#change_me").toggle("show");
});//end disappear
});//end doc ready
</script>
</body>
</html>
when I open html in firefox(jquery file is in the same folder), the style rules for element showed by firebug is nil, and move up and move down buttons don’t work however they change the respective css styles, when I changed following line
<div id="change_me">Make me do stuff</div>
to this
<div id="change_me" style="position:absolute;">Make me do stuff</div>
everything seems to work again, so my assumption is the any of styles in head element are not applied to the html element, if so what is the point of them and if they are applied then why are they overwritten.
my browser is Firefox 11.0 in MacOSX
vs
The two are not the same.