Question

I have an oddly specific error concerning CSS, Firefox and Windows.

Let me explain: I use

vertical-align:sub;

… and it displays correctly with Firefox on Linux and IE on Windows but not with Firefox and Windows. I use the same version of Firefox on both Linux and Windows.

Some pictures of the problem (sorry for the inconvenience but, I can’t post pictures or more than 2 links yet, so I have to do it like that):

http://www.mercuryproductions.de/kram/Errors.html

link to the page: http://www.sontag-consult.com/

If I fiddle around with the vertical-align I can get it to work with FF on Win, but it messes up the other combinations.

Answer 1

This is how I would do it:

CSS

Add this to your CSS file:

ul
{
    margin:0;
    padding:0;
}
ul li
{
    margin:0 0 0 3px;
    padding:0;
    display:inline-block;
    list-style-type:none;
}
ul li:first-child
{
    margin-left:0;
}
ul li a
{
    padding:3px 8px;
    display:block;
    font-weight:bold;
    text-decoration:none;
    color:#fff;
    background-color:#000;
}
ul li a i
{
    margin:2px 5px 0 0;
    display:block;
    float:left;
    width:20px;/* width of your img */
    height:15px;/* height of your img */
    background:url(/sprites.png) no-repeat;/*your img file here*/
}​

HTML

And this is what your HTML code should look like:

<ul>
    <li>
        <a href=""><i></i>Lang 1</a>
    </li><li>
        <a href=""><i></i>Lang 1</a>
    </li><li>
        <a href=""><i></i>Lang 1</a>
    </li>
</ul>  

DEMO

BTW, it’s probably recommended that you use image sprites.

---

Updated:

Solution 1 (IMG tags):

CSS

ul li a img
{
    margin:2px 5px 0 0;
    border:0;
    display:block;
    float:left;
    width:20px;/* width of your img */
    height:15px;/* height of your img */
}​

HTML

<ul>
    <li>
        <a href=""><img src="/deutsch.png">Deutsch</a>
    </li>
</ul>

Demo

Solution 2 (w/ image sprites):

CSS

ul li a i
{
    background:url(/sprites.png) no-repeat;
    margin:2px 5px 0 0;
    display:block;
    float:left;
    width:20px;/* width of your img */
    height:15px;/* height of your img */
}

ul li a i.deutsch
{
    background-position:0 0;
}

Solution 3 (w/o image sprites):

CSS

ul li a i
{
    margin:2px 5px 0 0;
    display:block;
    float:left;
    width:20px;/* width of your img */
    height:15px;/* height of your img */
}

ul li a i.deutsch
{
    background:url(/deutsch.png) no-repeat center center;
}

HTML

<ul>
    <li>
        <a href=""><i class="deutsch"></i>Deutsch</a>
    </li>
</ul>