I'm having an issue with my CSS code for a theme I'm developing from scratch. I know that IE considers padding to be internal to a div, but I still can't figure out exactly what's going wrong. I have a Mac, so I can't even test changes locally—I've been using Browsershots.
The problem shows up differently in different versions of IE, but basically it boils down three issues:
- the sidebar drops below the post content
- IE 7 seems to have scrollbars in the heart of the page
- when I did manage to fix the sidebar in a previous version of the CSS, there was too much space on the right side of the main content area (the "meat" div) in all versions of IE
The theme in question is visible on my site at http://www.crankybeardesign.com/wordpress and at http://www.crankybeardesign.com/wordpress/blog. The CSS is at http://www.crankybeardesign.com/wordpress/wp-content/themes/Fireproof/style.css.
I've been unable to figure this out for a week now, and I think it's something obvious that's staring me in the face. If you can help, I'll love you forever.