I am creating a website for a a photographer and this is my first time using layers and CSS.
The page I created looks perfect in Internet Explore, but on firefox, everything is shifted all over.

Could someone help me fix my CSS so that it looks the same in all browsers?

Thank you so much in advance!

Here is the link
http://northshoreclassifieds.com/test6/family/home.html

You don't need to assign both id and class like id="main" class="main"
You should check css documents for more information.

To align your main content:
#mainbody{
width: 765px;
margin-left: auto;
margin-right: auto;
}

for the menu:
#top {
    height: 46px; 
    width: 765px;
    background-color: #222222;
    text-align: right;
}

For bloc1, you set a too low height
 #bloc1 {
    height: 425px; 
    width: 765px; 
    background-image: url(img/graybg.jpg);
    background-repeat: repeat-x;
}

Your site looks perfect in IE7 because it ignores all the errors you made, not because it's any better than FireFox *_*

Thank you for your reply. I changed my CSS and it worked! Thank you so much.
My question now is about the Div and id tags. When I remove the id name from the HTML section for each layer, things changed and it does not look the same.

Could you please give me some more information about this?

Thank you again!

Firstly, I suggest you learn more on CSS at somewhere like http://www.w3schools.com/css/default.asp.

Basically, In CSS you can apply rules using "#ID" or ".class" or "elementtag". #ID will apply to the element with that ID (since ID's should be unique), .class will apply the rules to all elements with that class and just specifying the element tag will apply the rule to all elements with that tag (e.g. a{} would apply to all a tags (links)).

Since the rules for most of your page is specified using #, you are targeting the ID, hence when you remove the ID things no longer look correct, instead, the class is the unnessary part.

Generally use ids when something is unique, class to things that will be repeated.

Hope that helps.

You can, of course, add classes to an ID, it's not forbidden and it can be effective when needed.

A word of advice - don't START with IE and then look at the site with Firefox or Opera. IE6 and below is soooo buggy that if it looks "right" in IE, about half the time it will be wrong in the more standards-compliant browsers.

You've got a serious case of div-itis on that page. A better method for your menu is NOT a batch of divs - use an unordered list.
http://css.maxdesign.com.au/listutorial/index.htm


IF you're going to use floats, you must also CLEAR the floats.
http://css-discuss.incutio.com/?page=ClearingSpace