IE is Killing my Layouts! Help!

HTML & CSS
1

I am in the process of updating our template for our site. Chrome and Firefox look great, but IE it throwing things around.

Here is the site, www.my-testing-site.com.

Issues I am having are;

  1. my menu bar is behind the banner when hovering, etc.
  2. My left nav is being pushed to far to the right
  3. My main image in the content is being pushed too far to the right

same on the product pages, http://www.my-testing-site.com/polywood-adirondack-chair-1.html

Alignment is being pushed too far to the right.

I wanted to know the best way to make these changes to keep the site using the best practices for CSS and yet get this to work in IE.

Any help?
Thanks - Daniel

2

Update, I was able to get some of the alignment issues worked out.
Now I notice that my toolbar with the compare, pages and sort by is all messed up. Not showing background images, etc.

http://www.my-testing-site.com/polywood-chairs

Any help would be appreciated.

3

You need to declare a width on -

.col2-left-layout .col-main {
    float: right;
}

Whenever you declare a float, you need to specify a width to the element. Try giving the sidebar a smaller width so,
“col-main” “col-left-sidebar” fit the wrapping container.

4

Thanks Blake!

I set that and seemed to fix a few things.

On my category page, the toolbar is pushing down the right side ‘positioning’ box. Can you please tell me what that is happening now?

5

I’m not sure what you mean. Are you referring to the navigation bar?

6

No. It is the bar that has the ‘Compare Items’ in blue, the Page: 1 2 3 4 > and to the right of that should be the position section or sort by.

http://www.my-testing-site.com/polywood-chairs

You may not be able to even see it, but it is being pushed too far down and there isnt any padding or margins on it.

7

Yikes, have you tried that page without the stripey backgound? It makes it very busy.