Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #24463

    Hi Guys,

    Hoping you can help. I’m just running final browser checks for my site and the logo is huge in IE8 (fine in 9 & 7). You can see how big it is here: http://i.imgur.com/fqUxLkz.png and how big it should be here:http://llep.19grams.co.uk

    Also, the buttons seem to be displaying incorrectly. It should be like this: http://llep.19grams.co.uk/pricing-tiers/ but it displays like this:http://i.imgur.com/kOtiOep.png

    Thanks

    #123535

    Hi,

    open up header.php and add following code before the closing head tag (</head>).

    <!--[if lt IE 9]>
    <style>
    .logo a{
    max-height: 100% !important;
    }

    .logo a img{
    height: 150px;
    }

    body .avia-button.avia-color-theme-color, body .avia-button.avia-color-theme-color:hover {
    background: #a6ce39;
    }
    </style>
    <![endif]-->

    The button styling won’t be similar to Firefox/Chrome, etc. because IE8 does not support CSS3 attributes but at least the text should be readable.

    #123536

    Thanks Dude,

    The only issue now is that when the logo usually resizes with the header nav as the user scrolls down, it doesn’t in IE8. Is there a way to either make it re-size on scroll or have a different nav treatment just for IE8?

    Thanks

    #123537

    Hi,

    I edited Dude’s code a little.

    <!--[if lt IE 9]>
    <style>
    .logo a{
    max-height: 100% !important;
    }

    .logo a img{
    height: 150px;
    }

    body .avia-button.avia-color-theme-color, body .avia-button.avia-color-theme-color:hover {
    background: #a6ce39;
    }

    #header_main .container, .main_menu ul:first-child > li a {
    height: 88px !important;
    line-height: 88px !important;
    }
    </style>
    <![endif]-->

    This will keep the header large on IE8.

    Regards,

    Ismael

    #123538

    Thanks Ismael. Now the logo is cropped and the dropdowns are unusually deep, see here: http://i.imgur.com/jRJtIo5.png

    #123539

    Hi,

    I forgot to adjust the size

    <!--[if lt IE 9]>
    <style>
    .logo a{
    max-height: 100% !important;
    }

    .logo a img{
    height: 150px;
    }

    body .avia-button.avia-color-theme-color, body .avia-button.avia-color-theme-color:hover {
    background: #a6ce39;
    }

    #header_main .container {
    height: 150px !important;
    line-height: 150px !important;
    }
    </style>
    <![endif]-->

    Regards,

    Ismael

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

The topic ‘Inconsistencies in IE8’ is closed to new replies.