Positioning Error

[Titan85]

For some reason, on this page: http://resonant-media.com/client_work/atar/coding.html in IE 7, the large box with the picture is not positioned where it should be, but the position is correct in firefox. I can not seem to figure out what is causing the problem.

The CSS code is located here: http://resonant-media.com/client_work/atar/main-style.css. I believe the error is on either line 15 (#main { ...) or 20 (#image { ...).

Here is the code block for the section that is not positioning correctly:


<div id="main">
<div id="image">
<div class="pic_border"><img src="images/pic_top.jpg" alt="" /></div>
<div id="pic"><img src="images/small_banner.jpg" alt="" /></div>
<div class="pic_border"><img src="images/pic_bottom.jpg" alt="" /></div>
</div>
</div>


Any help is much appreciated, thanks

[Mehok]

ok what you might want it is



<div id="main">
<div id="pic"> </div>
</div>

and css



#pic {

width: ??
height: ??
border-top: size color url(images/pic_top.jpg);
border-bottom: size color url(images/pic_bottom.jpg);
}



and use padding instead of a margin and make sure it adds up its simple maths

[Titan85]

ok what you might want it is



<div id="main">
<div id="pic"> </div>
</div>

and css



#pic {

width: ??
height: ??
border-top: size color url(images/pic_top.jpg);
border-bottom: size color url(images/pic_bottom.jpg);
}



and use padding instead of a margin and make sure it adds up its simple mathsWell, I used padding instead of margin and it made no change. All the math adds up and the position is right in the code. For some reason, IE 7 has decided that it wants it moved about 200px to the right of where it should be. Firefox looks good and so does the dreamweaver preview mode, but IE 7 doesn't like it.

Has anyone seen this error before?

Thanks for the help

[Mehok]

ok i might have figgured it out for you

if you start with teh section of the page under the menu

lets call it cnet

css code


#cent {
width: 780px;
height: 600px;
}

.cent-left {
width: ??;
height: ??;
float: left;
}

.cent-right {
width: ??;
height: ??;
float: right;
}


HTML code


<div id="cnet">
<div class="cnet-left">news and ****</div>
<div class="cnet-right">image</div>
</div>


and make sire your page starts out with one main div box to contain where the div inside it can float all the way to if you know what i mean

if you dont understand any of this please tell me so i can dumb it down a little

[Titan85]

Sorry for the late response, been pretty busy lately. I tried what you said, but I still get the same positioning error. I can not think of any reason for this at all. Any other suggestions?

Thanks