SimpleCorp not showing up correctly in IE8 & 9

I've seen this before with other themes, it is most likely just CSS. I don't have a link to your site to test this theory, but my guess is that your CSS either has an improper float element or you need to add a 'display: inline-block' element to your menu bar.

OK, so the top menu items look like they are displaying inline for me in IE8 (not a dropdown like in your screenshot), but the gray bar and other elements are shifted. The slideshow is off the page for me as well.

I think the issue is with this piece of code:
.container {
margin: 0 auto;
position: relative;
width: 940px; }

IE8 isn't a big fan of 'margin: 0 auto'. See http://stackoverflow.com/questions/662341/using-margin-0-auto-in-interne... for more details. Sometimes just adding 'text-align:center' to the div just outside the .container will work. Other times, you need to use browser specific code to solve your issue (see my code below).

Another minor issue with your top menu, I see a right border on the last menu item 'contact us' in IE8. You have #pre-header ul.menu li.last a, #pre-header ul.menu li:last-child a set correctly for most browsers, but IE8 does not adhere to the li:last-child CSS. See http://stackoverflow.com/questions/1293369/using-last-child-in-css for more info. In this case, I would switch them all to have a *left* border and hide the first menu item using ':first-child' CSS since IE does support that code.

Here are the changes I made (in bold) to my 'main.css' file to render the header in IE8. Note, I am using a clean install of the SimpleCorp theme, your code may vary.
line 96: #pre-header { background: #9dcedf; float: left; width: 940px; padding: 0 40px 0 40px; margin: 0px 0 30px -40px; border-bottom: 1pt solid #d8d5cd; min-height: 50px; padding: 0 80px 0 40px\9; }
line 371: #page { height: auto; width: 1020px; background: #FFF; -webkit-box-shadow: 0 10px 80px 0 rgba(0, 0, 0, 0.20); -moz-box-shadow: 0 10px 80px 0 rgba(0, 0, 0, 0.20); box-shadow: 0 10px 80px 0 rgba(0, 0, 0, 0.20); padding: 0px; margin: 50px auto 100px; overflow: hidden;}
line 404: #header-left { float: left; text-align: center;}

Subscribing

I do think that there are some updates that are needed for SimpleCorp to be more IE8 friendly, but it sounds like your issues might stem from changes you (or someone) made to your custom theme. With CSS, things can get messy pretty fast. I can't tell you how many times I have designed something for FF or Chrome, only to have it look odd in IE.

Do you have access to a test site where you could copy over your modified theme and try some changes out? I also find tools like 'Firebug' (https://getfirebug.com/firebuglite) useful when testing CSS changes. Firebug is available for IE, so I would try that route first.

i have the same issues :( is there already a solution for ie8 ?

I have the same issue too. I am unable to go ahead with the go live of my site because of this issue. Kindly help.

Having the same issue. Isn't someone able to help us out?

The fix that cehfisher is pointing to, solved the alignment of the pre-header.

Does anybody know how to edit the

The problem is with the HTML 5 tags. IE8 does not understand HTML 5 tags.

As per my observation, SimpleCorp uses these html5 tags : <nav> and <header>

In order to enable ie8 to understand html5 tags, add the following script in the head section of html.tpl.php file.

<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
document.createElement('hgroup');
</script>
<![endif]-->

Reference : http://stackoverflow.com/questions/8778889/css-ie8-cant-style-a-list-ele...

Please update accordingly and test if there is any issue with this.

Support html5shiv - This change/addition will be included in next Simple Corp release 7.x-1.1

html5shiv adds new HTML5 elements (which is simple code), but also supports printing HTML5 elements and includes the default styles for HTML5 elements, like block on article and section in lt IE 9

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

Fixed in:
http://drupalcode.org/project/simplecorp.git/commit/9a516c8

Thanks
Soukri

Hi Chinchu2005,

Just wanted to say i have applied your fix exactly as stated, and it worked perfectly, ( just to let everone else know ).

I had the issue with IE8 and IE9 not displaying properly.

Now it looks as it should do in other browsers.

Thank you so much for this is to apply fix, it was driving me nuts.

regards,

TM

Thank you Mr.Chinchu2005. it worked like a charm!