Problems with IE - help appreciated

[mheher]

Hi there, So I just keep having little problems with my website in IE and I just don't know what to try anymore. This is the first website I've made and any help would be appreciated. The website is Bombfootbags.com. The problems are... on the home page, the left border on the "pellet footbags" box down at the bottom is not showing. AND on the sand footbags, pellet footbags, and faq pages, the mainContent div is getting pushed down below the sidebar div. I've been having problems with this for a while. What I don't understand is that I'm not having that problem on the other pages on the site when the basic structure is the same....

Any help much appreciated figuring out these little things takes me more time than putting the whole site together and it's obviously frustrating.

[Plyswthsqurles]

This is just some suggestions without looking at your code, ill look at it later when i have time.

Do you use firebug? If not i suggest you find it and download it, it will make your life so much easier. Also download the web development tool bar for firefox as well since there are options from a drop down menu to validate HTML and CSS without googling for it.

One thing i need to know is what version of IE are you using that causes this problem. I would recommend running your website through Browsershots.org. This will allow you to see what your web page (that particular URL) looks like in numerous different broswers.

The other thing is, is this page made with div's or with tables?

If its divs, make sure the div size is no large then it needs to be. For instance if you have a 500 width pixle image in its own single div as your header then the width of the div needs not excess more then 500px. It will render correctly in Firefox if you dont follow this rule but in IE it will start pushing things downward because it thinks it needs all that room.

In short, download Firebug for Firefox, Webdeveloper Toolbar for Firefox, and Validate Validate Validate. Dont give in to CSS Hacks. If you still have problems, sometimes its easier to design a more friendlier layout rather then give into CSS Hacks. That is just my opinion however.

Hope this helps somewhat

[mheher]

Hey for the reply, awesome advice thus far. The website is all divs, and I'm wondering if it is a picture size thing because 2 of the pages that are sliding down have all of the images of the footbags and maybe that is causing a problem.... but then the FAQ page also which has absolutely no photos is sliding as well.

Yeah I'm not trying to use hacks to solve the problem, just was running out of ideas and have been wasting lots of time essentially doing nothing productive.

I will check that website and get back to you on the IE version

[mheher]

Using Browsershots, it looked fine in IE 7 and IE 8, I have a less than a year old mac with windows on it so I assume that IE is pretty new as well, but it the mainContent div shifts down past the sidebar div on the pages mentioned in my first message. And a friend was taking a look and said the same thing...

What else can I give you to help??? Thanks a bunch.

[MidiMagic]

This may be a case of stuff not fitting on different screen resolutions.

Also realize that IE renders margins, borders, and padding differently than other browsers do. This can make things not fit in certain cases.

Do not use pixels, points, cm, or inches to define sizes if you want multi-computer compatibility. Use percent and em instead.