Chrome and Firefox displaying block instead of inline

I have a bunch of links with an image in front. I can't use a list because the image is different for different links. It looks like I want it to in IE, but for some reason Chrome and Firefox put a line break between the image and the link. (line breaks added for clarity)

<img src='/Images/newsicon.png'  
 style='width:12px;
        height:12px; 
        border:0px none white; 
        visibility:visible; 
        display:inline;
        padding: 0px;'
 title='Read Article' alt='Read Article' /> <a h开发者_开发技巧ref='Link'>Text</a>

When I use the inspect element in chrome I'm getting this as the list of styles for the element:

width: 12px; 
height: 12px; 
border-top-width: 0px; 
border-right-width: 0px; 
border-bottom-width: 0px; 
border-left-width: 0px; 
border-top-style: none; 
border-right-style: none; 
border-bottom-style: none; 
border-left-style: none; 
border-top-color: white; 
border-right-color: white; 
border-bottom-color: white; 
border-left-color: white; 
padding-top: 0px; 
padding-right: 0px; 
padding-bottom: 0px; 
padding-left: 0px; 
visibility: visible; 
display: block; 
opacity: 1;

I'm assuming this might be happening in FF too. No idea what I'm doing wrong.

---

Do you have separate stylesheets for IE vs other browsers? What it sounds like to me is there's a more important style overriding the display: inline.

---

img must be display: block to function correctly which is why the browser is most likely overriding it. To get the desired effect use:

display: inline-block;