CSS Styles in MasterPage

[Mirek Endys]

HEEELP!!!!
I have a big problem ))))

How to use url in CSS stylesheet file that is linked into MasterPage.

The tilda '~' (as shortcut to the root of the webserver) is not working, and
my MasterPage is used by pages not only in root but in other subfolders.

I have this in My MasterPage

<div
onmouseover="this.style.backgroundImage='url(images/design/topnav01.gif)'"
/>

if I request default.aspx that is based on MasterPage (both pages are in the
root), this <div> is working well,
But in case I request another page that is located in a subfolder of my
webserver and use MasterPage in the root too, this div is not working.

I tried use the '~' character as shortcut of the root of the webserver, but
it is not working.
<div
onmouseover="this.style.backgroundImage='url(~/images/design/topnav01.gif)'"
/> // not working.


How to solve this???

Thanks.

 

[Rob Roberts]

I tried use the '~' character as shortcut of the root of the webserver,

but it is not working.
<div
onmouseover="this.style.backgroundImage='url(~/images/design/topnav01.gif)'"
/> // not working.


How to solve this???

Try this:
onmouseover="this.style.backgroundImage='url(/images/design/topnav01.gif)'"

That's how I have things set up in my master page, and it's working fine.

--Rob Roberts

 

[Mirek Endys]

Have you tried it in the other pages that are physicaly in another subfolder
than masterpage?

I solved that by this.

onmouseover="this.className='divTopMenuButtonHover01'"

and in CSS Stylesheet file I have referenced images by this way:

background-image: url(../images/design/topnav05.gif);

Because!!!: Partial URLs are interpreted relative to the source of the style
sheet, not relative to the document.

 

[Rob Roberts]

Have you tried it in the other pages that are physicaly in another
subfolder than masterpage?

Yes. My master page is located in a subfolder. None of the content pages
are located in that subfolder. I have content pages in the root folder of
the site and in various other subfolders, and they all find the paths
referred to in the master page just fine. A path like
/images/design/topnav01.gif should mean that the images folder is a
subfolder directly under the root folder of the site.

--Rob Roberts

 

[Steven Cheng[MSFT]]

Hi Mirek,

As for the image (or other resource) path in CSS style sheet, it can not
utilize "~" mark since it is an ASP.NET specific mark while css style is
static resource which is not parsed by ASP.NET runtime. Also, if we use
relative path in css style, the actual full-path it associate does vary
when the sheet is linked by pages in different folder hierarchy in the web
application(in application root or in sub dir...). And for such scenario,
I think we can consider the following approach:

1. Use the absolute path start from the IIS site root as Rob has mentioned.
The path starting from "/" means it start from the IIS site root(or
application root). So if you can ensure that the web application's
application root dir's name, you can make use of such style path in the css
style

2. Use separate css style for pages in different folder hierarchy in the
web application. Thus, we can put specific relative path in the specific
style sheet for a certain folder hierarchy in the application.

In addition, there exists an html <base> tag setting which can define the
url base for a certain page so that other relative path will be based on
this base path. You can have a look at the following reference for detail
description:

http://www.w3.org/TR/REC-html40/struct/links.html#h-12.4.1

Hope this helps some.

Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)

 

[Joey]

I use the absolute path "/" when I can't use a server control (then I
would use "~") for something in my apps. Trouble is, it still doesn't
work properly when you run the site in file system mode. This is
because the site gets loaded like a subfolder (e.g.
"http://localhost:4582/mysite.com"). This causes the "/" to map
improperly. However, when you deploy the same site everything
maps/works fine ("http://localhost"). I really wish there was a
solution to fix this. It is reasonable that one might not be able to
use server controls for everything, and that one might want to run the
site in file system mode during development.

JP

 

[Steven Cheng[MSFT]]

Hi Joey,

Thanks for your inputs and kind feedback.

I've also seen some other community guys talking about the web
application's virutal path when hosting in VS 2005/.NET 2.0's test
server(file system based). Actually currently we have a workaround which is
to explicitly launch a test server instance externally , then we can set
its virtual path to the site root. Here is a good blog article discussing
on this:

#How to Run a Root ¡°/¡± Site with the VS/VWD 2005 Local Web Server
http://weblogs.asp.net/scottgu/archive/2005/11/21/431138.aspx

regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)