Home/ Questions/Q 7706379
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T00:06:41+00:00

I am having a problem with this specifically on macs, and most recently I

  • 0

I am having a problem with this specifically on macs, and most recently I was having a bolder font problem with only macs as well, but that had been fixed via CSS.

Problem: I have 10 anchor tags absolute positioned, and when on hover (green background-image), there isn’t any overlap problems on a PC, but on a Mac in almost every browsers, the background-image overlaps a little into the next sentence.

enter image description here

CSS for above (hover):

.homeText a:hover {

    background-image: url('/cont-img/on-hover-span_background-partial-solid.jpg');
    color: White;
    cursor: pointer;
    background-position: center;
    background-repeat:repeat;
    margin-right:-5px;
    font-style: italic;
}

The CSS absolute positioning of each element has plenty of space between the sentences, so that isn’t an issue. Also, the period at the end is a sprite of 2 different images, a white period on hover, and a grey period off hover. For this, I append a css class to the span tag at the end of the anchor tag that sets the background-position for the sprite in the span tag.

Any thoughts?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Since I have a span tag inside of each anchor, I realized that I had to, with the help of Timmerz, remove padding and margin-right from each case. The most significant reason I was getting more background-image overlap than expected is because the width of the span was unnecessarily big for the amount of pixels the period only takes up, creating more space for overlapping.

    After setting the spans to a width proportional to the picture in the sprites, I added a little padding right so the background-image didn’t tug too close to the sprite. Also, I had to adjust my absolute position on the right cases because of the adjustments stated above.

    Thanks for everyone’s contribution.

    • 0