html - css check for chrome, ie & firefox

Question

css works for firefox but not ie or chrome. How to fix the css so that at least IE works like firefox.

Firefox:

IE:

The image is in the background as well but should be transparent.

Chrome:

The HTML :

<center><div id="slideshowContentArea" style="display:none; width:500px; height:300px">
    <div class='nav'><a id='prev' href='#'>Prev</a>&nbsp&nbsp<a id='next' href='#'>Next</a></div> 
    <div id="slideshow" class="pics" style="position: relative; overflow-x: hidden; overflow-y: hidden; height:250px; width:395px">&nbsp;</div>
</div></center>

        $('#slideshow').cycle(
            { fx: 'fade', timeout: 3000, speed: 500, 
              pager: '#slideshow', before: setBGBefore, prev:'#prev',next:'#next',after:onAfter
            }
            );
        function setBGBefore() {
        $(this).css({ 'background-image': 'url(' + $(this).find('img').attr('src') + ')', 
        'background-position': 'center top', 'background-color': 'transparent' });
        $(".welcomeBox div").html($(this).find('span').html());
        }

Answer 1

jQuery can tell you the browser in use:

http://api.jquery.com/jQuery.browser/

Update. The question title was " check for chrome, ie & firefox " that's what I've answered. It's up to the OP if he wishes to implement a more elegant solution.