Having trouble with CSS styling not applying after website is uploaded to server?

I have taken a basic page template that was originally designed for the rest of my website and customized it to appear more simplistic. The page now consists of an unordered list with a brief paragraph at the top and a logo aligned to the right. While everything looks fine in the system preview, once uploaded to the server, all the CSS styling is lost.

Here is the HTML code:

#title {
    width:400px;
    position:fixed;
}

#icon {
    position:relative;
    float:right;
}

h5 {
    font-size:25px;
    color:#ff6682;
    line-height:1.35em;
}

a:link {
    color:#253b84;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>/other</title>
      <link href="assets/scripts/AMK_Website.css" rel="stylesheet"              
         type="text/css" />
   </head>
   <body>
      <div id="icon">
         <img src="assets/images/icon/icon.gif" width="80" height="106" alt=""/>
      </div>
      <div id="title">
         <h5> /other is a collection of personal work in design photography, as    
            well as work that inspires me. To get back to
            the important stuff, <a href="index.html">click here</a>
         </h5>
      </div>
      <div id="photolist">
         <ul>
            <li><img src="assets/images/other/1.jpg" width="768" height="1024"        
               alt=""/></li>
         </ul>
      </div>
   </body>
</html>

Any assistance would be greatly appreciated!

Answer №1

It appears that the location of your css file is not matching what the html link is looking for. Ensure that if you are referencing a file in the assets/ folder, that it is located in the same directory as your html file and that the folder contains the required css file.

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

The inclusion of float: left disrupts the formatting of the list

My webpage features a visual element known as a "plan", which consists of a small table and an image. I want these two elements to appear side by side without any styling. Currently, they are displayed one below the other. You can view how it looks like he ...

Display concealed information upon clicking

Is there a way to reveal hidden content only after clicking on the "View" link instead of hovering over it? I have tried implementing it so that the content appears on click, but it doesn't seem to be working as expected. How can I achieve this usin ...

Tips for positioning a div within a grid:

Looking for help with displaying news on your CMS page? You may have encountered an issue trying to show the title and content in two columns within a row. Here is some CSS code that might guide you in the right direction: *{ margin:0; padding:0; ...

Tabulator filter - Enhancing CSS elements for a unique touch

Is there a way to customize the CSS elements of filters used in tabulator.js? Specifically, I am looking to: Apply different background colors to text filters Add a down arrow on the right side of each drop-down filter box I have included a screenshot ...

Challenge with CSS Box Shadow

Hey there, I've been attempting to add a shadow effect to a box inside another box but I'm struggling to achieve the desired outcome. <div class="box effect2"> <div class="box effect2"> Box inside a box <div> &l ...

What does the class "md-2n" signify in Bootstrap 4?

Can you explain what 'md' stands for in this context? I understand that 'm' refers to margin, but what about 'd' in the first line of code? Also, what does the 'n' in 'n2' stand for? How is it different fr ...

Having trouble with animating the background color of an input button using jQuery?

I'm completely confused as to why the background color isn't changing despite investing a significant amount of time into it: <input type="button" class="front-consultation-btn" value="Get A Free Consultation"> <script> $(' ...

The Tahoma font is not being displayed properly in HTML emails on mobile devices

I am struggling to ensure that the font "tahoma" displays correctly in an HTML email. While it works fine on desktops, the font "tahoma" does not appear on mobile clients. How can I fix this issue? Below is the code for the email I am sending: <h3 ...

Footer division misbehaving

My goal is to add a footer to my website that includes a text field, but for some reason I'm encountering an issue with two of my divs not cooperating. You can observe this problem in this JSFiddle. Here is the CSS code for the footer: .footer { b ...

What could be causing the malfunction in this positioning and display?

<article id="l1"> <img class="active_pic" id="a1" src="img/load.gif"/> </article> <article id="l2"> <img class="active_pic" id="a2" src="img/load.gif"/> </article> <article id="l3"> <img class="activ ...

Conceal information within a label

I am encountering an issue with a wordpress plugin and I am attempting to conceal (or alternatively, replace which would be fantastic) the terms "DD", "MM" and "YYYY" in the provided code: <div class="smFormInlineFormCont"> <div class="smInli ...

How can I personalize the HTML code of images added to my WordPress articles?

I've been on an extensive search trying to find a solution for this issue. I'm aiming to modify the markup of an uploaded image in WordPress from its current form: <div id="attachment_906" style="width: 590px" class="wp-caption aligncenter"&g ...

How can triple nested quotes be utilized within Django templates?

Currently, I am attempting to utilize inline CSS and load an image as a background in a Django template. My goal is to include three quotes, however, I am unsure of the correct way to achieve this. Can anyone provide guidance on how to properly modify the ...

"Customize your Vuetify v-card with uniquely styled rounded corners on only

I am seeking to create a unique v-card design where only two corners are rounded. Despite my attempts, the card ended up rotated by 90° and didn't achieve the desired outcome. DESIGN ATTEMPT: <div class="text-center rotate-ninety ml-n6" ...

Ajax TabContainer mysteriously vanishes during Postback

I'm currently working on a GIS web application using C# ASP.net. Within my project, I have an Ajax TabContainer that houses multiple TabPanels containing various elements like a map window and scale bar from the ESRI WebAdf toolkit. Below is a simpl ...

"Initial loading issue with bootstrap carousel causes slides not to slide smoothly

I am currently working on implementing a slider carousel using Bootstrap. Although the 'active' image loads successfully, the controls and slide functionality are not working as expected. Initially, I believed this exercise would be straightforwa ...

The dropdown-menu-end class in Bootstrap 5 navbar is not activating on hover as expected

My Bootstrap navbar has right-aligned dropdowns, but when I try changing the trigger to hover, the .dropdown-menu-end class doesn't work as expected. I attempted using CSS for the hover effect: .dropdown:hover .dropdown-menu { display: block; mar ...

Struggling to make the bootstrap navigation bar function properly

I've been experimenting with replicating the basic framework to learn more about responsive web design using bootstrap. However, I've only been able to get certain parts to function correctly. For instance, I can use the "btn" class without any i ...

Guidelines for choosing an Element Id within an attribute tag using jQuery

Check Output and -->question. . I am a beginner in utilizing Bootstrap and JQuery for programming. I am interested in learning how to identify the "id" of an input element that is nested within another element's attribute. In my code, I am using ...

What is the best way to conceal Bootstrap accordion content when first loading my single-page application?

I am currently developing a single page application for an ESP32 device. I have chosen to keep all the content in one document as there is not a lot of information to display. My approach started with using the collapse class from Bootstrap 4.1.2. While i ...