I prefer Illustrator, it's more "element-oriented" if you will. Easier to move things around. Even if it's lacking a good UI for styling.
If you're missing the UI for styling, you might try Fireworks.
The idea that Photoshop should be used as a layout tool is an unfortunate accident of history -- it was/is the household name for image manipulation as most designers and developers hit the web. But while it's good for raster/photo editing, sets of pixel layers doth not a good layout/design tool make.
Illustrator's a lot better for this. And Fireworks is made for web layout and screen graphics, has a great mix of vector and raster tools, and is evolving some really sophisticated export abilities including some of the CSS export facilities CSS Hat is doing.
This is just one example:
http://farm3.staticflickr.com/2362/1800773495_d1f776e335.jpg
Many (most?) vector-drawing applications let you select only the items that are fully enclosed by a selection rectangle. So if you wanted to select only the circles in that image, you'd need only to draw a selection rectangle around them.
Illustrator gives you no way to do this. Every shape that comes into contact with the selection rectangle (or even the path of the lasso tool) is selected. You can fire up Windows and do the whole thing in Corel Draw in the time you'll waste tediously clicking on everything in Illustrator.
As an aside, the lasso is a "direct selection" tool, operating on individual paths rather than shapes, not that this helps in your example. But it'd work well if I wanted to select, say, only the bottom side of your rectangle, for essentially the reason you dislike.