I'm struggling to figure out why the CSS isn't working properly

i found this markup like

shown here

i am curious why it appears that lines 12 & 13

.notes:link span,
.notes:visited span { ...

seems to be functioning

.comments span,
background-position: -16px -16px;
}
.permalink:link span,
.permalink:visited span {
background-position: -32px -16px;
}

seems to be non-existent

for unknown reasons, cssdesk looks to be down in that case code below ...

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8>
    <title></title>
    <style>
    .notes:link span,
    .notes:visited span, 
    .comments span,
    .permalink:link span,
    .permalink:visited span {
      background: url("http://static.tumblr.com/ikeq9mi/F6Tl4vrjj/metasprite.jpg") no-repeat;
      padding-right: 16px; /* width */
      font-size: 15px; /* height */
      margin: 0 2px;
      position: relative;
      top: -1px;
    }
    .notes:link span,
    .notes:visited span {
      background-position: 0 -16px;
    }
    .comments span,
      background-position: -16px -16px;
    }
    .permalink:link span, 
    .permalink:visited span {
      background-position: -32px -16px;
    }
    .notes:hover span,
    .notes:active span {
      background-position: 0 0;
    }
    .comments span,
      background-position: -16px 0;
    }
    .permalink:hover span,
    .permalink:active span {
      background-position: -32px 0;
    }
    </style>
</head>
<body>
<a href="{Permalink}#notes" class="notes" title="notes">{NoteCount}<span></span></a> / 
<span class="comments">
  <a href="{Permalink}#disqus_thread" class="dsq-comment-count" title="comments">Comments</a>
  <span></span>
</span> / 
<a href="{Permalink}" class="permalink" title="permalink"><span></span></a>
</body>
</html>

Answer №1

My suggestion is to consider using

.replies span {
    background-position: -16px -16px;
}

in place of

.replies span,
    background-position: -16px -16px;
}

Answer №2

It appears that there is a mistake in the CSS code you provided. Without the opening brace, browsers may have trouble parsing it correctly.

.comments span {
background-position: -16px -16px;
}

This section should be corrected to:

.comments span {
background-position: -16px -16px;
}

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

Bringing elements into perfect harmony in Angular

Seeking guidance on HTML alignment using bootstrap for prebuilt components like buttons. Struggling with aligning divs and looking to learn more about grouping them together for proper alignment. Goal is to center elements on screen one above the other. ...

What is the best way to create a scrollable tbody in an HTML table using React?

In my current project, I am using React, Node, Express, and Postgres to fetch data from a database. The issue I'm facing involves creating a scrollable table within a div that spans the entire screen width. Initially, I had to apply display: block to ...

What causes two identical pages to display fonts in different ways?

Two identical pages, hosted on the same server with the exact same Apache configuration and home directory. Each page contains only one sentence of text, unstyled. The strange thing is, when viewed in Chrome and Safari, the fonts render differently, while ...

What is the best way to design an element in HTML/CSS with a curved semicircle border at the top?

I'm looking to design an HTML/CSS element that features a semicircle at the top-middle with a border. Inside this semicircle, I want to place a smaller circle containing a single character (similar to the X in the provided image). Additionally, there ...

Align checkboxes horizontally to resemble a progress bar styling

Currently, I have a series of checkboxes that are displayed sequentially on the page. <div class="myCheck"> <h5>Here's what you've selected so far</h5> <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect ...

Creating Image Overlays with Hover Effects using CSS and PHP Conditions

Looking for some assistance with a Minecraft server listing page I am working on for a client. I have never done this before and have encountered a roadblock. Take a look at this image (apologies for using Paint, I was in a hurry!) The goal is to have the ...

Using clip-path in SVG works perfectly on images, but unfortunately it does not work on div

I came across an interesting example on MDN about using a clip-path SVG on an image. However, it seems that the same clip-path does not work properly when applied to a div. Can anyone shed some light on: The reason why this code is not achieving the inte ...

Angular encountering issues with loading external JavaScript files due to the error: ENOENT - indicating that the specified file or directory does

I am attempting to incorporate a bootstrap template into Angular. The template requires some external JavaScript and CSS files that need to be linked. I have placed these files in the assets folder and referenced them in the styles and scripts arrays of an ...

Tips for deleting Material Angular CSS codes from the head section of your website

I am currently studying AngularJS and Material Angular Design. However, I have noticed that the Material Design includes CSS codes within the <head> tags. See attached screenshot for reference. Is there a way for me to extract these codes from the h ...

What is the best way to incorporate CSS styles into a PHP loop?

Struggling to implement CSS styles on a PHP loop: <h3 class='title'></h3> The CSS style doesn't seem to be taking effect: .title{ color : red; } I attempted surrounding the echo with <?php ?> tags and then applying ...

Has there been a recent issue with FireFox 3 where it fails to clear a float and does not recognize negative margins?

I've been searching online, but haven't come across a definitive answer yet. I'm interested in knowing if there is an issue with Firefox 3 when applying a negative margin to a div that is either clearing a float or containing another floated ...

Unable to transition slides in AngularJS on Safari iOS 9 due to malfunctions

Having some CSS classes that smoothly slide my ng-view left and right during route change, everything was working well on most browsers and phones until now. Under ios 9, the animation is not functioning properly. Instead of sliding left to right, the view ...

Arranging Text and Images in HTML/CSS to Ensure Optimal Placement When the Window Size Changes

Hello fellow coders! I've recently started diving into the world of website development and I have a query regarding positioning elements and handling window resizing. Can anyone help me out? I'm trying to center an image, a message, and a passw ...

Troubleshooting: Difficulty with jQuery's resize event handler not functioning properly with

I'm currently facing an issue where I want a divider to adjust its size when another divider changes size due to new content being loaded into it. However, even after binding the resize event handler to the divider that loads the content, the event do ...

Adding custom fonts to DOMPDF: a step-by-step guide

First, I moved the dompdf library folder to /dompdf Next, I added a /fonts folder containing Roboto-Black.ttf Then, I created an index.php file <?php // Autoloader inclusion require_once 'dompdf/autoload.inc.php'; // Namespace reference ...

Utilize CSS to selectively target specific sections of a repetitive pattern within a list

I have come across a list fragment that is generated automatically and I only have the ability to adjust the CSS for it. <ul class="menu"> <li class=" menuItem1 first parent"></li> <li class=" menuItem2 parent"></li> ...

Guide to aligning a div element along the right edge of the webpage

I'm struggling to align this div all the way to the right side of the screen. Below is the HTML: <html> <head> title></title> <link rel="stylesheet" type="text/css" href="../css/style.css"/> </head> <h1&g ...

Customize the CSS for the column containers in Material-UI's DataGrid with the

I am facing a challenge in trying to override the CSS property position on the .MuiDataGrid-columnsContainer. Upon reviewing the information available on https://material-ui.com/api/data-grid/#css, it seems that there is a rule defined for root but not spe ...

Avoiding the page from scrolling to the top when the sidebar is opened (NextJS, Typescript, TailwindCSS)

I'm currently working on a website that features a sidebar for smaller screens. While the sidebar functions properly, I would like to keep the background page fixed in place when the sidebar is active so it does not scroll. In my code, I have utilize ...

The svh/lvh units are experiencing unexpected issues when using Chrome on an iPhone

I'm facing an issue with my hero section that is supposed to take up the full height of the viewport. I recently tried using the new svh/lvh units, which seemed to work fine on desktop and Safari for mobile. However, when testing on Chrome for mobile ...