Difficulty with displaying Background and Fontface on aspx webpage

My issue lies with a master template in aspx, from which I generate other aspx pages. In this master template, I have referenced a CSS style sheet. Strangely, the background image and font face that I had set up are no longer displaying on any of the aspx pages created from the master template.

I am struggling to understand why they are not showing. Interestingly, in Visual Studio, the background displays just fine.

Take a look at my project directory layout here:

https://i.sstatic.net/bp2uw.png

The stylesheet is referenced for all the aspx pages within the base Cafe directory AND the Aspx files in the Secure folder like this:

 <link href="Styles/Coffee.css" rel="stylesheet" media="screen" />
<link href="../Styles/Coffee.css" rel="stylesheet" media="screen" />

So, some elements do change based on the style sheet, indicating that it has been properly referenced.

You can find the code in the CSS file here:

Here is the comparison between the page's output in both Visual Studio and the browser:

https://i.sstatic.net/GdyIH.jpg

Previously, everything was working perfectly fine - the labels and text on my aspx page displayed with the correct font face, and the background appeared without issues in both IE and FF. Now, I'm unsure what has caused this sudden change.

asp.netcsshtml

Answer №1

Lesson learned, folks! My mistake was not referencing the fontface files and images correctly. Instead of pointing to the /Fontface and /Images folders directly, I was inadvertently directing it to a CSS STYLES FOLDER/Images path within those directories. Turns out, the files were actually located in the Images folder one directory above.

Here's the corrected code:

@font-face {
font-family: 'MolotRegular';
src: url('../Fontface/Molot-webfont.eot');
src: url('../Fontface/Molot-webfont.eot?#iefix') format('embedded-opentype'),
     url('../Fontface/Molot-webfont.woff') format('woff'),
     url('../Fontface/Molot-webfont.ttf') format('truetype'),
     url('../Fontface/Molot-webfont.svg#MolotRegular') format('svg');
font-weight: normal;
font-style: normal;

}

body
{
font-family: 'MolotRegular', Arial, Helvettica;
background-image: url("../Images/background.jpg");
margin-top: 0px;

}

TL:DR : Visual Studio output can't always be trusted. It's deceiving!

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

What exactly does response.write signify within the realm of ASP.NET MVC?

I have a straightforward question: What is the ideal approach for utilizing traditional webforms "response.write" in ASP.NET MVC, specifically in MVC5? For instance, how can I write a basic string to the screen from a controller? Is response.write suppo ...

asp.netasp.net-mvcwebformsresponse.write

Conflicting behavior between jQuery focus and blur functions and retrieving the 'variable' parameter via the $_GET method

There is a simple focus/blur functionality here. The default value shown in the 'Name of Venue' input field changes when the user clicks on it (focus) and then clicks away(blur). If there is no text entered, the default value reappears. Input fi ...

phpjavascriptjqueryhtml

Iterating through an array with ngFor to display each item based on its index

I'm working with an ngFor loop that iterates through a list of objects known as configs and displays data for each object. In addition to the configs list, I have an array in my TypeScript file that I want to include in the display. This array always ...

htmlarraysangularjstypescriptangular

Text material is visible beyond the boundaries of the div

Recently, I experimented with creating div elements in different shapes such as triangles and trapezoids. HTML: <div class="triangle">Hello! Nice to meet you all.</div> CSS .triangle { width: 0; height: 0; border-left: 50px soli ...

javascriptjqueryhtmlcss

Tips for modifying the "width" of a style within an HTML template implemented in a NodeJs express application

Currently, I am facing a challenge in dynamically adjusting the width value for a <div> element serving as a coloured bar within an HTML template used for PDF generation. While I can successfully set other values using something like {{my_value}}, ap ...

htmlcssnode.jsexpress

Using the PrimeNG checkbox alongside a reactive form with an array

I am attempting to populate my array of objects in order to map the Primeng checkbox and retrieve the values for selected check boxes. I have experimented with FormControlName, but it is returning undefined after submission. Below is a basic code snippet ...

javascripthtmlangularradio-buttonprimeng

Trouble verifying XPATH with IF statement in Python using Selenium

Currently, I am facing challenges while attempting to scrape an ASPX form and implementing an IF condition to handle different types of results. Initially, the results are blank and later they contain data. How can I create an IF statement to validate an ...

pythonasp.netseleniumxpath

CSS declarations that have not been acknowledged or acknowledged

While working on a client's stylesheet today, I came across the following code: p { -webkit-hyphens: auto; -webkit-hyphenate-character: "\2010"; -webkit-hyphenate-limit-after: 1; -webkit-hyphenate-limit-before: 3; -moz-hyphens: manual; orphans: ...

htmlcss

Tips for displaying play and pause text when hovering

In my demo application, I have successfully created a Play and Pause icon. However, there is an additional requirement - I need to display the text PLAY and PAUSE when hovering. Currently, I am encountering two issues: The icon jumps when hovering over t ...

javascripthtmlcss

What is the best way to eliminate the underline in a text hyperlink?

I've encountered an issue with my CSS file. I tried using the code below: text-decoration: none; However, the text is not displaying as expected. I had to resort to using JavaScript for adding a hyperlink behind the text, which I believe is causing ...

jqueryhtmlcssmouseoverunderline

Having trouble bringing in icons from the @mui/icons-material library

An error occurs when attempting to run the code. wait - compiling... error - ../../../../../node_modules/@mui/icons-material/esm/utils/createSvgIcon.js:1:0 Module not found: Can't resolve '@mui/material/utils' null Note: @mui/material pack ...

javascriptcssreactjsmaterial-uinext.js

Manipulate elements by adding and removing classes sequentially based on an array

Previously, some had difficulty understanding my question. I have an array of variables representing the ids of 5 divs. My goal is to change the color of each div sequentially for a brief moment before reverting back, mimicking the behavior of traffic ligh ...

javascriptjquerycss

What steps should I take to address these styling challenges?

Recently, I came across some code that uses the hspace attribute which is now considered outdated. In order to create space between elements in a widget, I am looking for a solution that involves adding 10px of space above and between the items using CSS. ...

csshtmlinline

Scaling SVG Graphics in Real-Time

I am currently developing a website where users can interact with an SVG image using textboxes. One of my goals is to make sure the SVG image scales to fit the container div. For example, if the SVG was the same height as the container but only 10 pixels ...

htmlcsssvg

Asynchronous postback with file upload in a pop-up modal

I am facing an issue with my UpdatePanel setup. Both the submit button and clear button are set as triggers, but I have a FileUpload Control within the div. This div acts as a modal popup where users can upload a note. The problem arises when trying to upl ...

asp.netupdatepanelmodalpopupextender

One of the unique CSS properties found in the NextJS setup is the default 'zoom' property set to

Even though I already found a solution to the problem, I can't help but wonder what the author meant by it. Hopefully, my solution can help others who may encounter the same issue. After installing the latest NextJS version 13.2.4 on my computer, I e ...

cssreactjsnext.js

Rather than overwriting it, append a new value to the localstorage

I am trying to insert the value of newUsername into the localStorage setUsernamesArray. However, my current code overwrites the existing value instead of adding to it. Code $('#signUpButton').click(function() { var newUsername = $('#userna ...

javascriptjqueryhtmlcss

Hover initiates a basic image presentation

Does anyone know how to create an image slideshow that only plays when a user hovers over the image? I found a demo that does everything I need except for the hover functionality. Check out the demo here. You can find the documentation here. Here is the ...

jqueryhtmlcssslideshow

The web view is unable to load the HTML file

I have encountered an issue with loading html files in a webView. Whenever I try to load any html file, I receive the following error message: Load error, The operation couldn't be completed.(NSURLErrorDomain error -999.) How can this issue be resol ...

iphonehtmluiwebview

Assign a value to an input element with JavaScript and retrieve the value using PHP

Below is a form and input element that can be found in the cart.php file: <form id="cartform" action="cart.php?action=update&pd=<?php echo $row['product_id'] ?>" name="form1" method="post"> <?php $query = "select * from ca ...

javascriptphphtml