Still practicing my CSS layout, and IE 7 issues.

Question

I've revamped my site, and I've been practicing with the last 4 sites or so with mostly CSS layout....definitely a work in progress. My site is the first I've tried with overlapping images and the whole z-index thing. Everything looks great, for the most part. My issue is ALWAYS ie7, and then my issue is monitors with lower screen resolution. My sticky notes are showing up at the top of the page in IE7, looks great in 8. Every other browser seems to look great as well, as long as the resolution of the monitor is higher. I'm hoping someone can help me with positioning my sticky notes, so they don't shove my flash out to the right side of the page. Here's the URL www.theresasheridan.com.
Another site with another IE 7 issue....www.viewcamera.com. Here the issue is that the image in the maincontent div is shoved way down the page. I want to keep my width at 450 px so that I can have my side borders. Anyone have any other suggestions for me pretty please?
Last IE 7 issue (thanks so much), www.losvaquerosridingclub.org. The background color is white under the spry menu, but again...only in IE7.
Thank you!!

Answer 1

You are absolutely right about the validator.  Some of it is way beyond me too!
However, it seems to indicate that you have some tag confusion going on there, usually that's about missing a closing element.  Fixing that is a good thing because it can screw your layout.  Another thing the validator points out is the omission of a few of your alt="" text.  That won't muck about with any layout issues but is worth adding if you have the time or inclination.  I'm afraid I don't have time to look right now but if I get the chance I'll have a go later.
With your sticky notes, it struck me that you could use absolute positioning.  The trick there is to place those elements in to a containing element, set that element to position: relative and then absolutely position the sticky notes using px dimensions where you want them in the page.  At the moment, you are using floats on those two parts of the page but again, I haven't quite got the time to look in detail now.
With the float drop thing and width, you would do well to Google "Box Model CSS" or something similar.  Width is not just the content width but also takes into account margin, border and padding.  When you add those up, the width may be too big for the containing element  width which will cause the content to "drop" or to be forced into a space that can accommodate it.  The other snag with the Box Model is that different Browsers handle it differently.  Sometimes what you need to do to create space in the page is to put padding on the nested element which constrains it's content without affecting the width of the container.
I'm a bit of a novice myself at this and it sounds a lot to get your head around.  However there is a a logic to it and once you crack it, it gets easier.
One other tip is to use FireFox browser and get the Firbug plug-in.  That lets you view the page in the browser and you can tweak your CSS "live" to get an idea of how things work together.  Once you have what you want you then turn to DW to make your edits.
I hope that helps rather than misleads!  As I say, I'll try to look later on but in the mean time, an expert might drop by.
And while I'm here, my feeling is that you might have done better to put each of your queries in different threads.  Sometimes, to see several questions in one hit is a bit daunting and I think people here tend to leave the longer questions a bit until they have time.
Regards
Martin