Grow your CSS skills. Land your dream job.

image shifts left with sprite rollovers

  • # September 17, 2008 at 12:48 pm

    I am having the abolsutely craziest thing happen. When you hover over one of my sprite rollovers, it shift an image to the left over several pixels. The shift only occurs once on the first rollover. If anyone has any idea as to what is going on, please let me know. I have been pounding my head against the desk for hours now. It is only doing it in IE 7 too.

    The link to the site is:

    http://www.plugg-media.com/stephsons/st … index2.php

    If anyone can assist me on this, you will save my forehead much bruising.

    Here is a copy of my code:

    css file:

    @charset "utf-8";
    /* CSS Document */

    html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}

    body {
    background: #266635 url("../images/bg.jpg") top center repeat-y;
    margin:0;}

    ul{ list-style: none inside; }
    p{ font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; }

    #contact{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    line-height: 24px;

    }

    /*
    a{ outline: none;}
    a img{ border: none; }*/

    .floatleft{ float: left;}
    .floatright{ float: right;}
    .clear{ clear: both;}

    #coupon{
    width:340px;
    height:98px;
    background-image: url(../images/carpetcoupon-outline.gif);
    background-repeat:no-repeat;
    padding:32px 29px 32px 29px;
    /*padding:32px 38px 32px 38px;*/
    float:top;
    text-align:center;
    vertical-align:middle;
    font-family:Arial, Helvetica, sans-serif;
    font-size:42px;
    position:relative;
    }

    #page-wrap{
    width:950px;
    margin:0 auto;
    /*border: 1px black solid;*/
    }

    #navigation{
    float: left;
    margin: 0px 0px 0px 0px;
    display: block;
    }
    #yellow-round{

    }

    #top{
    width:100%;
    margin:0 auto;
    position:relative;
    top:20px;

    }
    #logo{
    float:left;
    padding: 0px 0px 0px 105px;
    }
    #top-right-image{
    float:right;
    padding: 0px 93px 0px 0px;

    }
    #middle{
    position:relative;
    top:70px;
    }
    #yellow-round{
    background: url("../images/yellow-right.jpg");
    width: 184px;
    height: 248px;
    float:left;
    margin: 0px 0px 0px 17px;
    border:1px solid black;

    }
    #yellow-round h2{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#1D672E;
    font-size:18px;
    text-align:right;
    margin: 30px 15px 20px 20px;

    }
    #yellow-round h3{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#1D672E;
    font-size:14px;
    text-align:right;

    margin: 20px 15px 20px 20px;

    }

    #yellow-round h4{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:black;
    font-size:16px;
    text-align:right;
    margin: 20px 15px 20px 20px;

    }
    #middle-text{
    padding: 0px 30px 0px 30px;
    width:360px;
    float: left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    line-height: 20px;
    }
    #middle-text h2{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#1D672E;
    font-size:18px;
    line-height: 25px;

    }

    #top-footer{
    position:relative;
    top:100px;
    margin: 0px 0px 0px 329px;

    }
    #online-specials{
    background: url("../images/online-specials.jpg");

    }

    #nav{

    width:192px;
    }
    #nav ul {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    }
    #nav li {
    list-style-type:none;
    font-size:2em;
    }
    ul#nav li{
    display:inline;
    }
    ul#nav li a{
    display:block;
    width:192px;
    text-indent: -9999px;
    float: top;

    border:1px solid black;
    }

    ul#nav li.home a{
    height:50px;
    background: url("../images/home.jpg") center center no-repeat;
    }
    ul#nav li.services a{
    height:53px;
    background: url("../images/services.jpg") center center no-repeat;
    }
    ul#nav li.testimonials a{
    height:54px;
    background: url("../images/testimonials.jpg") center center no-repeat;
    }
    ul#nav li.specials a{
    height:53px;
    background: url("../images/specials.jpg") center center no-repeat;
    }
    ul#nav li.contactus a{
    height:53px;
    background: url("../images/contactus.jpg") center center no-repeat;

    }

    ul#nav li a:hover{
    background-position: top center;
    border:1px solid black;
    display: block;
    }

    code on website:

    <?
    include(‘config.php’);

    $query="Select * from `stephson_content` where `page`=’home’";
    $result=ftb_query($query);
    $results=mysql_fetch_assoc($result);

    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Stepsons Carpet Cleaning</title>
    <?
    if(browser_detection(‘browser’)=="mozilla")
    echo(‘<link rel="stylesheet" href="css/style.css" type="text/css">’);
    else if(browser_detection(‘browser’)=="msie")
    echo(‘<link rel="stylesheet" href="css/iestyle.css" type="text/css">’);

    ?>
    </head>

    <body>
    <div id=header>

    </div>

    <div id="page-wrap">
    <div id="top">
    <div id="logo">
    <img src="images/logo.png" />
    </div>
    <div id="top-right-image">
    <img src="images/van4.jpg" />
    </div>
    <div class="clear"></div>
    </div>
    <div id="middle">
    <div id="navigation">
    <ul id="nav">
    <li class="home"><a href="index.htm">Home</a></li>
    <li class="services"><a href="services.php">Services</a></li>
    <li class="testimonials"><a href="testimonials.php">Testimonials</a></li>
    <li class="specials"><a href="specials.php">Specials</a></li>
    <li class="contactus"><a href="contact.php">Contact Us</a></li>
    </ul>
    </div>
    <div id="middle-text">
    <h2>Welcome</h2>
    <img src="images/greybar.gif" />
    <br />
    <br />
    <?
    echo($results);

    ?>

    </div>
    <div id="yellow-round">
    <br />
    <br />
    <h2>Call Us Today!</h2>
    <h4><b>614-759-1539</b></h4>
    <h3>Serving the Central Ohio Area</h3>
    </div>

    </div>

    </div>
    <div id="footer">
    <div id="top-footer">
    <img src="images/greybar-bottom.gif" />
    <br />
    <img src="images/bottom.jpg" />

    </div>
    </div>

    </body>
    </html>

    # September 17, 2008 at 2:16 pm

    well i didn’t see any image shift in my browsers. I checked in I.E 7 and google chrome and opera. But what I did notice is that your code is messed up somewhere. The pages look completly different in google chrome, opera. there is no background color and the links don’t have images. check these browsers against Internet Explorer

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

You must be logged in to reply to this topic.

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