Compatible with Internet Explorer

  • Anonymous


    I have been having several reports that our blog at using this theme isn’t showing properly on Internet Explorer. Can we please get some help as to why this is the case or how to fix it?


    Syahir Hakim


    Please provide more information. Which version of IE? What or which part of the theme that doesn’t display properly? Also, URL of the page/site in question.



    Im having the same problems too with older versions of IE (ver 6.0), but tried it with IE 8.0 it works fine…I just ask my readers to update their IE to 8.0 or newer…



    I’ve upgraded IE to version 8 (Windows XP), and still having problems. All content, header, columns and widgets have been aligned left instead of being centered, so the page is “falling apart”. In Chrome and Mozilla everything works just fine.

    Site is:

    Great job, othervise. Nice, clean and simple layout. Thank you 🙂



    It becomes even more weird. Not only that everything went wrong in IE, but I just discovered that I can’t login using IE or Mozilla. So I guess it’s something related to my WP instalation, and has nothing to do with Graphene



    I am having the same issue in IE7, theme aligns to the left, images in the menu bar below the header aren’t loading…

    Works beautifully in Firefox though!

    site is


    Syahir Hakim


    There’s this additional line at the very top of your site’s code which isn’t supposed to be there.

    <link href='|Ubuntu|Droid+Sans|Orbitron:900' rel='stylesheet' type='text/css'>

    That line should be in between the <head> and </head> tags instead.



    Legend, thanks!




    I too am having grave Internet Explorer problems. I thought everything was great until I viewed my site at work using IE8 on a Windows machine.

    My site is

    Here is what it looks like in Safari and Firefox: site_good.jpg

    Here is what it looked like in IE8: site_bad.jpg

    From reading this thread I checked out the source, and nothing looks untoward to my untrained eyes except for the bit in the <head> that looks like this:

    <!--[if lte IE 8]>
    <style type="text/css" media="screen">

    I’ve also included some portions of my child style.css which relate to the elements in question:

    .sidebar h3 {
    background: url(images/bg-sidebar-h3.png) left bottom repeat-x #3C9CD2;
    background: -moz-linear-gradient(#BB5822, #401A05);
    background: -webkit-linear-gradient(#BB5822, #401A05);
    background: linear-gradient(#BB5822, #401A05);
    border-bottom: 1px solid #040D17;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    color: #fff;
    *display: inline;
    font: bold 16px/20px arial;
    margin: -15px 0 5px -12px;
    padding: 7px 12px;
    text-shadow: 0 -1px 0 #555;
    width: 100%;
    zoom: 1;
    .home #content {
    background: -moz-linear-gradient(#4B4D5D, #171C41) repeat scroll 0 0 transparent;
    padding-bottom: 0px;
    padding-top: 21px;
    #content {
    background: -moz-linear-gradient(#4b4d5d, #171c41);
    background: -webkit-linear-gradient(#4b4d5d, #171c41);
    background: linear-gradient(#4b4d5d, #171c41);
    padding-top: 21px;
    padding-bottom: 20px;
    .sidebar div.sidebar-wrap {
    background: #fff;
    border: 1px solid #45496b;
    -moz-box-shadow: 0 0 5px #BBB;
    -webkit-box-shadow: 0 0 5px #BBB;
    box-shadow: 0 0 5px #BBB;
    margin-bottom: 16px;
    padding: 10px 12px;
    position: relative;
    #sidebar_bottom {
    background: #171c41;
    clear: both;
    margin-top: -10px;
    padding: 0 0 20px 0;
    #sidebar_bottom .sidebar-wrap {
    display: inline-block;
    margin: 10px 1px 5px 14px;
    padding: 10px;
    vertical-align: top;

    Any help, as always, much appreciated.





    Don’t know if this has already been discovered, but if not, I’ve figured out the reason to the problem I posted.

    I may just be repeating what someone else has already said, and I just haven’t been able to find it in the forums, so apologies for that.

    The reason my colour changes were taking in Safari and Firefox and Chrome but not IE or Opera was because those last two browsers don’t seem to support any of the various gradient commands. This is obviously already known, for this is the reason for the “bg-sidebar-h3.png” and like files, which is effectively a hard copy of the gradient. It’s this file that IE and Opera uses (and Safari for iPhone as it turns out). Because I hadn’t changed the path to the image in my child style.css, the colour used was the single shade defined at the end of that first “background…” line.

    Thus, to fix it, I opened the png files in Photoshop (there’s one for the widget headers and two for the block buttons), used my specified colour values to fill the png’s with my new gradient, saved them to my child folder and changed the paths in the css file accordingly.

    It seems to have done the job.

    P.S. If you have a Mac and want to know how your site looks in IE, use “IE NetRenderer”, it’s a website and supplies you with a simple screenshot of your site in any IE version of your choice.

Viewing 10 posts - 1 through 10 (of 10 total)

  • You must be logged in to reply to this topic.