different positioning chrome and firefox

Question

I have something like this:

html:

<span class="st">sometext >
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

</span>

css:

.st{
    position:relative;
}


.st:hover ul{
    transition: opacity 1s;
    opacity:1;  
}

.st ul{
    margin:0;
    padding-left:5%;
    opacity:0;
    position:absolute;
    width:8em;
    top:0;
    left:100%;
    list-style: none outside none;
}

.st ul li{
    display:inline-block;
    margin:0;
    padding:0;

}

fiddle

--> the list (some images with links, but simplified to letters here) shows up when hovering over someText. In firefox it shows up right next to someText > (which is the desired outcome), in Chrome however it appears much further right.

My initial guess was that (since the ul is nested in the span) the width of the span is calculated differently, that firefox ignores the opacity 0 list for calculating the width of the span and chrome uses it. But I have the same issue when removing the opacity rules and using display: none/block for hiding and showing of the ul.
(note: I say chrome, but I'm actually using Chromium 31.0.1650.63 on Ubuntu in case that makes a difference) --> Any idea what causes this? And how can I solve this?

Answer 1

Hm, I think you have to reset browsers defaults.
Try to use normalize.css or an simple css reset

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, 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 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Answer 2

So.. why does the .st ul have padding-left:5%; ? Because it seems that's what's causing it.

Plus you're placing block stuff ( ul ) inside inline element ( span ), so another reason not to be surprised with different (that is, undefined ) behaviour.

Answer 3

I never was a big fan of the list elements. They seem to act slightly differently in all browsers, including their default margins and paddings.

Why not use a simple div element instead? You can do whatever you want with it.

Also you might want to use & gt; instead of > because it is a special html tag and might ruin the code (though browsers are smart enough these days).

http://jsfiddle.net/qLuw2/9/

<span class="st">sometext &gt;
<div class="hoverable">
    a <br />
    b <br />
    c
</div>

</span>