The background color of social media links spills over onto other links, creating a messy overlap

I have been trying to confine the teal hover effect within the boundaries of my social media links. Despite adjusting padding, heights, and widths using CSS properties, the hover effect still extends beyond the right border.

Here is how it appears without hovering:

This is the appearance when hovering:

The dimensions of each image are 19px × 15px.

#box {
  width: 200px;
  height: 50px;
  background-clip: padding-box;
  position: relative;
  margin: 0;
  left: 1.4em;
  background: rgba(0, 0, 0, 1);
  float: right;
  z-index: 200;
}

#boxlist li {
  height: 50px;
  width: 20px;
  position: relative;
  list-style-type: none;
  display: inline-block;
  bottom: 1em;
  margin-left: -2.5em;
  float: left;
}

.imgli:hover {
  background: rgba(0, 255, 255, 1);
}

.imgli {
  border-left: 1px solid rgba(153, 153, 153, 1);
  padding-right: 4em;
}

.imgli:first-child {
  left: -0.1em;
  border: none;
}

.imgli:nth-child(2) {
  left: 1em;
}

.imgli:nth-child(3) {
  left: 2em;
}
<header>
  <div id="box">
    <ul id="boxlist">
      <li class="imgli"><img src="images/banner-social-icon-twitter.png" class="boximg"></li>
      <li class="imgli"><img src="images/banner-social-icon-facebook.png" class="boximg"></li>
      <li class="imgli"><img src="images/banner-social-icon-email.png" class="boximg"></li>
    </ul>
  </div>
</header>

htmlcss

Answer №1

It appears that the overlapping issue is due to the combination of margin-left: -2.5em and the fixed width of the container, resulting in elements floating over each other. To solve this problem without analyzing your layout extensively, one solution is to add a background color to your <li> elements to prevent overlap. Check out the updated fiddle I created with this change: http://jsfiddle.net/VVj3R/1/

I simply added a background color line to the definition of .imgli, and it seemed to resolve the issue.

.imgli {
    border-left: 1px solid rgba(153,153,153,1);
    padding-right:4em;
    background-color:black;
}

You can choose a different opaque color instead of black if you prefer.

Also, please note that the images did not display in your fiddle due to your use of relative path names.

Answer №2

Consider simplifying your code with the following structure:

<div id="container">
  <ul>
    <li><div class="btn" id="btn1"></div></li>
    <li><div class="btn" id="btn2"></div></li>
    <li><div class="btn" id="btn3"></div></li>
  </ul>
</div>

CSS Styles:

#container ul {
  margin: 20px;
  padding: 0px;  
}

#container li {
  float: left;
  display: block;
  background: #ededed;
  padding: 1px;  
}

#container .btn {
  width: 50px;
  height: 50px; 
  background-color: #000;  
}

#container .btn:hover {
  background-color:rgba(0,255,255,1);  
}

#btn1 {
  background-image: url(someicon.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 40px 40px;  
}

View the live example on a fiddle: http://jsfiddle.net/tb2Ug/

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

Achieving priority for style.php over style.css

Having trouble with theme options overriding default CSS settings in style.css. Here's what I have in my header.php: <link rel='stylesheet' type='text/css' media='all' href="<?php bloginfo( 'stylesheet_url&apo ...

phphtmlcsswordpress

What is the best way to add animation to my `<div>` elements when my website is first loaded?

I am looking for a way to enhance the appearance of my <div> contents when my website loads. They should gradually appear one after the other as the website loads. Additionally, the background image should load slowly due to being filtered by the wea ...

javascriptjqueryhtmlcss

Creating a dynamic className string in JavaScript with React

In my current project, I'm implementing mobile support by creating separate styles for desktop and mobile. Although most components are the same on both platforms, I have two .scss files dedicated to each. To apply the correct styles, I use a combina ...

javascriptcssreactjswebsass

Ways to implement CSS styling for a particular HTML element

HTML: <div class="tagline">Web Portal Name</div><br /> <div id="logged_in_user_dtls" style="color:#FFF; margin-top:15px; font:bold; width:100%; position:relative; margin-left:800px;float:left;"&g ...

htmlcss

My intention is to ensure that the page is printed with the Background graphics checkbox pre-checked

When using the print button, I typically include the following code: onclick="window.print();" I also came across this code snippet to set a checkbox as checked by default: <style type="text/css" media="print"> * { -webkit-print-color- ...

javascripthtmljquerycssjquery-plugins

Issue with maintaining image aspect ratio; unable to utilize background-image: cover property

If what I am attempting is not feasible, please inform me. I am currently working on displaying images of various sizes without distortion. While most images look good, those with a smaller width than the container of 285px are getting distorted. I am fin ...

htmlcssimage

Concatenate a variable to the conclusion of a string using PHP

Currently, I am trying to include the id of the logged-in user in a table name. For instance, I would like to have a table named Rating_User_1 where 1 corresponds to the id of the user who is currently logged in. I have stored the user's id in a varia ...

phphtmllaravel

How can we ensure that pointer events return the same coordinates as touch events when the viewport is zoomed in?

I attempted to utilize pointer events (such as pointerdown) instead of using a combination of touch events (e.g. touchstart) and mouse events (e.g. mousedown) to determine the input event coordinates. var bodyElement = document.body; bodyElement.addEvent ...

javascripthtmlgoogle-chromemobilepointer-events

Navigational highlighting of current page section on a one-page website

I'm struggling with adding a navigation bar feature that will highlight the current section being viewed on my website. All I want is for the currently viewed section to appear bold in the navigation bar. Check out the codepen link: HTML <na ...

javascriptjqueryhtmlcss

Utilizing HTML5 Canvas for Shadow Effects with Gradients

Surprisingly, it seems that the canvas API does not support applying gradients to shadows in the way we expect: var grad = ctx.createLinearGradient(fromX, fromY, toX, toY); grad.addColorStop(0, "red"); grad.addColorStop(1, "blue"); ctx.strokeStyle = gra ...

javascripthtmlcanvas

Adjust the style of cursor - User Interface Expansion Panel Material Design

Using the MiU component "Expansion panel", I encountered an issue. By default, when the user hovers over the panel, the cursor is set to pointer. I attempted to change it to a default cursor, but my modification did not work. The code for my component is ...

cssreactjsmaterial-ui

Remove identical options from the dropdown menu

After hard-coding and adding items to the dropdown list for team size, such as 1, 2, 3, I am encountering an issue when loading it for editing or updating. Duplicate values are appearing in the list: 1 1 2 3 4... How can I remove these duplicate value ...

phpjavascriptjqueryhtml

Can a rotation animation be incorporated into an image in next.js when it is clicked?

Looking to enhance a next.js image with an animation? How about making it rotate 360 degrees upon each click? Despite my attempts at toggling classes, I can't seem to achieve the desired outcome. Any guidance would be greatly appreciated. Thank you in ...

javascriptcssimageanimationnext.js

What is the process for altering the color of an HTML output depending on its values?

I created a simple HTML code to showcase some outcomes. The possible results are SUCCESS, Failure, and Still Failing. I want these results to be displayed with corresponding colors, such as green for SUCCESS, and red for both Failure and Still Failing. I ...

javascriptjqueryhtmlcss

Tips for avoiding the transmission of className and style attributes to React components

Hey there! I'm working on a custom button component that needs to accept all ButtonHTMLAttributes except for className and style to avoid any conflicts with styling. I'm using TypeScript with React, but I've run into some issues trying to ac ...

htmlcssreactjstypescript

Conceal the overflow from absolutely positioned elements

I've gone through all the similar examples but still struggling to find the correct solution. My issue involves a basic Side Menu that toggles upon button click. Within the menu, there is a list of checkboxes positioned absolutely with the parent con ...

javascripthtmlcssreactjs

Creating a CSV file using an AJAX request in PHP

In my current project involving PHP AJAX DATATABLE within the Drupal framework, I have successfully developed a function to create a CSV file from table records. This function is triggered by clicking a button in HTML or accessing a specific URL. The PHP ...

phpjqueryhtmlajaxcsv

An element that stands alone, not contained within another element

When working with the following HTML structure: <div> <span class="style-me">i want to be styled</span> </div> <div class="ignore-my-descendants"> <span class="style-me">i want to be styled but my parent prevent ...

csscss-selectors

Are there any jQuery Context Menu plugins clever enough to handle window borders seamlessly?

After reviewing UIkit, as well as some other jQuery Context Menu plugins, I have noticed that they all tend to exhibit a similar behavior: The actual menu div renders outside the window, causing valuable content to be hidden from view. Is there a way to ...

javascriptjqueryhtmlwindow

In HTML, discover a sneaky way to conceal the video progress bar

I'm having trouble using webkit and it's not working for me #videoP::-webkit-progress-value { display: none; } #videoP::-webkit-progress-bar { display: none; } This is the code I have for my video in HTML <video id="videoP&quo ...

htmlcsshtml5-videoprogress-barwebkit