CSS background image not loading in IE9

2019-07-04 16:32发布

站内问答 / HTML/CSS
1898 2 5

I have an image that I'm trying to load in IE9. I can get the image to load in quirks mode, but can't get it to load in standard mode. It renders fine in both Firefox and Chrome.

Here is the CSS:

@charset "UTF-8";
/* 
    Background-Styles 
*/

body {
    margin:0px; padding:0px;
    background-color:#bfbfbf;
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    color:#7f7d78;
    font-size:13px;
    line-height:19px;
}
#main {
    background:#bfbfbf;
    /*padding-bottom:30px;*/
    min-height: 715px;
}
#main .container {
    /*background:#6d6f71;*/ 
    background: #343a3f; /* Old browsers */
    background: #6d6f71; /* Old browsers */
    background: url(images/ES_header_background_gradient2.png), -moz-linear-   gradient(-45deg, #6d6f71 0%, #3c3d3e 42%, #3c3d3e 45%, #6d6f71 100%); /* FF3.6+ */
    background: url(images/ES_header_background_gradient2.png), -webkit-gradient(linear, left top, right bottom, color-stop(0%,#6d6f71), color-stop(42%,#3c3d3e), color-stop(45%,#3c3d3e), color-stop(100%,#6d6f71)); /* Chrome,Safari4+ */
    background: url(images/ES_header_background_gradient2.png), -webkit-linear-gradient(-45deg, #6d6f71 0%,#3c3d3e 42%,#3c3d3e 45%,#6d6f71 100%); /* Chrome10+,Safari5.1+ */
    background: url(images/ES_header_background_gradient2.png), -o-linear-gradient(-45deg, #6d6f71 0%,#3c3d3e 42%,#3c3d3e 45%,#6d6f71 100%); /* Opera 11.10+ */
    background: url(images/ES_header_background_gradient2.png), -ms-linear-gradient(-45deg, #6d6f71 0%,#3c3d3e 42%,#3c3d3e 45%,#6d6f71 100%); /* IE10+ */
    background: url(images/ES_header_background_gradient2.png), linear-gradient(-45deg, #6d6f71 0%,#3c3d3e 42%,#3c3d3e 45%,#6d6f71 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d6f71', endColorstr='#6d6f71',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.container {
    height: 60px;
    width:1024px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    display:block;
}
/* 
    Header-Styles 
*/

#header {
    padding-top:20px;
    padding-bottom:20px;
    width:1024px;
    margin:0 auto;
    position:relative;
    margin-bottom:1px;
    height:20px;
}
#logo h1, #logo small {
    margin:0px;
    display:block;
    text-indent:-9999px;
}
#logo {
    background-image:url(images/logo.png);
    background-repeat:no-repeat;
    width:194px;
    height:83px;
}
ul#menu {
    margin:0px; 
    padding:0 0 0 25px;
    right:0px;
}
ul#menu li {
    display:inline;
    margin-right:20px;
}
ul#menu li a {
    text-decoration:none;
    color:#FFFFFF;
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 700;
    font-size:16px;
    /*font-weight:bold;*/
    text-transform:uppercase;
}
ul#menu li p {
    margin: 0px;
}


/* 
    Content-Styles 
*/

.splash{
    width:1024px;
    height: 290px;
    background: url("images/ES_splash3.2.jpg") no-repeat 100% 100%;
    display:block;
    margin:0px;
    padding:0px;
}
.content{
    height: 363px;
    width: 1024 px;
    background-color: #FFFFFF;
    display:block;
}
.splash_content_top{
    height: 135px;
    width: 750px;
    /*background: blue;*/
}
.splash_content_bottom{
    height: 228px;
    width: 1024px;
}

#about{
    width: 135px;
    font-size:26px;
    font-weight:bold;
    color: #e87411;
    padding-top:25px;
    padding-left:25px;
    position:absolute;
}
#about_content{
    float:right;
    width: 575px;
    padding-top:25px;
}

#payroll{
    width:341px;
    min-height: 225px;
    float:left;
}
#hr{
    width:342px;
    min-height: 225px;
    float:left;
}
#staffing{
    width:341px;
    min-height: 225px;
    float:left;
}
#payroll_top{
    background-image: url('images/ES_content_icon_div1.png');
    width:70px;
    height:49px;
    margin-left:15px;
    position:absolute;
}
#hr_top{
    background-image: url('images/ES_content_icon_div2.png');
    width:72px;
    height:48px;
    margin-left:15px;
    position:absolute;
}
#staffing_top{
    background-image: url('images/ES_content_icon_div3.png');
    width:72px;
    height:53px;
    margin-left:15px;
    position:absolute;
}
#payroll_name{
    float: right;
    font-size:24px;
    font-weight:bold;
    margin-right:165px;
    margin-top:18px;
    margin-bottom:15px;
}
#hr_name{
    float: right;
    font-size:24px;
    font-weight:bold;
    margin-right:37px;
    margin-top:18px;
    margin-bottom:15px;
}
#staffing_name{
    float: right;
    font-size:24px;
    font-weight:bold;
    margin-right:153px;
    margin-top:18px;
    margin-bottom:15px;
}
.div_ul{
    margin-left:12px;
    margin-top:60px;
}
.div_ul ul{
    list-style:none;
    margin:0 0 1em 25px;
    padding: 0;
}
.div_ul ul li{
    line-height:1.3em;
    margin: .25em 0;
    padding: 0 0 0 15px;
    background:url(images/ul_dot.png) no-repeat 0 3px;;
}


/* 
    Tag-Styles 
*/

.tagButton {
    border-top: 1px solid #d4d4d4;
    background: #eeeeee; /* Old browsers */
    background: -moz-linear-gradient(top, #eeeeee 0%, #d5d5d5 50%, #c9c9c9 51%, #c9c9c9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(50%,#d5d5d5), color-stop(51%,#c9c9c9), color-stop(100%,#c9c9c9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #eeeeee 0%,#d5d5d5 50%,#c9c9c9 51%,#c9c9c9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #eeeeee 0%,#d5d5d5 50%,#c9c9c9 51%,#c9c9c9 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #eeeeee 0%,#d5d5d5 50%,#c9c9c9 51%,#c9c9c9 100%); /* IE10+ */
    background: linear-gradient(top, #eeeeee 0%,#d5d5d5 50%,#c9c9c9 51%,#c9c9c9 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#c9c9c9',GradientType=0 ); /* IE6-9 */
    padding: 6px 12px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
    -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
    box-shadow: rgba(0,0,0,1) 0 1px 0;
    text-shadow: rgba(0,0,0,.4) 0 1px 0;
    color: #000000;
    font-size: 18px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    text-decoration: none;
    vertical-align: middle;
    text-align:center;
    width: 147px;
    cursor: pointer;
}

.tag{
    height: 424px;
    width: 291px;
    z-index: 100;
    background: url(images/ES_tag.png);
    position: absolute;
    top:-2px;
    left:750px;
}

#homepageTag{
    margin-left: 58px;
    margin-top: 358px;
    margin-bottom: 21px;
}

#saveForm{
    font-size: 13px;
    width: 100px;
}

/*
    Form
*/

#data{
    width: 500px;
    height: 600px;
    padding: 25px;
}

#data ul{
    list-style: none;
}
#data .error{
    color: red;
}

.form_input{
    width: 175px;
}

/* 
    Block-Styles 
*/
.block {
    border:1px solid #a3a09e;
    background-color:#ffffff;
    margin-bottom:20px;
    position:relative;
}

.image_block {
    height:290px;
    margin-top: 1px;

}
.image_block img {

    margin-left: auto;
    margin-right: auto;
}

#block_featured {
    height: 100px;
}

/*
    Footer-Styles
*/

#footer {
    background: #343434;
    width: 1024px;
    height: 57px;
    margin: 0 auto;
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size:10px;
}

#footer .container{
    display: inline;
}

.footer_column {
    float:left;
    width:120px;
    margin-right:30px;
}
#footer .long {
    width:610px;
}
#footer h3 {
    color:#e2dddc;
    text-transform:uppercase;
    font-size:10px;
}


.footer_column ul li, .footer_column ul {
    list-style:none;
    margin:0px;
    padding:0px;
}

.social{
    float: left;
    height: 31px;
    width: 31px;
    margin-top:14px;
    margin-right: 15px;
    background:#838383;
    border-radius: 5px;
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 0px 1px 6px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

}

#social1{
    margin-left: 25px;
}

.social_images{
    margin-left: 3px;
    margin-top: 4px;
}

#copyright{
    padding-top:20px;
    padding-left: 810px;
    font-size:13px;
}

.under_footer{
    width: 1024px;
    height: 238px;
    /*background: #656565;*/
    background: #656565; /* Old browsers */
    background: url(images/footer_gradient.png), -moz-linear-gradient(-45deg, #656565 0%, #797979 39%, #797979 54%, #656565 100%); /* FF3.6+ */
    background: url(images/footer_gradient.png), -webkit-gradient(linear, left top,   right bottom, color-stop(0%,#656565), color-stop(39%,#797979), color-stop(54%,#797979),   color-stop(100%,#656565)); /* Chrome,Safari4+ */
    background: url(images/footer_gradient.png), -webkit-linear-gradient(-45deg, #656565 0%,#797979 39%,#797979 54%,#656565 100%); /* Chrome10+,Safari5.1+ */
    background: url(images/footer_gradient.png), -o-linear-gradient(-45deg, #656565 0%,#797979 39%,#797979 54%,#656565 100%); /* Opera 11.10+ */
    background: url(images/footer_gradient.png), -ms-linear-gradient(-45deg, #656565 0%,#797979 39%,#797979 54%,#656565 100%); /* IE10+ */
    background: url(images/footer_gradient.png), linear-gradient(-45deg, #656565 0%,#797979 39%,#797979 54%,#656565 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#656565',  endColorstr='#656565',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    margin-top: 12px;
}



/*
    Clear
*/

.clear {
    clear: both;
}

Here is the HTML:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
<link href="main.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" href="js/fancybox/jquery.fancybox-1.3.4.css"    type="text/css" media="screen" />

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]-->
<!--<script type="text/javascript" src="js/additional-methods.min.js"></script>-->
<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.4.js"></script>
</head>

<body>
<div id="main">

    <div class="container">

        <div id="header">

            <ul id="menu">
                <li><a>Payroll</a></li>
                <li><a>Benefits</a></li>
                <li><a>Accounting</a></li>
                <li><a>Human Resources</a></li>
                <li><a>Risk Management</a></li>
                <li><a>Staffing</a></li>
            </ul>

            <div class="tag">
                <a id="inline" href="#data"><input id="homepageTag" class="tagButton" value="Email Us"/></a>
            </div>



        </div>

        <div class="splash"></div>
        <div class="content">
            <div class="splash_content_top">
                <div id="about">
                    About Us
                </div>
                <div class="clear"></div>
                <div id="about_content">
                    From finding you the right employees to processing paychecks, Employ Source is your<br>
                    professional employment partner.  We handle payroll, benefits, accounting, HR, risk<br>
                    management and staffing support for small to medium sized businesses.  It's our personal<br> 
                    dedication to one-on-one customer support that makes Employ Source the right choice for all<br> 
                    your employment solutions.
                </div>
            </div>
            <div class="clear"></div>
            <div class="splash_content_bottom">
                <div id="payroll">
                    <div id="payroll_top"></div>
                    <div id="payroll_name">Payroll</div>
                    <div class="div_ul">
                        <ul>
                            <li>Dedicated payroll representatives</li>
                            <li>Certified payroll processing</li>
                            <li>Detailed management reports</li>
                            <li>State and federal deposits and filings</li>
                        </ul>
                    </div>
                </div>
                <div id="hr">
                    <div id="hr_top"></div>
                    <div id="hr_name">Human Resources</div>
                    <div class="div_ul">
                        <ul>
                            <li>Customized employee handbooks</li>
                            <li>Pre-employment screenings</li>
                            <li>New hire processing</li>
                            <li>Employment law compliance and training</li>
                        </ul>
                    </div>
                </div>
                <div id="staffing">
                    <div id="staffing_top"></div>
                    <div id="staffing_name">Staffing</div>
                    <div class="div_ul" id="rightside">
                        <ul>
                            <li>Job placements for employees and employers</li>
                            <li>Temp, temp-to-hire and permanent placements</li>
                            <li>Resume assistance for employees seeking work</li>
                            <li>Joint management options for employers</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--<div class='image_block'>
            <img src="images/ES_splash2.jpg"/>
        </div>
        <div class='image_block'>
            <img src="images/ES_content.jpg"/>
        </div>-->



    </div>

</div>

<div id="footer">
    <div class="container">
        <div id="social1" class="social"><img class="social_images" src="images/linkdin.png"/></div>
        <div class="social"><img class="social_images" src="images/facebook.png"/></div>
        <div class="social"><img class="social_images" src="images/twitter.png"/></div>    
    </div>
    <div id="copyright">
    &#169; Copyright 
    </div>
    <div class="clear"></div>
    <div class="under_footer">

    </div>
</div>
<div style="display:none">
    <div id="data">

        <form id="es_contact_form" method="post" action="" onSubmit="return validateCaptcha()">
        <div class="form_description">
            <h2>Contact </h2>
            <p>Thank you for contacting Employ Source!</p>
        </div>                      
        <ul >

            <li id="li_1" >
                <label class="description" for="name">Name </label>
                <div class="form_input">
                    <input id="name" name="name" class="removeval" type="text" maxlength="255" value=""/> 
                </div> 
            </li>       
            <li id="li_2" >
                <label class="description" for="phone">Phone </label>
                    <div class="form_input">
                        <input id="phone" name="phone" class="removeval" type="text" maxlength="255" value=""/> 
                    </div> 
            </li>       
            <li id="li_3" >
                <label class="description" for="email">Email </label>
                    <div class="form_input">
                        <input id="email" name="email" class="removeval" type="text" maxlength="255" value=""/> 
                    </div> 
            </li>       
            <li id="li_4" >
                <label class="description" for="remail">Re-enter Email </label>
                    <div class="form_input">
                        <input id="remail" name="remail" class="removeval" type="text" maxlength="255" value=""/> 
                    </div> 
            </li>       
            <li id="li_5" >
                <label class="description" for="comments">Comments/Questions </label>
                    <div class="form_input">
                        <textarea id="comments" name="comments" class="removeval"></textarea> 
                    </div> 
            </li>
            <li>
                <label class="description" for="comments">&nbsp;</label>
            <script type="text/javascript"
               src="http://www.google.com/recaptcha/api/challenge?k=">
            </script>
            <noscript>
               <iframe src="http://www.google.com/recaptcha/api/noscript?k="
                   height="300" width="500" frameborder="0"></iframe><br>
               <textarea name="recaptcha_challenge_field" rows="3" cols="40">
               </textarea>
               <input type="hidden" name="recaptcha_response_field"
                   value="manual_challenge">
            </noscript>
            <p style="color: red;" id="captchaStatus">&nbsp;</p>



            </li>

            <li class="buttons">
                <input type="hidden" name="form_id" value="408860" />

                <input id="saveForm" class="tagButton" type="submit" name="submit" value="Submit" />
            </li>

        </ul>
    </form>

    </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
    jQuery.validator.addMethod("phoneUS", function(phone_number, element) {
    phone_number = phone_number.replace(/\s+/g, ""); 
    return this.optional(element) || phone_number.length > 9 &&
        phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
    }, "Please specify a valid phone number");

    var validator = $("#es_contact_form").validate({
        rules: {
            name: "required",
            phone: {required:true, phoneUS:true},
            email: {required:true, email:true},
            remail: {required: true, email: true, equalTo:'#email'},
            comments: "required"
        },
        messages: {
            name: " Required field, please enter!",
            phone: {required:' Required field, please enter!', phoneUS:' Please enter a valid phone number'},
            email:{required:' Required field, please enter!', email:' Not a valid email address, please re-enter!'},
            remail:{required:' Required field, please enter!', email:' Not a valid email address, please re-enter!', equalTo:"Please enter the same email address!"},
            comments: " Required field, please enter!"
        }
    });
    $("a#inline").fancybox({
        onClosed: function(){
            validator.resetForm();
            $("#captchaStatus").html("&nbsp;");
            $('.removeval').val('').removeClass('error');
        }
    });
});
function validateCaptcha(){
        challengeField = $("input#recaptcha_challenge_field").val();
        responseField = $("input#recaptcha_response_field").val();
        //alert(challengeField);
        //alert(responseField);
        //return false;
        var esform = $('#es_contact_form').serialize();
        var html = $.ajax({
        type: "POST",
        url: "scripts/ajax.recaptcha.php",
        data: esform,//"recaptcha_challenge_field=" + challengeField + "&recaptcha_response_field=" + responseField,
        async: false
        }).responseText;

        if(html == "success")
        {
            alert('Thank you for contacting Employ Source!');
            return true;
        }
        else
        {
            $("#captchaStatus").html("Your captcha is incorrect. Please try again");
            Recaptcha.reload();
            return false;
        }
    }
</script>

</body>
</html>

Here is the DOCTYPE I am using:

<!doctype html>

Again, this will render in FF, Chrome, and Safari with no problem. When I try and view it in IE 9 it doesn't show up, but when I view it in quirks mode, it does.

I'm sure it's something I'm overlooking, but I have been staring at this problem for the past couple of hours to no avail.

Any help would be appreciated.

2条回答
Bombasti
2楼-- · 2019-07-04 17:12

I saw a problem like this here few days ago : Banner isn't showing up in IE7 and IE8

What I suggest is to save the file in PNG instead. If it PNG already, try JPEG. Just so you see if the picture itself is the problem.

查看更多
0人赞 添加讨论(0) 举报
该账号已被封号
3楼-- · 2019-07-04 17:16

Try using svg instead of filter for IE9. I use this handy tool colorzilla.com/gradient-editor make sure to tick the box that says IE9 Support

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)