Unable to make header background transparent in IE

  • Profile Image
    Reij
    Asked on February 17, 2012 at 03:20 PM

    I am using the Pastel theme with some injected CSS and it works great in Firefox but I can't remove the box surrounding the header in Internet Explorer (see screenshot). The offending code is as follows:

    progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBCB5D', endColorstr='#EFA003',GradientType=0 )

    progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#4A4A4A',GradientType=0 )

    The second line makes the box gray. The first line overrides the second and makes it orange, as per the screenshot.

    I have tried to disable the code by injecting lines like the following:

    filter: progid:DXImageTransform.Microsoft.gradient(enabled='false')

    Unfortunatly, nothing I've tried fixes the problem. I just want the background to be transparent.

     

    My current injected CSS is this:

    .form-all {

    font-family: "lucida sans",verdana,arial,sans-serif;

    }

    .form-header-group {

    color: maroon;

    font-family: arial,sans-serif;

    background: transparent;

    text-shadow:none;

    text-align: left;

    padding: 0px 0 0 0px;

    }

    .form-header-group h2 {

    font-size: 18px;

    font-weight: Bold;

    }

     

    I'd appreciate any solutions.

     

  • Profile Image
    NeilVicente
    Answered on February 17, 2012 at 06:12 PM

    It would be super if you can share the URL in which the form is embedded so we can provide a more accurate solution. Trying to fix something without being able to see it is like finding a needle in haystack, in a dark barn :)

  • Profile Image
    idarktech
    Answered on February 17, 2012 at 06:17 PM

    Hi there,

    Can you please try to add this css codes under your .form-header-group?

    background:transparent !important;

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);

    Just let us know if this doesn't help so that we can further assist you. Thank you.

  • Profile Image
    numajames
    Answered on February 17, 2012 at 08:32 PM

    Thanks for your ideas. Unfortunatly, idarktech, inserting your code into the .form-header-group didn't change anything.

    Here is the URL so you can have a closer look:

    http://www.apartmentsineverett.com/contact-us.html

  • Profile Image
    idarktech
    Answered on February 17, 2012 at 09:02 PM

    @numajames,

    Your header background looks fine here. Even viewed on IE7, it still displays correctly. Can you please try to clear your browsers cache and see if that makes any differences for you?

     

    If it still doesn't display correctly, try turning on your IE browser's compatibility button. Please read here for more info.

    Hope this helps. Thank you.

  • Profile Image
    abajan
    Answered on February 17, 2012 at 09:10 PM

    Actually, I'm getting the same result that Reij is (in IE8 on Windows). BrowserStack.com is also showing the same problem in the IE9.

  • Profile Image
    abajan
    Answered on February 17, 2012 at 09:25 PM

    Reij

    Idarktech's advice to enable your browser's compatibilty mode works. Actually, I neglected to read the last part of his post before posting my own comment.

  • Profile Image
    numajames
    Answered on February 17, 2012 at 09:50 PM

    I can confirm what abajan and idarktech found. It has the problem with IE8 and IE9. Clearing the cache didnt' change anything, although it worked properly in compatibility mode. It renders correctly on all other browsers I tested (IE5.5, IE6, IE7 Firefox, Opera, Chrome, and Pale Moon).

     

    BTW Reij and numajames = same person

  • Profile Image
    abajan
    Answered on February 18, 2012 at 02:59 AM

    We'll see if we can come up with CSS that will correct that but it may take some time.