Sprite alignment driving me up the wall!

Hi,

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

http://www.chambresdhotes.org/cgi-bin/links/page.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-bin/links/page.cgi?t=english

The sprites are pretty simple:

.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:

<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

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:


.sprite-espanol {margin-left:0}

The reason is because of this rule:


[class*="span"] {
    float: left;
    margin-left: 20px;
    min-height: 1px;
}

The “span” matches the middle letters of eSPANol.

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? :slight_smile:

Thanks again!

Andy