http://www.warocks.com/tools-of-the-trade/

My image bullets points (ticks and crosses) positioned differently across different screen devices. In some devices like iPad, the image bullet points is positioned slightly above the text, etc. Is there a way to make sure it is positioned properly across all the browsers and all the devices?

I would deeply appreciated if you can come out with a solution as I have spent a lot of hours; trying to get the image bullet points aligned properly across all of the devices and desktop computer, etc. I have searched Google and the only solution is to use media queries. Is there other alternative way instead of media queries? Thanks!

After using media queries, I tried a lot of other devices like iPad, etc is not aligned properly… It is so frustrating… I wish to get this bullet points done please.

Here is the current code in the plugin that I have….

Removing the bullet…

Code:
ul.check, ol.check{
list-style:none;
} 
ul.stop, ol.stop{
list-style:none;
}
Changing the bullet to image….

Code:
/*.check{
list-style:inside url(../tinymce/styled-list/images/check.png)!important;
}

.stop{
list-style:inside url(../tinymce/styled-list/images/stop.png)!important;
}
But positioning wise…. I need your help please.