CSS differences in firefox and chrome

Question

I try to recreate my category widget, because I want to merge small images to CSS sprites. The code looks good in firefox, but in chrome, there are bigger spaces between the items.

I need some technique to place unique css links in the same line, and I need more lines. This works in firefox, but not in google chrome.

HTML :

<ul class="css_sprite">

    <div style="height: 55px; width: 260px; background-color: transparent;">

        <span class="upper0">
            <a href="#" class="rss_small"></a>
            <a href="#" class="follow_icon"></a>
            <a href="#" class="category">>> 1</a>
        </span>

        <span class="upper1">
            <a href="#" class="rss_small"></a>
            <a href="#" class="follow_icon"></a>
            <a href="#" class="category">>> 2</a>
        </span>

        <span class="upper2">
            <a href="#" class="rss_small"></a>
            <a href="#" class="follow_icon"></a>
            <a href="#" class="category">>> 3</a>
        </span>

    </div>
</ul>

CSS:

.css_sprite
{
    list-style:none;
    list-style-type:none;
}

.css_sprite a 
{
    display: block;
    height: 15px;
    outline: none;
}

.css_sprite a.rss_small
{
    background-image:url('http://static.tumblr.com/puafveu/Uoilxj9e9/sombined_imges_for_css_sprites.png');
    background-position:-1px 0px;
    width: 49px;
    height: 15px;
    border: 0px;
}

.css_sprite a.follow_icon
{
    background-image:url('http://static.tumblr.com/puafveu/Uoilxj9e9/sombined_imges_for_css_sprites.png');
    background-position:-32px -15px;
    width: 15px;
    height: 15px;
    position: relative;
    left: 52px;
    top: -15px;
}

.css_sprite span.upper0
{
    position: relative;
    top: -0px;
}

.css_sprite span.upper1
{
    position: relative;
    top: -27px;
}

.css_sprite span.upper2
{
    position: relative;
    top: -54px;
}

.css_sprite a.category
{
    position: relative;
    left: 73px;
    top: -33px;
}

Answer 1

First of all, your markup is not valid HTML: You cannot use a <div> directly inside a <ul> . Put the style of the <div> in the <ul> and change the <span> s to <li> s. Then it will look the same in Firefox and Chrome.

Next, you should get rid of the negative top margins and the relative positioning in general and rather do something like that:

.css_sprite a { display: inline-block; }

This should do it for a start to bring you to a point where you should be able to get on.

Answer 2

When you apply a Master Reset to your CSS (At The top of the document) you reset all BROWSER settings so you get a more consistent display of your web page across different browsers. The only downfall is you have to style everything you use. Which shouldn't be an issue.

This is the Master Reset I use on mainly everything I do.

/* - MASTER.RESET <<<--------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, hr, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, active, hover, selected {
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    text-decoration: none;
}

ol,ul {
    list-style: none;
}

Answer 3

That happens because pixels size in Chrome is bigger than in Firefox.

Maybe this it´s not the best solution but it worked for me and fixed the problem.

First, create an "special" CSS document with the same class names, changing the value of the pixels, adjusting them to Chrome (I know is boring but maybe you would save a lot of time with this).

Then, detect what browser is using the user ( I used the script you can download here, that it´s easy to add to your project and works great ).

If the browser is Chrome, use your special CSS, if it isn´t, use the CSS you are using for Firefox.