WordPress Custom Theme CSS Rendering Problems in IE 7

Wordpress CMS CSS Rendering in Browsers

[DavidArthurCode]

Dear CSS Community:
FYI, this is my first post, and I don't know coding. A web designer created a custom theme for my blog but I can no longer reach her. I love my custom theme, but it renders strangely in IE 7 in particular, although the same broken layout sometimes shows up in Firefox and Safari as well. The strangest thing is, it only renders funny *sometimes*. In IE 7 it's pretty consistently a mess, but IE 6 and the other browsers sometimes render perfectly, sometimes not.

A coder friend (who doesn't know WordPress) and I have spent hours pouring over the code. We were focused on the "z-index," but to no avail. Another person suggested, "The secret lies in the CSS and how it is rendered. If you look at the source code for your site, you will see many <div> tags that define certain types of objects. Those objects are defined in the CSS file."

I'm hoping there's a line or two of code somewhere that will fix this problem. With a friend's help, I'm capable of copy 'n pasting some code into one of my files, but that's about the extent of my prowess. I'd appreciate any help you can offer. FYI, here are some of the comments below to help you troubleshoot the problem:

A friend pointed out that my page layout looked broken in three browsers he tried: IE, Safari and Firefox. Another friend reported this: "In Windows XP SP2, IE 6 there is extra space in between the header and the 'Special Message' and 'Listen and Learn' sections. Also, the bottom of the page has some extra stuff sticking out of the bottom.

Another friend said," I think this problem is caused by the conditional IE workarounds you have in your theme."
Thanks for any guidance you can offer,
David

[edited by: SuzyUK at 9:55 am (utc) on Mar. 3, 2007]
[edit reason] removed specifics per TOS #13 [/edit]

[SuzyUK]

Hello DavidArthurCode and Welcome to WebmasterWorld!

The strangest thing is, it only renders funny *sometimes*

Unfortunately this sounds like a flaw in your WP template where some types of Pages are not generating a vital part of the HTML structure. Is there a commonality in the pages that aren't working e.g. is it Page (WP definition of page that is) or is a post with or without comments allowed or with comments closed.
You should try validating the HTML of pages that are "broken" W3C Validator [validator.w3.org] your coding friend should be able to help with messages but you're looking for missing closing elements.

Next it also might be the CSS but if some pages are displaying OK I'm not so sure it's only a CSS problem as the CSS in templates pretty much applies to all pages in a site so again this leads me to believe there's an underlying HTML error first. You can also validate the CSS [jigsaw.w3.org] but that will only check the actual parseability of the code it won't help find conflicting rules. You can always come back here and ask if you find a specific CSS error you need help with.

It does sound has if the site has been built with only IE6 in mind, we always advise that sites are built to work in FF/Opera/Safari etc. first then fixed for IE. IE7 is much closer in nature to the aforementioned compliant browsers but it does still have some of the problems that IE6 has so it could be it needs a complete work over of the CSS to make it compliant friendly - You might be best advised to find another WP designer, who's competent in CSS too, to overhaul it because from your description I don't think it's a simple two line fix.

Suzy