Margin or padding issue (I think) is causing middle content to push right

My site: www.kentuckygolfing.com (which looks the same now in both IE and FF)

The areas in question: http://www.kentuckygolfing.com/article/this-is-another-test and http://www.kentuckygolfing.com/courses/andover-golf-country-club

In FF they are fine (as usual), but IE you can see the problem right off I'm sure. The middle column content is pushed right about 10px, and as a result of that happening, the Navigation Menu has no room so is dropped down below the content on the left column.

I've looked and looked and I can't find the problem. I've tried to be aware of the box model and watching my padding and margins on elements, but I could have made a mistake, I just can't seem to pinpoint it. It's got to be some element that's added to those two pages like the comments or the course detailed information because as you can see the homepage is perfectly fine but those other pages (using same stylesheet and html layout) are not fine.

Anyone have any ideas?

Thanks

 

Add this:

#maincontent #comment_form {
	padding-right: 0px;
}

Code (markup):

 

Thanks! That worked for this page: http://www.kentuckygolfing.com/article/this-is-another-test

But not for this page:http://www.kentuckygolfing.com/courses/andover-golf-country-club

There is no comment form on the page that it didn't work for, so I can only assume it's on the course details table? I'm going to try the same fix, only for the table and see what happens.

Can you help me understand what's going on with the fix you gave me above? I already specified (so I thought) that each element in the CSS should have no padding/margins unless I add them myself by using * {padding:0; margin:0; }

Thank you

 

#maincontent #article_body
{
	padding-right: 0px;
}

Code (markup):

Yeah, but you also have this:

#maincontent div {
padding: 0 10px 0 0;
}

Code (markup):

 

NICE! That did the trick. I wouldn't have figured it out on my own. I've seriously tried what I thought was everything.

I'm still a little confused though. For one, yes I did have

#maincontent div {
padding: 0 10px 0 0;
}

Code (markup):

But from a book I was reading, I was under the impression that if you used this in this way where you're adding padding to the child divs it wont have a box model affect on other elements? That's the reason I used #maincontent div instead of just appying the padding to #maincontent.

Second thing I'm confused about is that I already had a style in my CSS for both #comment_form and #article_body...yet when I try to add the styles you gave me to these already exsisting tags, nothing happens and it's still messed up. Can you tell me what the signifigance of having #maincontent before the #comment_form and #article_body is?

Thanks

+Rep for you also!

 

Well, first of all, your site works fine in Firefox and it didn't work in IE. In that case you can be 99% sure that you're doing everything right. IE can be...... weird

You had #comment_form and #maincontent div. #comment_form is also #maincontent div so browsers have to choose between these two selectors. For some reason IE thinks that #maincontent div is more specific. I'm not sure why. As you can see, it doesn't work like that in other browsers.

With #something1 #something2 {} you can't go wrong

 

Ahhh I see what you're saying now. Weird. I hate IE as I'm sure lot of other people do. I would have had this site design finished a couple weeks ago if not for IE.

Thanks again.