Sprite is being enlarged instead of being cut off

After successfully implementing rollover images, the code suddenly stopped working when I added a modal popup for another button on the site. I removed the modal pop-up, but now the sprites are broken. Instead of showing the light banner and dark hover effect, both sprite segments are displayed and scaled in. What could be causing this issue and how can it be resolved?

https://i.sstatic.net/YXEsf.jpg https://i.sstatic.net/RCPyD.png

a, img {
  border: none;
  outline: none;
}

a.rolla {
  display: block;
  width: 200 px;
  height: 258px;
  text-decoration: none;
  background: url("https://i.sstatic.net/RCPyD.png");
  background-size: 200px 258px;
  background-repeat: no-repeat
}

a.rollb {
  display: block;
  width: 200 px;
  height: 258px;
  text-decoration: none;
  background: url("https://i.sstatic.net/RCPyD.png");
  background-size: 200px 258px;
  background-repeat: no-repeat
}

a.rollc {
  display: block;
  width: 200 px;
  height: 258px;
  text-decoration: none;
  background: url("https://i.sstatic.net/RCPyD.png");
  background-size: 200px 258px;
  background-repeat: no-repeat
}

a.rolld {
  display: block;
  width: 200 px;
  height: 258px;
  text-decoration: none;
  background: url("https://i.sstatic.net/RCPyD.png");
  background-size: 200px 258px;
  background-repeat: no-repeat
}

a.rollover:hover, a.rollover2:hover, a.rollover3:hover {
  background-position: -213px 0;
}

a.rolla:hover, a.rollb:hover, a.rollc:hover, a.rolld:hover {
  background-position: -210px 0;
}

.displace {
  position: absolute;
  left: -5000px;
}

body {
  background: url("rpt.png");
  background-repeat: repeat;
  width: 1024px;
  margin: 0;
  z-index: -1;
}

#banner {
  z-index: 0;
}

#feTable {
  z-index: 1;
  position: absolute;
  top: 455px;
  left: 0;
}
<div width="1024px">
  <img id="banner" src="banner.jpg" height="512 px" width="1024px">
  <table id="feTable" style="width:1024px; left:22px">
    <tr>

      <td align="center" width="200px">
        < a target="_parent" href="" class="rollb">< span class="displace"></a>
      </td>

      <td align="center" width="200px">
        < a target="_parent" href="" class="rolla">< span class="displace"></a>
      </td>

      <td align="center" width="200px">
        < a target="_parent" href="" class="rollc">< span class="displace"></a>
      </td>

      <td align="center" width="200px">
        < a target="_parent" href="" class="rolld">< span class="displace"></a>
      </td>
    </tr>
  </table>
</div>

htmlcssspriterollover

Answer №1

Your code has two significant issues that need to be addressed.

Firstly, the problem lies in the background-size: 200px 258px; property. By specifying specific length values for background-size, you are forcing the background image to fit those exact dimensions. This results in your 412 x 260 image being squashed down to 200 x 258, causing the entire image to be displayed.

<length>

A <length> value defines the scale of the background image in the corresponding dimension. Negative lengths are not valid.

For more information on background-size, refer to (https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)

Secondly, the issue stems from incorrectly specifying the width on a.rolla, a.rollb, a.rollc, and a.rolld. The space between the value and 'px' in width: 200 px; is causing it to be ignored, resulting in the width growing to that of the containing td element, displaying more of the background than necessary.

To rectify these issues, make the following adjustments:

  • Change width: 200 px; to width: 200px; on a.rolla, a.rollb, a.rollc, and a.rolld
  • Remove background-size: 200px 258px; from a.rolla, a.rollb, a.rollc, and a.rolld

a,
img {
  border: none;
  outline: none;
}
a.rolla {
  display: block;
  width: 200px;
  height: 258px;
  text-decoration: none;
  background: url("https://i.sstatic.net/RCPyD.png");
  background-repeat: no-repeat
}
a.rollb {
  display: block;
  width: 200px;
  height: 258px;
  text-decoration: none;
  background: url("https://i.sstatic.net/RCPyD.png");
  background-repeat: no-repeat
}
a.rollc {
  display: block;
  width: 200px;
  height: 258px;
  text-decoration: none;
  background: url("https://i.sstatic.net/RCPyD.png");
  background-repeat: no-repeat
}
a.rolld {
  display: block;
  width: 200px;
  height: 258px;
  text-decoration: none;
  background: url("https://i.sstatic.net/RCPyD.png");
  background-repeat: no-repeat
}
a.rollover:hover,
a.rollover2:hover,
a.rollover3:hover {
  background-position: -213px 0;
}
a.rolla:hover,
a.rollb:hover,
a.rollc:hover,
a.rolld:hover {
  background-position: -210px 0;
}
.displace {
  position: absolute;
  left: -5000px;
}
body {
  background: url("rpt.png");
  background-repeat: repeat;
  width: 1024px;
  margin: 0;
  z-index: -1;
}
#banner {
  z-index: 0;
}
#feTable {
  z-index: 1;
  position: absolute;
  left: 0;
}
<div width="1024px">
  <table id="feTable" style="width:1024px; left:22px">
    <tr>
      <td align="center" width="200px">
        <a target="_parent" href="" class="rollb"><span class="displace"></span></a>
      </td>
      <td align="center" width="200px">
        <a target="_parent" href="" class="rolla"><span class="displace"></span></a>
      </td>
      <td align="center" width="200px">
        <a target="_parent" href="" class="rollc"><span class="displace"></span></a>
      </td>
      <td align="center" width="200px">
        <a target="_parent" href="" class="rolld"><span class="displace"></span></a>
      </td>
    </tr>
  </table>
</div>

Answer №2

a.rolla, a.rollb {
  text-overflow:ellipsis;
}

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 Step-by-Step Guide to Adding a Function Style to Wordpress

Typically I would use enqueue in this manner wp_enqueue_style( 'mystyle', get_stylesheet_directory_uri() . '/css/style.css',false,'1.1','all'); but now I have created a custom field and need to enqueue a style that ...

phpcsswordpress

Exploring the power of Vue element manipulation

I'm diving into the world of web development and starting my journey with Vue on an online learning platform. Check out the code snippet below: <div id="app"> <form @submit.prevent="onSubmit"> <input v-model="userName"&g ...

javascripthtmlvue.js

In which orientation does the iPad come configured as standard?

There seems to be some confusion regarding the default orientation of the iPad. While some believe it is portrait (which is how I typically use my iPad), others argue that it is actually landscape. In my CSS, I have specific settings for targeting elemen ...

ioscssipadios6orientation

What steps do I need to take to activate this JQuery plugin successfully?

I stumbled upon this amazing silky smooth marquee jQuery plugin online @: Smooth marquee After downloading the latest JQuery and the JQuery marquee plugin as directed on the site above, I am still unable to make it work like they showcased in their demo: ...

jqueryhtml

Require this form to be centered flawlessly

<form class="form-horizontal" role="form" id="contactf" action="http://titan.csit.rmit.edu.au/~e54061/wp/form-tester.php" method="post"> <div class="form-group"> <label class="control-label col-sm-2 lb" for="email">Email : </ ...

htmlcsstwitter-bootstrap

What is the best way to set up a HTML redirect page with Google Analytics code inserted into it?

Is it possible to generate an HTML page that redirects to a subfolder, yet maintains the Google Analytics code block for tracking on the homepage? ...

htmlhttp-redirectgoogle-analytics

A single Modal, Ajax, and data that is continuously refreshed

I'm currently facing a challenge in my project as I try to implement Ajax functionality. Although I'm relatively new to using it, I believe I have a basic understanding of its workings. My website involves collecting form data, posting it to a d ...

javascriptphphtmljqueryajax

Styling the file input type in AngularLearn how to customize the

I've come across numerous queries on how to style an input type file, but I'm struggling to implement it in an angular context. So, what is the best way to customize the appearance of an input type file within an angular application? Below is t ...

javascriptjqueryhtmlangularjs

The width property is ineffective when used in conjunction with the d3 styling method

My goal is to create bar graphs where the width of each bar represents a person's age. However, I am having trouble applying the width attribute to the bars using the style method in d3 (I checked this by inspecting the elements in the browser). Other ...

csssvgd3.js

Button with embedded Bootstrap dropdown

I need help with centering a dropdown menu on my webpage. I followed the instructions, but it's still appearing next to the button instead of in the center. Below is the code snippet: <div class="btn-group"> <button type=" ...

htmlcssbootstrap-5

What is the best way to show a table with 100% width in the Chrome browser?

I am currently working on debugging and expanding an express application that showcases a dataset through a series of nested tables on a webpage. Initially, all the CSS resided within style tags in the head section of the HTML file, and the tables were dis ...

javascripthtmlcsstwitter-bootstrapexpress

Tips for effectively utilizing an if/else structure to animate fresh content from the right while smoothly removing old content by sliding it to the left

document.getElementById("button1").addEventListener("click", mouseOver1); function mouseOver1(){ document.getElementById("button1").style.color = "red"; } document.getElementById("button2").addEventListener("click", mouseOver); function mous ...

javascriptjqueryhtmlcss

JavaScript tutorial: Locate a specific word in a file and display the subsequent word

Seeking assistance with a task: I need to open a locally stored server file, search for a specific word, and then print the next word after finding the specified one. I have managed to write code that successfully opens the file, but it currently prints e ...

javascripthtmlajaxstring

What is the best way to horizontally align and center the navigation menu?

I've been struggling to center and align the navigation links inside this div horizontally. I attempted a few methods, but none seem to work. I managed to fix the previous issue with #centermenu, but unfortunately it still isn't functioning as e ...

css

Tips for handling alternate lines with two distinct styles in the Ace editor

I am looking to develop a unique note-taking editor using Ace. For instance, if I paste some Spanish text into the editor, I would like to add English words as notes for corresponding Spanish words. My goal is to display these English words above the resp ...

javascripthtmlace-editor

Teaching etiquette to the students of Li

I'm having trouble getting two lists to display correctly on my website. I want one main navigation list that is horizontal and another sub navigation list that is vertical. To achieve this, I need to have two different classes for the list items in m ...

htmlcsshtml-lists

Tips for restricting text within a div container

Currently, on my to-do list website, I am facing an issue with displaying long event titles in a div on the home screen. The text overflows, and even though I have set the x-overflow to hidden, it's not providing the desired result. I have tried using ...

htmlcssdjangobootstrap-4

Cells within a table are equivalent

I am attempting to ensure that all table cells match the size of the image, but for some reason, they are not aligning properly. Visit this link for reference. Here is a condensed version of the HTML code: <table> <tr> <td> ...

htmlcss

Align the body of the table with the header after populating the table with values

Issue : The data in the table body is misaligned with the headers of each column. Solution : var test_insert1 = '<tr>' + '<td class="td-trad-9">762261</td>' + '<td class="td-trad-7">1.16176&l ...

javascripthtmlcsshtml-tablecss-tables

Incorporating Ajax comments into an Ajax-powered status feature

I'm currently in the final phase of implementing ajax in my feed. Originally, I thought it would be a simple matter of pasting the comment input, but it turned out to be more complex than I anticipated. I placed the input below the main ajaxed status ...

phpjqueryhtmlajax