CSS Question

[chrisf]

I'm working on my online portfolio. I'm making it responsive with the use of CSS3 media queries. The weird problem I'm having is that the media queries are only working on Firefox 12.0. Not Firefox 11.0 not IE 9 Not the latest version of Chrome, and Not Opera.

I can't really think of a problem unless I'm overlooking a code error. Or none of those browsers support the use of HTML5 tags in media queries.

Any help would be great!

(Here is my code)

@media screen and (max-width:750px){
	#home2 p{
		font-size:1.8em;
	}
	
@media screen and (max-width:500px){
	#quarter{
		display:none;
	}
	
	#about{
	width:90%; 
	margin-top:35px;
	padding-left:20px;
	float:left;
	position:relative;
	margin-bottom:100px;
	}
	
	nav ul li a{
	font-family:'carto';
	font-size:25px;
	text-decoration:none;
	color:#343535;
	}
	
	#home2 p{
		font-size:1.5em;
	}
	
	#contact{
		width:100%;
		max-width:960px;
		margin:0 auto 0 auto;
		clear:both;
	}
	
	
}
@media screen and (max-width:499px){
	#home2 p{
		font-size:1em;
	}
}

@media screen and (max-width:320px){
	nav{
		background-image:none;
		box-shadow:none;
		height:150px;
		width:100%;
	}
	nav ul{
		margin:0;
	}
	nav ul li{
		display:block;
		width:100%;
		height:45px;
		margin-bottom:5px;
		background-color:#64b1c6;
		-webkit-border-radius:10px;
		border-radius:10px;
		padding:5px;
	}
	nav ul li a{
		text-align:center;
		font-family: 'carto';
		color:#f4f4f4;
		text-shadow: 1px 1px 1px #999;
	}
		
}

[VIPStephan]

The CSS is correct and not telling us anything all by itself. Please provide your HTML, too, or a link at best.