Tackling Cross-Browser Compatibility and CSS w/ IE6/7

I'm having serious problems with CSS floats in this wordpress theme in IE6/7: http://032b4a6.netsolhost.com/WordPress/

This is the first WP theme I've coded, and while I've learned some great lessons for the future, the code is inelegant.

It works fine in modern browsers, but it is highly likely that a large number of visitors to this site will not have updated browsers.

It seems to me that there is a core issue that is repeated throughout the styling and if I can discover what that is, then I'll be a good bit closer to fixing the theme.

I found this page, which seems to offer some suggestions but, ultimatel开发者_如何转开发y, makes my task sound impossible. Are there other resources or common suggestions that are offered for fixing cross-compatibility float issues with IE?

Even more importantly, if you are able to look at the site in IE6 or IE7, do you have any specific suggestions for how I might fix the floating issues?

I'm not sure it is an issue with the floats.

It appears that in your HTML code you may not have closed off the "sidebar" div before adding the "sidebar-alt" div. This means the "sidebar-alt" and "content-article" divs are contained in the "sidebar" div which only has a width of 120px - hence the reason they are all squashed up on the left.

To resolve the problem with the "Popular Images" and "Related Pages" headers, you could look at using a background-image within a div.

To resolve the nav bar, you need to remove the height and width from the 'a' tags.

I hope this helps fix your issues.