What is the best way to ensure that CSS links resolve properly when incorporating a PathInfo value?

Having an issue with my asp.net 3.5 app. Whenever I try to add a value to the URL for Request.PathInfo, it seems like I lose all connections in the head section because the paths are resolved as relative.

This is how the master page appears:

<head id="Head1" runat="server">
    <link rel="stylesheet" href='~/App_Themes/main/style.css' type="text/css"  />
</head>

After rendering, it looks like this:

<head id="ctl00_ctl00_Head1">
    <link rel="stylesheet" href="../App_Themes/main/style.css" type="text/css" />
</head>

When I visit

http://localhost:5000/project/folder/edit.aspx/555

The browser searches for the stylesheet at

http://localhost:5000/project/folder/App_Themes/main/style.css

Instead of

http://localhost:5000/project/App_Themes/main/style.css

Is this automatic behavior to resolve with a relative path? Can I modify it? Could this be something that the previous developer implemented and I haven't discovered yet?

--- edit ---

I followed the suggestion below and included a base element like this

<base id="ctl00_ctl00_baseElement" href="http://localhost:5000/project/"></base>

However, my links still aren't functioning properly because asp.net always renders the URLs as relative paths unless the href starts with /. In both cases, I end up one level too high now.

http://localhost:5000/App_Themes/main/style.css

Answer №1

Here is the recommended usage:

<base href="http://yourwebsite.com">
<link rel="stylesheet" href="/App_Themes/main/style.css" type="text/css" />

Answer №2

It seems that when the head element is declared as a server control, any link elements inside it are automatically processed and resolved by the server. To resolve this issue, consider defining the head element as a standard HTML control only or manually including your link elements. I abandoned my pursuit of the PathInfo concept before reaching a resolution.

Answer №3

To address this problem, I implemented a solution by including an HTML 'base' tag. I utilized the method: Page.ResolveUrl("~") to accurately resolve the base URL of the website. This approach functions effectively on both local and server environments:

<base href="<%=ResolveUrl("~")%>" />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unforeseen rotation happening in CSS animation

I find myself struggling with my math skills from junior high. My goal is to rotate two divs around the Y axis in opposite directions. I have set up two animations for this purpose: @-webkit-keyframes first{ 0% { -webkit-transform: rotateY(0); } ...

What is the best way to format a `<ul>` element that does not contain any `<li>` elements?

A new feature on my website allows users to dynamically add list items (<li>) to a list container (<ul>). I want the list container style to change when there are no list items present. <ul class="con"> </ul> ul.con:not(: ...

Setting Aggrid style height to 100% in JustPy made easy

I am attempting to adjust the Aggrid height style to 100%, but unfortunately, the table is not displaying as expected. I have tried using viewport and pixel measurements, which worked fine. Interestingly, percentage width is working perfectly well. My goa ...

How null data is transferred between views and controllers in ASP.NET Core

Is there a function in my controller to check if the user email is active or not? public async Task<IActionResult>ActiveEmailAccount(EmailActiveAccountViewModel active) { if (ModelState.IsValid) { ...

When data is inserted into the SQL Server database in ASP.NET, the leading zeros fail to appear

I encountered a peculiar issue while working on a project, where the productid being inserted into a table was losing its leading zeros. For example, if the productid is like (002374), it gets saved in the table as (2374). Upon checking, I verified that t ...

Difficulty in displaying Font Awesome Unicode on website

I am struggling to populate a list with Font Awesome icons 4.7.0 in my HTML code using Bootstrap. Strangely, only the first icon is displayed while the rest remain invisible. <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font- ...

The JavaScript-rendered HTML button is unresponsive

I have a JavaScript function that controls the display of a popup window based on its visibility. The function used to work perfectly, with the close button effectively hiding the window when clicked. However, after making some changes to the code, the clo ...

CSS - Guidelines for Targeting Multiple Elements

My CSS code includes several commands that target similar elements, but the resulting design appears messy. I am seeking advice on a more effective way to select these elements in a conventional manner. Despite consulting documentation, I have resorted to ...

A tutorial on how to switch out a font-awesome icon simply by clicking on it - collapsible content

I have some HTML code with a script for my website that allows text to be collapsed or expanded by clicking on a font awesome arrow. I am looking to have an arrow that points up when clicked to collapse the text and points down when clicked to expand the t ...

The application of CSS transition fails in the context where top property is set as auto

I have been exploring an online tutorial that almost met my requirements. However, I encountered a challenge with the CSS 'transitions' effects. Basically, I need the text to be positioned at a specific distance from the top because the title wi ...

Retrieve the position with respect to the browser viewport

My current scenario involves two divs, with one nested within the other. The task at hand is to determine the position of the child div in relation to the browser window. Specifically, I aim to detect when the user scrolls down and have the child div fade ...

The functionality of Bootstrap icons is not functioning properly

After downloading a customized version of Bootstrap with only the icons, I encountered issues trying to incorporate them into my site. Despite copying and pasting the icon styling into my existing bootstrap.css file, the icons were still not displaying pro ...

How to Override Global CSS in a Freshly Created Angular Component

My CSS skills are a bit rusty and I need some assistance with a project I'm working on. The project includes multiple global CSS files that have properties defined for different tags, such as .btn. However, these global CSS files are causing conflicts ...

The problem with -webkit-center in HTML

I have encountered an issue with some code that I wrote. When utilizing -webkit-center and entering text into a textbox, all the items shift to the right. I have attempted other -webkit alignment settings without any problems, only -webkit-center seems to ...

Is the LOGON USER's response already verified?

Within my coding structure, I currently have the following: <h2> Address Book</h2> <br /> <table> <tr><td><b>User:</b></td><td><asp:Label ID="useren" runat="server"></asp:Label&g ...

Getting the value of a custom header extracted

I currently have this specific code from the approved answer saved in my project, but now I need to transfer it into ASP.NET Core MVP. How can I extract a custom header value in a Web API message handler? var env = Request.Headers.GetValues("environment" ...

Limits in exporting data from an html table to a pdf document

The output on the page only displays 17 out of 60+ rows of data. I've searched online for a javascript function to help with this, but unfortunately, I couldn't find one. Here is a sample code snippet: <script type="text/javascript"> ...

Updating CSS using jQuery

Before I continue: While I am familiar with the jQuery.css() function, it unfortunately does not work in my particular case. Allow me to elaborate. Currently, I have a jQuery color picker set up to change the highlighting on a website. My goal is to utili ...

Can this functionality be accomplished using only HTML and CSS, without relying on JavaScript?

Image for the Question Is it possible to create a zoom functionality using only HTML and CSS, without relying on JavaScript? I need this feature for a specific project that doesn't support JavaScript. ...

The alignment of an image within a bootstrap table cell may not appear centered

I am struggling to center an image in a table cell that is wider than the image itself. I have tried using the text-center and align-middle classes in Bootstrap, but the image remains on the left side of the cell. Since I am new to Bootstrap, I am not fa ...