this question is concerning:
http://stevekimforag.com/test/index.html
if you notice on the bottom left, the wordpress link to be more exact-it is lined up correctly in FireFox, but in IE6, 7, 8 the wordpress .jpg is not lined up right and the red stripe background area is crooked. i have no idea why since a pixel is a pixel no matter what browser right?
well this is not cool and any help is greatly appreciated! 
Hi,
The problem with the footer in IE is that you have used the body element for centring the page and IE7 and under doesn’t like this. there are numerous bugs as mentioned in these threads:
(Don’t centre html element or Ie 7 won’t centre.)
http://www.sitepoint.com/forums/showthread.php?p=3312881#post3312881
(Zoom is also out in IE7 when this method is used.)
A quick fix is to add position:relative to the body element but as I said I never do this and avoid all errors by simply using a page wrapper instead to perform the centering.
body {
font-family: Verdana, "Trebuchet MS", sans-serif;
font-size: 12px;
color: #515151;
width: 960px;
margin-left: auto;
margin-right: auto;
[B] position:relative;[/B]
}
You have a permanent horizontal scrollbar on the viewport because you have made the cardinal sin of using position relative to move elements around. Position relative isn’t really meant for structural elements and is meant for more subtle overlapping effects.
Elements moved with position:relative aren’t really moved at all and the space they previously occupied is always preserved.
In most cases you would simply use margins and stop this overlapping effect.
#navi ul {
list-style: none;
position: relative;
/* margin-top: 120px; */
top: 127px;
[B] margin-left: 147px;
}[/B]
#volun {
position: relative;
top: 219px;
[B] margin-left: 287px;[/B]
}
i first did what you said and put a wrapper <div> nested directly underneath the <body> and centered the wrapping div using margin-left and margin-right AUTO. the wordpress link jpg is still not aligned right.
i then tried to add position: relative in a desperate attempt to see if this would align it right. again, no dice and the wordpress link jpg still looks messed up in IE6/IE7.
yeah i remember reading somewhere that too much RP is horrible and i am definitely thinking that i will have to do that. yeah, i shouldn’t start with bad habits and i guess too much RP is a really bad habit.
i’m going to read the links you posted to see where i am going horribly wrong with this wordpress jpg link.
thanks! i appreciate the help greatly, but this wordpress jpg problem is troublesome.
I can’t see a difference with the Wordpress icon now. It seems to look the same in all Ie versions which is the same as Firefox. What am I looking for as I don’t see anything obvious?
it’s kinda hard to notice, but the red stripe in the flag (background of wordpress jpg) is not even and it is improperly aligned with background img.
i guess i’m just gonna have to use a .png file for the wordpress image with transparent background, but i was hoping to just use a .jpg and overlay the .jpg perfectly on the background image (also a jpg). i guess it is probably best to go with a .png and transparent background for the wordpress image so i am going to have to rework all of this.
Ok - I see it now 
Remove the whitespace from the html around the anchors surrounding the image.
<div id="facebook"><a href="" title="go to Steve's Facebook page"><img src="http://stevekimforag.com/test/img/fb.jpg" width="49" height="48" alt="facebook logo"/></a></div>
<div id="wordpress"><a href="" title="go to Steve's wordpress blog"><img src="http://stevekimforag.com/test/img/wp.jpg" width="52" height="50" alt="wordpress logo"/></a></div>
hi again. yeah i think everything should be ok if i use .png images like i should have from the very beginning. sorry for that.
i do have one question that i am VERY curious about. you said to minimize the use of RP. however, the styling you provided went as follows:
#navi ul {
list-style: none;
position: relative;
/* margin-top: 120px; */
top: 127px;
margin-left: 147px;
}
#volun {
position: relative;
top: 219px;
margin-left: 287px;
}
i see that you are still using RP for the “top” part. i tried to actually take out relative positioning all together and used a “margin-top” instead of “top”, but in the case of the “#navi ul” it was actually making the entire page start farther down and put the navi on top of the main background image. i was curious as to why “margin-top” doesn’t work in this situation and why I had to go with RP “top:”
thanks again for all the great help.
Hi,
I didn’t change the top relative positioning because you had used it in loads of places and if I changed one then all the others would have to be changed as well so I left it alone This is the danger of relative positioning and if you had used margins/padding to make space instead then all other elements should follow naturally without having to change them all.
The problem you mention in using margin-top for the first element is one of collapsing margins and the margin-top you apply to .navi collapses and becomes the margin on the container above and pushes the whole page down rather than just the nav.
This is the way collapsing margins work and although un-intuitive at first there are good reasons for it. You can avoid margin collapse by ensuring that the element above has some padding (or a border if the design allows) to stop the margin collapsing through.
cool!
i did what you said and put a 1px padding on “Content”:
Content {
padding: 1px;
width: 960px;
height: 673px;
background: url(img/bckgnd.jpg) top left no-repeat;
}
then positioned “#navi ul”:
#navi ul {
list-style: none;
margin-top: 127px;
margin-left: 149px;
}
it worked great! however, do you agree that this is ok to do? the 1px padding on Content or is there a more professional way? i don’t want to look like the amateur that i am… lol 
Sometimes when I know there’ll be margin collapse like that, I see if I can do it the other way around (and sometimes I can’t): top-padding on the container box instead of top margin on the first child.
When that doesn’t work, sometimes I’ve used a 1px white border (if the background for everything was white anyway) or, if I didn’t want to see even 1 px of padding and didn’t want a solid border colour, I could always get away with an invisible border: I didn’t know how to get this to work in IE6 until Paul had a quiz about it.
border: 1px dashed transparent;
the “dashed” makes it work in IE6 too.
So yeah, you’ll see professionals using 1px either border or padding… or there are a few other ways… sometimes people will take a box who’s 100% wide already and they’ll just float it (floats’ margins aren’t supposed to collapse. except sometimes they do in IE arg) or other creative things.
again, great stuff. thanks everyone.