I'm working on an asp.net 4 project in which I'm using a jquery plugin for displayig bubble popups on mouse over on certain elements. I started facing a problem with the borders of the plugin not displaying, and now after a while trying to figure what was wrong, I've narrowed the issue to the background images that are set as inline styles on the border elements not being displayed.
I tried somethning more simple like,
and voila! doesn't work. It's easier to solve it now i think but it's freaking weird.
The image exists and the span is displayed but no image on the background. I tried an empty HTML file with just that same code
<html> <head> <title>jQuery Bubble Popup - How to make a selectable Bubble Popup when mouse is overy</title> </head> <body> <span style="background-image:url(top-left.jpg);">testing</span> </body> </html>
and here the image is displayed! Both pages at the same level and with exactly the same code for the span element.
Also when i look in Firebug and roll the mouse over the image on the styles panel to the right, the preview of the image is shown for the test file, but when i do it on real page, then it says that it can't find the image.
Of course the real page is more complex, with other CSS to format it etc etc, so I wonder if there might any conflict with the previews CSS rules that have been declared... but that doesn't make sense to me.
Any ideas? Any help will be highly appreciated since I've been stuck on this for quite a while.
Thanks so much in advance,
Hi keniagm84, spans are
spans are inline elements, so only take the space of their contents and are usually not the best elements to work with backgrounds. Try giving the span some dimensions and floating or display block to see if the span was too small to show the background.
Hello and thanks for your
Hello and thanks for your reply!
Now the issue is solved, it was a problem with the path. Strange since the relative path should work just fine one could think, right?.
Well thing is this project I'm working on is actually an EpiServer project (www.episerver.com) and thus the requests are handled in a different way and the URL rewritting messed up the path for the image. So the solution was to set an absolut path starting from the project folder.