IE Styling Issue - ARG - Help please.

[JacquiiDesigns]

Okay - so I've been working very diligently on my new forum design which you can see at http://jpicforum.info --- I have an issue. The style doesn't "break" persey in Internet Explorer - but there's something obviously amiss when I view in IE 8 - Here's a screencap of what I see in IE:

So there are some issues OR an issue. The weird thing is that this background image that shows repeatedly is set as "background-repeat: no-repeat;"

I've noticed that this weird issue happens only on the homepage and forum view. Other pages seem to show fine: Videos / Help ---- The site seems to show just fine in the latest versions of Opera, Firefox, Chrome & Safari. So I'm stumped.

Can anyone help me sort this issue please? I'll appreciate your assistance!

Thanks

J.

 

[Jake Bunce]

Reminds of this (line break in header related to width of logo):

http://xenforo.com/community/threads/header-image-is-below-navigation-in-ie.11440/

Might not be the same problem, just reminded.

Unfortunately IE8 doesn't have an element inspector that I am aware of which makes it difficult to troubleshoot styling problems. Your style is obviously experiencing a browser compatibility issue.

 

[MagnusB]

Unfortunately IE8 doesn't have an element inspector that I am aware of which makes it difficult to troubleshoot styling problems. Your style is obviously experiencing a browser compatibility issue.

I think all versions of IE from 7 have the developer tools installed. It offers a basic tool, but not a useful one.

As for the topic at hand, I managed to debug a few:

1. QuickSearch: You need to increase right from 6px to 50px ish, seems to solve it.

2. Footer: I wasn't really able to solve this, but I did track it down to the conflicting rule:
.footer .pageContent background URL is for some reason overriden by #content .pageContent background-image rule. I tried applying an important to the footer one, but no cigar. I can't really remember the html construct here, as IE8 is butchering the html5 tags, but you might want to add an if ie rule, then use this to apply the background to the footer:

#content .pageContent.footer {
css here
}

you might want to use lte 9 as well, to only apply it to IE versions below 10. Also, forcing the browser to use IE8 document mode might be a good idea:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Be sure to use that with if ie statements, cause you don't want newer versions emulating older versions.