You are restricting to screen (though it's not even showing in my browser).
only screen and (min-width: 0px) and (max-width: 320px)
only screen means, not projection (opera), not handheld (mobiles), not print, not nothing but screen.
testing it in dreamweaver cs5 makes it look like it works.
Dreamweaver's not a browser. Never test "browsers" with your text editor (which is all DW is... a glorified and rather overpriced text editor). Always test in a browser (like you did your iPhone).
Is there something with iphones that make this not work anymore?
No, though they do change stuff (they've been playing with the device-width meta tag for example, and no, it doesn't correctly use the width you'd expect).
Here are media queries I use. Do they work on your iPhone and desktop browsers when shrunk (see link below code)??
<meta name="viewport" content="width=device-width">
Set device-width... not totally exact cross-machine but it's good to tell the device to use its idea of "width" to match what it thinks it has... just that, some devices don't use "CSS pixels" for this measurement.
<link rel="stylesheet" type="text/css" media="screen, projection, handheld" href="mobile.css">
I start out giving all media (except print) a basis stylesheet. If you're giving everyone a "desktop" version first then that would be here instead of my mobile.css.
<link rel="stylesheet" type="text/css" media="screen and (min-width: 600px), projection and (min-width: 600px)" href="desktop.css">
screen with min-width, projection (for Opera really) min-width, get this stylesheet. No handheld listed, though many of the newer smart phones (and iPhone may be one of them) ignore "handheld" anyway and try to render screen. Fine, but they must be at least 600 "CSS pixels" wide then. So my colleague's HTC (running Android and a version of mobile Safari) will do the "mobile" styles when upright/portrait and will do the "desktop" styles when in landscape (since then it believes it's wider than 600px).
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="screen" href="desktop.css">
IE doesn't do stylesheets... not until IE9. So I give ALL IE's the desktop styles... which may suck for those using Windows Mobile (which uses IE6 as the browser), but, tough. It's not like they can't download a real browser like Opera.
Anyway I see you've done this too, but because of IE9 I'd put it after the regular stylesheets... conditional comments are a known "page blocker"... the page loading is known to halt when the browser sees those CC's, so since I'm not using the trick of CC's before the <html> tag, I just keep them after regular styles.
<link rel="stylesheet" type="text/css" media="print" href="print.css">
Print all alone, does not inherit any screen, projection, handheld styles.
So does this page lose the logo image and show a "naar de content" link in the middle of the menu on your iPhone? Make sure you're holding it in portrait, because I did not set orientation with my media queries. Also, I've never actually checked that page with iPhone, only Opera on Android, Symbian (webkit) browser on Nokia and IE6 on Windows Mobile. The "mobile" style definitely works for the first two and we already know they won't work for IE6.
Yes, I remember there being something about using "only" to get around something with IE, but "only" means "only" so I don't use it (similarly, I never use "all" since I don't need "print" to be 10 times larger undoing "screen" styles, who are loaded first).
Random non-media-query-related notes:
No need to state the charset in the script tag... your server's already sending the whole page as utf-8 anyway.
<li id="generalbusiness"><a href="">GENERAL BUSINESS</a>
Dropdowns on a multi-line menu are not the best usability.
The nested tables for a single image is a big red flag.