SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sprite alignment driving me up the wall!

    Hi,

    This has been driving me up the wall for most of the afternoon

    http://www.chambresdhotes.org/cgi-bi....cgi?t=espanol

    At the top right, you have a dropdown for a language changer. This works fine in our english version (which uses static images - not a sprite);

    http://www.chambresdhotes.org/cgi-bi....cgi?t=english

    The sprites are pretty simple:

    Code:
    .sprite-english { background: url(/new_design/header-sprite.png); background-position: 0px 0px; width: 32px; height: 32px;  } 
    .sprite-espanol { background: url(/new_design/header-sprite.png); background-position: -0 -42px; width: 32px; height: 32px; } 
    .sprite-logo {  background: url(/new_design/header-sprite.png); background-position: -0px -84px; width: 251px; height: 40px;  } 
    .sprite-luna { background: url(/new_design/header-sprite.png); background-position: -0px -134px; width: 32px; height: 32px; } 
    .sprite-mobile { background: url(/new_design/header-sprite.png);background-position: -0px -176px; width: 32px; height: 32px; }
    ...and called with:

    Code:
    <ul class="dropdown-menu">
    <li><a class="smaller" href="#"><img src="/new_design/blank.gif" class="sprite-english"> &nbsp;B&B &amp; Holiday Rentals</a></li>
    <li><a class="smaller" href="#"><img src="/new_design/blank.gif" class="sprite-luna"> &nbsp;Chambres d'hôtes &amp; Gîtes</a></li>
    <li><a class="smaller" href="#"><img src="/new_design/blank.gif" class="sprite-espanol"> &nbsp;Cases rurals</a></li>
    <li><a class="smaller" href="#"><img src="/new_design/blank.gif" class="sprite-mobile"> &nbsp;Mobile</a></li>
    </ul>
    As you can see, they are almost all the same (apart from the reference to the different sprite).

    If I replace class="sprite-espanol" with say class="sprite-luna"... then that 3rd item lines up perfectly.... so its got to be something to do with just that item... but I can't for the life of me work it out!

    Any suggestions? Its driving me up the wall :S

    TIA!

    Andy

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    I'm not sure if this is what you mean but you have a 20px left margin cascading into your sprite-espanol.

    Try this:
    Code:
    .sprite-espanol {margin-left:0}

    The reason is because of this rule:
    Code:
    [class*="span"] {
        float: left;
        margin-left: 20px;
        min-height: 1px;
    }
    The "span" matches the middle letters of eSPANol.

  3. #3
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    OMG - you legend!!!! I've been going round and round in circles, validating the page, and all sorts... and thats all it was! Always so simple when you know the answer, huh?

    Thanks again!

    Andy


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •