#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2010
    Location
    Northern Michigan
    Posts
    3
    Rep Power
    0

    Firefox error rendering background positioning of image


    Hey folks, here's an odd problem that's got me totally stumped.

    I've got a nine item unordered list, each of which is a link that contains both text and a background image. The background image is a large spritebox. I'm using background-position to shift the spritebox to display the sprite specific to the a:link and also to display a separate a:hover version.

    Looks great in Safari and CSSEdit, but in Firefox four of the links are misplaced and the sprite is incorrect. The hover state is correct, however.

    This is hard to explain, but the example should help illustrate the problem. My thought was that it was related the psuedo class of a:link, but nothing I've tried seems to help. Any thoughts?

    The example file contains both the HTML and the CSS (just to simplify this problem for this forum). The full background image and the file containing the sprites is at my website, artmeetsearth dot org slash 2011 slash codetest dot html. To get the image type socialmediaicons.jpg instead of codetest.

    Thanks for any help you can offer!
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2010
    Location
    Northern Michigan
    Posts
    3
    Rep Power
    0

    HTML for problem


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "">

    <html xmlns="">
    <head>
    <!--Don't add anything above this line, you may change the DTD to match your page-->
    <title>Test Page</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    </head>
    <body>

    <div id="contentmain">

    <div id="nav_social">
    <ul><li class="email"><a href="email.html">Get email updates</a></li>
    <li class="news"><a href="newsletter.html">Get our newsletter</a></li>
    <li class="twit"><a href="twit.html">Follow us on twitter</a></li>
    <li class="face"><a href="face.html">Like us on facebook</a></li>
    <li class="survey"><a href="survey.html">Take our survey</a></li>
    <li class="flick"><a href="flick.html">Find ISLAND photos on flickr</a></li>
    <li class="tube"><a href="tube.html">Watch ISLAND videos on youtube</a></li>
    <li class="blogs"><a href="blogs.html">View and subscribe to our blog feeds</a></li>
    <li class="share"><a href="share.html">Share this page</a></li></ul>
    </div><!--nav_social-->

    <div id="nav_events"></div>

    <div id="mission"><h1>Our Mission</h1><p>ISLAND is a non-profit arts and ecology center dedicated to connecting people with nature, art and community. ISLAND helps people become <em>native to place</em> by:</p><ul><li>supporting artists&mdash;visionaries, conceptual explorers and compelling communicators&mdash;with dedicated time, space and resources to create new work;</li><li>restoring the old and developing the new skills and traditions of community self-reliance;</li><li>creating and sharing a broad collection of tools for ecological living.</li></ul><a href="about.html" class="continue">Learn More >></a></div>
    </div><!--contentmain-->

    </body>
    </html>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2010
    Location
    Northern Michigan
    Posts
    3
    Rep Power
    0

    CSS for problem


    <style type="text/css">

    html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset ,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}legend{color:#000;}

    a:link {
    color: #6d7661;
    }

    a:visited {
    color: #9ba88a;
    }

    a:hover {
    color: #3d4236;
    }

    a:active {
    color: #cadbb4;
    }

    p, li {
    font:15px arial,sans-serif;
    }

    h1 {
    color: #941E0C;
    font-size: 14pt;
    margin-bottom: 10px;
    }

    h2 {}
    h3 {}
    h4 {}
    h5 {}
    h6 {}

    em {
    font-style: italic;
    }


    #contentmain{
    width: 960px;
    height: 350px;
    background-color: white;
    }

    #nav_social{
    width: 170px;
    height: 319px;
    margin-right: 10px;
    margin-left: 10px;
    background-color: white;
    float: left;
    overflow: hidden;
    padding-top: 10px;
    }

    #nav_social li a {
    height: 35px;
    width: 130px;
    font-size: 9pt;
    text-decoration: none;
    line-height: 12px;
    background-image: url('socialmediaicons.jpg');
    background-repeat: no-repeat;
    display: block;
    padding-left: 40px;
    color: #383838;
    padding-right: 20px;
    position: relative;
    }



    #nav_social .email a:link {
    padding-top: 8px;
    margin-bottom: -7px;
    }

    #nav_social .email a:hover {
    background-position: 0 -36px;
    color: #00508E;

    }

    #nav_social .news a:link {
    padding-top: 9px;
    margin-bottom: -8px;
    background-position: 0 -72px;
    position: relative;
    }

    #nav_social .news a:hover {
    background-position: 0 -108px;
    color: #00508E;
    }

    #nav_social .twit a:link {
    padding-top: 9px;
    margin-bottom: -8px;
    background-position: 0 -144px;
    }

    #nav_social .twit a:hover {
    background-position: 0 -180px;
    color: #00508E;
    }

    #nav_social .face a:link {
    padding-top: 8px;
    margin-bottom: -7px;
    background-position: 0 -216px;
    }

    #nav_social .face a:hover {
    background-position: 0 -252px;
    color: #00508E;
    }

    #nav_social .survey a:link {
    padding-top: 7px;
    margin-bottom: -6px;
    background-position: 0 -288px;
    }

    #nav_social .survey a:hover {
    background-position: 0 -324px;
    color: #00508E;
    }

    #nav_social .flick a:link {
    padding-top: 2px;
    margin-bottom: -1px;
    background-position: 0 -360px;
    }

    #nav_social .flick a:hover {
    background-position: 0 -396px;
    color: #00508E;
    }

    #nav_social .tube a:link {
    padding-top: 3px;
    margin-bottom: -2px;
    background-position: 0 -432px;
    }

    #nav_social .tube a:hover {
    background-position: 0 -468px;
    color: #00508E;
    }

    #nav_social .blogs a:link {
    padding-top: 3px;
    margin-bottom: -2px;
    background-position: 0 -504px;
    }

    #nav_social .blogs a:hover {
    background-position: 0 -540px;
    color: #00508E;
    }

    #nav_social .share a:link {
    padding-top: 7px;
    background-position: 0 -576px;
    }

    #nav_social .share a:hover {
    background-position: 0 -612px;
    color: #00508E;
    }

    #nav_events{
    width: 510px;
    height: 350px;
    background-color: white;
    float: left;
    margin-right: 10px;
    margin-left: 10px;
    }

    #mission {
    background-color: white;
    padding: 10px 0;
    height: 330px;
    overflow: hidden;
    float: left;
    margin-left: 10px;
    width: 220px;
    }


    #mission p, #mission li{
    color: #383838;
    font-size: 9pt;
    line-height: 11pt;
    margin-bottom: 10px;
    }

    #mission li{
    margin-right: 15px;
    padding-left: 0px;
    list-style-type: disc;
    list-style-position: inside;
    }

    a.continue {
    color: #00508E;
    text-decoration: underline;
    text-align: right;
    display: inherit;
    font-size: 9pt;
    margin-right: 5px;
    }


    </style>
  6. #4
  7. Autodidact
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Location
    Canada
    Posts
    741
    Rep Power
    837
    Hi, artmeetsearth, and welcome!

    The next time you make a thread, please just post all of the code snippets into the original post and wrap the correct code tags around them; read this to learn how to display pretty code.

    On to better things: it seems the positioned sprites are behaving as you wanted. I suspect you solved the problem. If not, what version of Firefox are you seeing the problem?
    Soldiers, from the height of these pyramids forty centuries look down upon you.
    ▪ Napoleon, on the eve of the Battle of the Pyramids

IMN logo majestic logo threadwatch logo seochat tools logo