AI OnAI Off
Conflict with background images in EpiServer project
Ok, problem solved. I post the solution anyway in case somebody encounters the same issue.
The path is what is wrong in this case. Since the style is set inline, the request for the file is made to the page itself and when the URL is rewritten it tries to find it in Page/FileName which obviously doesn't exist. In the case of setting it in the CSS file it works because the request goes on the header which is set to the right location, so a relative path is enough and works.
So, in other words, the path should be absolute starting from the project root when it is set as part of the aspx itself.
Hope it helps somebody in the future!
Aug 23, 2011 13:11
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
Hello everybody!
I'm working on an EpiServer CMS 5 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 popup not displaying, and now after a while trying to figure out what was wrong, I've narrowed the issue to the background images that are set as inline styles on the border elements (TD elements) not being displayed.
I tried somethning more simple on the page like,
[CODE]<span style="background-image:url(top-left.jpg);">testing</span>[/CODE]
and voila! doesn't work, which led me to think there was a problem in the whole page. The image exists and the span is displayed but no image on the background. I tried an empty HTML file with just that little bit of code
[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>[/CODE]
and here the image is displayed perfectly. Both pages at the same level and with exactly the same code for the span element. 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.
One more thing I've noticed is that if I set the property in a CSS class then it works fine, it's just setting it through the inline styles what doesn't work.
Something else I've tried, I converted my HTML file into an .aspx without setting a master page, and it works fine, however if I set it to use the project's master page and inherit from the projects template base page, then the background image is not displayed. So it sounds like something is conflicting with this feature.
Any ideas or any light on the issue will be highly appreciated since I've been stuck on this for quite a while.
Thanks so much in advance,
/Kenia