IE 7 doesn't look right.. but 8 does

No response by others so here's some feedback for you - most of which generally suggests there is work for you to do!

Your layout is essentially simple: a masthead followed by a container followed by a footer. This basic layout is then complicated by having background images for your masthead and footer which encroach on the space occupied by your container. Your container

The background image on the right-area needs to "hook up" with the backgrounds for your header and footer

1. default paddings and margins that all browsers add (but not all adding the same)
2. a background image on your left area that is taller than the default height of its parent container which you have called "container".
3. Internet Explorer being, well pulling no punches, such an ass of a product

Now taking each point above here are some suggestions on how to move forward:

First, try adding a global reset at the top of your CSS:

* {padding:0;margin:0;}

this may help knit the three major

As soon as you add this line, it will throw other things out but it then becomes clear that IE7 does things quite differently to other browsers (including earlier and later versions of itself! Nice one Microsoft). But, if we take off the negative top margin from your "right_area"

Okay on to point 2: the rest of your layout may be easier to achieve if you were to take your left-col out of the equation by giving an absolute position statement and use left and top values to position, again without negative margins. It might even be better to move it outside of its current

Third, if you don't already do your web site development in a standards compliant browser then switch now to using one: many prefer Firefox.

Which leads on to your last "tongue in cheek" question: perish the thought that everyone will move over to IE8 or any other version! From a developer point of view, it is probably not a good idea to rely on Microsoft browsers to represent any kind of standard. For example, it took up to version 8 of IE before they got somewhere near to following the standards of CSS2.1; which became the de facto CSS standard nearly 10 years ago!

Hope some of this helps you. Regards

Thank you for all the information. I am going to go give it a try now. It's nice to have a new set of eyes, especially ones with experience, look at it. I am new at Style Sheets, and I am loving it. But it's literally, "I want to do this" so I go figure it out. Then, "now I want to do this," so I go figure that out. Which of course, invariably affects what I did first. Not the best way to take on a project, but how can you know until you do it a couple times?

I do use Firefox and actually use Chrome more often. But I definitely check my design in IE too. It's actually obnoxious that you have to check them all. I even have a friend confirm on his Mac in Safari. (As a matter of fact, next is a mobile friendly site... talk about compliance issues there!!!) Since I am using Expression Web (my personal compromise of being able to "see" what I am doing and using programing), it's most annoying when it doesn't work in IE- that's Microsoft's own product!!! I mean, really!

(By the way, my husband, a 3D animator, points out that these alignment issues would be less of a problem if websites were designed from the center out- like 3d models- instead of top left to bottom right- like a book. I think he's right. I know there is some javascript that will do that type of calculations... I wonder if it will ever become an industry standard.)

Thanks to your comments, I am 90% fixed with this alignment issue. Some of your thoughts worked, others, not-so-much. But they definitely pointed me in the right direction.

Now, the remaining problem is my yelp logo on the home page: www.curlupanddyewithkim.com. It's supposed to overlap the photo. Which it seems to, on all browsers except IE7. Even though the image is in a div tag in a div tag in a div tag, it's still floating to the left (far outside the final div tag) in IE7.

Any thoughts?

First the fix for the new problem: change the position setting from "inherit" to "relative" on your "right_area"

And then just to add to your learning curve, here's a few other thoughts:

1. Point (pt) measurements are fixed settings intended for use on printed media. For screen display, use px or em instead on your font sizes, padding and margins (or percentages work as well).

2. With the global settings in place for padding and margins, you can remove all other statements that set them to zero such as the "padding:0;" on your left_col

3. In general "float:none;" is the default so you can probably remove all these lines. There may be other defaults that you can remove too. I love removing unnecessary code (I create lots myself during a project)!

4. And to continue the theme of reducing code, you may be able to reduce the size of your indexStyle.css file considerably by applying setting to the yelp tag and the only adding declaration blocks for the pseudo states that change. For example something like:

#yelp a span{
	display: none;
	border: medium double #fff;
	color: #fff;
	font-size: 14px;
	font-weight: bolder;
	text-decoration: none;
	position: absolute;
	text-align: center;
	z-index: 201;
	top: 60px;
	left: 50px;
	background-color: #990000;
	width: 100px;
}
 
#yelp a:hover span{
	display: block;
	border: medium double #c00;
	color: #c00;
}

Well, you get the idea. The declaration code block for the hover state is much reduced because it only has the changes.

Notice also how #fff is equal to #ffffff and #900 equals #990000. Good heh. And keep it all lower case too.

6. Read up on shorthand declarations. For example the background on your body can be set with:

background-color: #ccc url(images/BG_gradient.jpg) repeat-x;

which is much neater and so easier to maintain.

7. And last, though controversial perhaps, take this from someone who has been there: the sooner you ditch Expression Web and start writing your code directly, the more rapidly you will learn how things work. Pretty much all so called WYSIWYG editors are based on a lie that what they show you is how your page will look out in the wild - as you have discovered for yourself!

Well, that's way enough for now for you to work on. Enjoy.

pts vs pxs... another bad habit as a graphic designer. Time to start thinking screen!

I'll work on the short hand. I have been writing everything out (even when expression web fixes it) just so it's easier for me to see what I did. But it does make for a lot of code scrolling. Guess I should just get used to seeing the short version.

The color short hand is great too. Now that wouldn't work in the print world! I have printers who would kill me for that sort of stuff!!!!

Thanks again. I am sure I'll be back with more questions.

pts vs pxs... another bad habit as a graphic designer. Time to start thinking screen!

I'll work on the short hand. I have been writing everything out (even when expression web fixes it) just so it's easier for me to see what I did. But it does make for a lot of code scrolling. Guess I should just get used to seeing the short version.

The color short hand is great too. Now that wouldn't work in the print world! I have printers who would kill me for that sort of stuff!!!!

Thanks again. I am sure I'll be back with more questions. And maybe someday, I'll even be able to answer some for other people!!

I thought I might respond to the Expression Web comment. Unlike Front Page, Expression Web does not a lot of "thinking for you." It does have some quirks that you have to be careful of. (For example, if you accidentally move an object in design view, it adds that as a style and then suddenly your div tag is not working the way you think it should.)

Why do I use it? No mater where you are, code view, design view, or on the CSS page, there is a list of the various ids, classes and styles you have created. You can right click on the styles and it brings up a dialog box to modify the style. You don't have to search through your code to find it!

It also reduces my typos, which are frequent. And tells me when I am using non-compliant code, which is a huge help since I have been taking code from lots of places on the web and often find out-of-date code or whatever. AND the bright yellow "highlight of death" as I call it, shows when I haven't closed all of my tags correctly.

The "design view" options is great for placing items on the page. I usually figure out where I want to put it, and then add the information to the style sheet. Now, unfortunately, the design view is not a true WYSISYG, so it still usually requires viewing in the browser for the final tweak, but at least it's a start.

So yes, I am still mostly "hand coding" the site, but the software is definitely a helpful tool. And I have barely touched the other "tools" it provides, so there are probably more helpful tools in there. As long as it's not creating it's own bots and what not, like everything in Front Page did, the tools are helpful.

So that's my defense of Expression Web (or any other software out there that might be helpful in those same ways.)