IE8 background image bug

[raja67.develop]

http://recycleyourempties.com works well in all browsers when viewed in IE8 the gray background image looks short instead of filling its complete width and there is an empty space.
Do anybody know how to fix it
Feel free to let me know your ideas on this regard.

[Senff]

You’re missing a closing </div> for the blue panel. Put it right after the </article> in the blue panel and it should be fine.

[raja67.develop]

@Senff I closed the div mate but not working yet but i could fix with a conditional css for IE8 and i overriden the broken gray image with background: none property and site looks fine
<!--[if lte IE 8]>
.home #gray-panel{width: 1050px!important ; height: 375px!important;background:none; !important; } <![endif]-->

[Senff]

I’m afraid you still haven’t closed the DIV properly (see right after </article>):

    <!-- Section -->
    <section id="blue-panel">
    <!-- Wrapper -->
    <div class="wrapper container_16" id="content">
    <div class="columns col2 container">

            <div class="column first">
            <h1>Printer Cartridge Recycling for Cash, Rewards or Charity</h1>
        <p>Just in case saving the earth and non-renewable resources wasn’t enough reason to recycle we will pay you cash or give you points for rewards or the opportunity to give to charities that enrich the lives of others. You choose!</p>
<p><strong>It takes less than a minute.</strong></p>
<p><a class="started" title="Login" href="http://recycleyourempties.com/login/">Get Started ></a></p>
            </div>

            <div class="column last">
                <img src="//recycleyourempties.com/wp-content/uploads/2013/02/recycle.jpeg"/>
        </div>



        <!-- Article -->
        <article id="post-25" class="post-25 page type-page status-publish hentry">



            <br class="clear">

        </article>
        <!-- /Article -->

        <!-- ******** THIS IS WHERE YOU NEED TO ADD A CLOSING </div> !!!!!!! ******** -->

        </div>
    <!-- /Wrapper -->

    </section>
    <!-- /Section -->
    <section id="gray-panel">
    <a class="blue-link scroll" scrollTo="gray-panel" href="#"></a>
        <div class="wrapper-1000">

If you start using IE-only code you’re setting yourself up for more trouble. What you basically do then, is fix one of your coding errors by adding an (IE8-only) solution.

Fix the code properly, don’t patch it with IE8-only code just because the error is only visible in IE8.

[Author]

Posts