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

Refresh the data in a table upon clicking the menu

I am looking to develop an accordion MENU, but unsure if I should use divs or <ul>. When a submenu is clicked, I want to execute a mysql query to update the data in the table next to the menu. I'm not sure of the best approach and whether to uti ...

The lobster custom font is malfunctioning in Internet Explorer

I am trying to use the unique font called lobster. After downloading the lobster.woff2 file, I stored it in the font folder. In my custom CSS, I added the following: @font-face { font-family: 'Lobster'; font-style: normal; font-weight: 40 ...

Tips for expanding a text input field vertically, not horizontally like in Facebook, while typing or by holding down the Shift key and pressing Enter

I've come across numerous plugins that enable vertical resizing of a textarea and others that allow horizontal resizing of an input field. However, I have yet to find one that enables vertical resizing of an input field similar to Facebook's comm ...

Improving Vue Component on Navigation

I am facing an issue with my navbar where I have two versions. Version 1 features a white text color, while Version 2 has black text. The need for two versions arises due to some pages having a white background, hence the requirement for black text. Bot ...

Enhancing your design with animated borders on hover

This unique border animation caught my eye and sparked my curiosity. I'm interested to know if it can be achieved using only HTML5/CSS for a hover effect. Have you discovered any other visually appealing hover animations worth mentioning? ...

Toggling the form's value to true upon displaying the popup

I have developed an HTML page that handles the creation of new users on my website. Once a user is successfully created, I want to display a pop-up message confirming their creation. Although everything works fine, I had to add the attribute "onsubmit= re ...

Create a footer with a centered column orientation

I am currently working on creating a footer with four columns, one of which will display an image while the others will contain useful hyperlinks. This is what I have accomplished so far: http://jsfiddle.net/Lqh5a/ HTML <div id="wrapper"> <div ...

What are the best methods to activate grayscale and transition effects on Firefox and Internet Explorer?

In order to achieve a grayscale effect for all images on Internet Explorer 10 and IE 11, I came across a helpful solution in this post: internet explorer 10 - howto apply grayscale filter?. However, the method provided is only for a single image. How can I ...

Manipulate inherited CSS styles from an external source

Currently, I am working on creating a pagination using the NG-Bootstrap pagination component. However, I encountered an issue where I need to modify or specifically remove some CSS properties that are applied by default in the NG-Bootstrap library. Is ther ...

Tips for altering the appearance of a button when moving to a related page

I have a master page with four buttons that have a mouse hover CSS property. Each button's corresponding response page is defined on the same master page. Now, I want to change the button style when the user is on the corresponding page. How can this ...

List with Columns for Organization

I am not seeking advice on how to use columns in lists, but rather on aligning the columns on my website. Below is the code I have: <ol class="threecolumns"> <li>Item 1</li> <li>Item 2</li> <li>Item 3< ...

Searching for a specific element using a CSS selector

Looking for a way to find an element using a CSS selector in Chrome, I followed these steps: Right-click on the object Select "inspect" Right-click on the highlighted area in Chrome developer tools Choose "copy" Click on "copy selector" This is the cod ...

Determine the number of visible li elements using jQuery

Currently, I am utilizing a jQuery script to count the number of li elements in my HTML code. Here is an example of the setup: HTML: <ul class="relatedelements"> <li style="display:none;" class="1">anything</li> <li style="disp ...

Trouble with placing an absolutely positioned element using Tailwindcss

I am currently working on a project using TailwindCSS in which I have a logo positioned to the left and navigation to the right. Both elements are centered, but because the logo has a position of absolute, it appears in front of the navigation. I would lik ...

Struggling to populate a dropdown list with HTML, PHP, and MySQL

Here is the code snippet for creating a payment form: Everything seems to be working fine, but there is an issue with the supplier-ID dropdown. The dropdown is being created but it is not fetching data from the mysql table and no errors are being display ...

Align the bottom of an image with the top of text to achieve perfect vertical alignment

My goal is to arrange numerous images in a row, with text displayed below each image. Each block of text may consist of multiple lines and should be centered. While the heights of the images may vary, their widths will remain consistent. It is important th ...

When you tap on the child element, ignore the parent element

Is there a way to make CSS understand that clicking on a child element within the parent should not be considered as clicking on the parent as well? Why not give it a try by clicking on one of the children inside the parent? .parent{ background: b ...

Centering the Navbar in Bootstrap 3.0

I am currently in the process of migrating my project from Bootstrap 2.3.2 to Bootstrap 3. Unfortunately, I am facing issues with centering the navbar links, something that I was able to do easily before. Previously, I used this method: Center bootstrap&# ...

Is there a way to automatically update the child option when the parent option is altered?

I am attempting to modify the child option based on the parent option selection, similar to how it works in Bootstrap. ` <div class="wrap-input100 input100-select bg1"> <span class="label-input100">Indus ...

Adjusting the transparency for every <td> element except for one child within the final <td>

<tbody id="items"> <tr><td>Item 1</td></tr> <tr><td>Item 2</td></tr> <tr><td>Item 3</td></tr> <tr><td>Item 4</td></tr> <tr><td> ...