Hi everyone!

So I love coding in Div's but one thing I hate (and this is probably just me ) is I can always get it perfect in FF (main browser I use) but it is horrible or almost-close in IE. And this is something I always face, I can never get it right!

I've started coding my new design for my site and though I'm not done, I can't continue unless I know what I have so far is good on both browsers. It's perfect in FF but terrible in IE! Here is the demo page I've set for your viewing: Click here.

Here is the css snippet:

/************************* JLN BODY *************************
----------------------------------------------------------------------------------- */

body {
    font-family: "Verdana"; 
    font-size: 11px;
    text-align: center; 
    margin: 0 0px;
    padding: 0px;
    background: #f6f6f4 url("images/bgx.png") repeat-x;
}

#Inner_Page {
    width: 900px; 
    margin: 0 auto;
    text-align: justify; 
    position: relative;
}


/************************* LAYOUT STRUCTURE *************************
----------------------------------------------------------------------------------- */
#header {
width: 900px;
height: 516px;
background: url("images/blue-haze_01.png") top no-repeat;
font-family: "Times New Roman", Times, serif;
font-size: 10px;
color: #8b8b89;
line-height: 12px;
text-align: justify;
}

#header-links {
width: 330px;
height: 41px;
padding: 93px 0px 0px 398px;
margin: 0px;
}

#header-links img {
padding: 0px;
border: 0px;
}

#header-links img:hover {
padding: 0px;
border: 0px;
}


.ad {
width: 728px;
height: 90px;
padding: 8px 0px 0px 3px;
}

#intro {
width: 238px;
height: 126px;
padding: 20px 0px 0px 295px;
}

#images {
padding: 0px 0px 0px 575px;
width: 280px;
height: 126px;
margin-top: -130px;
}

Is there any way to make this right? Thanks for any help!

I don't see any issues. Page looks same in IE as well as in FF.
Could you show certain place of difference. And could you say your IE version as well.
Thanks.

I see only two differences. In IE page is too with, and text is not centered. What is problem.

I realize the problem was the doctype, it was missing that but now it's ok.

However, the main content on the right is set to a margin-top of -1245px. It is perfect in FF but in IE it's a little low. Here's the CSS:

/************************* LAYOUT STRUCTURE // SIDEBAR *************************
----------------------------------------------------------------------------------- */
#sidebarfield {
width: 190px; 
float:left; 
margin-left: 96px;}

#sidebarfield_inner {
padding: 5px; 
}

.sidebar_title {
background: #f6f6f6;
text-align: center;
line-height: 14px;
padding: 3px;
color: #b5a395;
font-weight: bold;
font-size: 10px;
border-bottom: 1px solid #eeeeee;
border-left: 0px solid;
border-top: 0px solid;
border-right: 0px solid;
text-shadow: 1px 1px 0px #696868;
}

.sidefield_content {
font-size: 10px; 
font-family: Tahoma; 
line-height: 13px; 
color: #56514d;
text-align: justify;

}
 
.current-01 {
background: #eeeeee;
border-bottom: 1px solid #f6f6f6;
font-family: Georgia;
color: #a3a0a0;
font-size: 10px;
text-align: justify;
margin-top: 7px;
margin-bottom: 7px;
padding: 3px;
}

 .current-01 img {
background: #f6f6f6;
padding: 2px;
border: 1px solid #d7d2cb;
}

.current-02 {
background: #f6f6f6;
border-bottom: 1px solid #eeeeee;
font-family: Georgia;
color: #938c8c;
font-size: 10px;
text-align: justify;
margin-top: 7px;
margin-bottom: 7px;
padding: 3px;
}

 .current-02 img {
background: #eeeeee;
padding: 2px;
border: 1px solid #ccc1b4;
}

.elites {margin: 3px;}

.elites a img {
padding: 2px;
background: #f2f4f6;
border: 1px solid #c8c8c8;
}

.elites a img:hover {
padding: 2px;
background: #d1dfec;
border: 1px solid #91afcd;
}

 
/************************* LAYOUT STRUCTURE // MAIN CONTENT *************************
----------------------------------------------------------------------------------- */ 
#contentfield {
width: 551px; 
float:left; 
margin-left: 195px;
margin-top: -1245px;}

#contentfield_inner {
padding: 5px; 
}

Is there a way I can avoid using margin-top for the main content? I'm not sure if there is but I am wondering. Also, if more content is ever added to the side, it messes with the main content making it "go lower" therefore I'd have to re-adjust the numbers again.

And a little off...but how come the images for the "elites" class are fine in FF but not aligned in IE right?

Thanks for any help!

Oh, and not sure if it makes a difference but my IE version is version 7.0