Grow your CSS skills. Land your dream job.

IE8 background image bug

  • # October 18, 2013 at 11:04 pm

    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.

    Ed
    # October 19, 2013 at 1:12 pm

    Does F12 developer tools have any errors in it’s console?

    # October 19, 2013 at 1:28 pm

    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.

    # October 20, 2013 at 12:25 am

    @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]-->

    # October 20, 2013 at 3:54 pm

    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="http://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.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".