All hyperlinks are displayed as a single entity

I have 5 image links displayed side by side, but when I hover over them, they act as one collective link. Can someone please assist me with resolving this issue?

After updating my code to include the entire div, it seems that there is something within the code causing this behavior.

The changes suggested are effective here, but unfortunately not on my website. Any guidance in finding the error would be greatly appreciated.

/**********************************************************************************************************************************************Donation Boxes*/
.sponsors {
border: 1px solid transparent;
border-radius: 5px;
box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
color: #242527; 
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 17px;
font-weight: 300;

margin-bottom: 25px;
margin-top: 50px;
-moz-box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
padding: 15px;
-webkit-box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
width: 970x;
}

.sponsors img {
margin-right: 25px;
text-align: center;
vertical-align: middle;
width: 170px;
}

.sponsors-title a {
color: #da291c!important; 
font-family: Netflix Sans,Helvetica,Arial,sans-serif!important;
font-size: 17px!important;
font-weight: 300!important;
line-height: 28px!important;
text-decoration: none!important;
}

.sponsors-title a:hover {
color: #242527!important; 
font-family: Netflix Sans,Helvetica,Arial,sans-serif!important;
font-size: 17px!important;
font-weight: 300!important;
line-height: 28px!important;
text-decoration: none!important;
}

.sponsors-desc p {
color: #242527!important;
font-family: Netflix Sans,Helvetica,Arial,sans-serif!important;
font-size: 16px!important;
font-weight: 300!important;
line-height: 28px!important;
}

.sponsors-links {margin-left: 10px!important;
text-align: right;
vertical-align: right;
width: 100%;
}

.sponsors-links a:hover {
text-decoration: none!important;
}

.sponsors-links img {
height: 25px;
margin-right: 10px;
width: 25px; 
}
<div class="sponsors">
<table style="width:100%">
<tr>
<td valign="top">
<img src="https://wpadvancedads.com/wp-content/uploads/2015/08/300x250.png">
</td>
<td valign="top">
<div class="sponsors-title">
<a href="https://www.capebretoncares.com/">Hotels</a>
</div>
<div class="sponsors-desc">
<p>What’s happening to the ocean is a drag, but talking about it doesn’t have to be. Lonely Whale collaborates with organizations, influencers, and creatives to launch data-driven campaigns that speak to Gen Z, Millennials, and more. Join us.</p>
</div>
<div class="sponsors-links">
<a href="https://www.bigblueoceancleanup.org/" target="_blank">
<img class="social-icon" src="https://www.capebretoncares.com/images/sponsor-icons/icon_web.png">
</a>
<a href="https://www.bigblueoceancleanup.org/" target="_blank">
<img class="social-icon" src="https://www.capebretoncares.com/images/sponsor-icons/icon_twitter.png">
</a>
<a href="https://www.bigblueoceancleanup.org/" target="_blank">
<img class="social-icon" src="https://www.capebretoncares.com/images/sponsor-icons/icon_insta.png">
</a>
<a href="https://www.bigblueoceancleanup.org/" target="_blank">
<img class="social-icon" src="https://www.capebretoncares.com/images/sponsor-icons/icon_facebook.png">
</a>
<a href="https://www.bigblueoceancleanup.org/" target="_blank">
<img class="social-icon" src="https://www.capebretoncares.com/images/sponsor-icons/icon_youtube.png">
</a>
</div>
</td>
</tr>
</table>
</div>

htmlcss

Answer №1

To optimize the layout, consider setting the display property of the links to inline-block and applying the margin directly to the links instead of the images.

.sponsors-links a {
    display: inline-block;
    margin-right: 10px;
}

.sponsors-links a:hover {
    text-decoration: none;
}

.sponsors-links img {
    height: 25px;
    width: 25px;
}
<div class="sponsors-links">
<a href="https://www.bigblueoceancleanup.org/" target="_blank">
<img class="social-icon" src="https://www.capebretoncares.com/images/sponsor-icons/icon_web.png">
</a>
<a href="https://www.bigblueoceancleanup.org/" target="_blank">
<img class="social-icon" src="https://www.capebretoncares.com/images/sponsor-icons/icon_twitter.png">
</a>
<a href="https://www.bigblueoceancleanup.org/" target="_blank">
<img class="social-icon" src="https://www.capebretoncares.com/images/sponsor-icons/icon_insta.png">
</a>
<a href="https://www.bigblueoceancleanup.org/" target="_blank">
<img class="social-icon" src="https://www.capebretoncares.com/images/sponsor-icons/icon_facebook.png">
</a>
<a href="https://www.bigblueoceancleanup.org/" target="_blank">
<img class="social-icon" src="https://www.capebretoncares.com/images/sponsor-icons/icon_youtube.png">
</a>
</div>

Answer №2

Make your margins custom to fit your style with this method.

.sponsors-links {
    display: flex;
}

.sponsors-links a {
    margin:10px}

.sponsors-links a:hover {
    text-decoration: none;
}

.sponsors-links img {
    height: 25px;
    width: 25px;
}
<div class="sponsors-links">
<a href="https://www.bigblueoceancleanup.org/" target="_blank">
<img class="social-icon" src="https://www.capebretoncares.com/images/sponsor-icons/icon_web.png">
</a>
<a href="https://www.bigblueoceancleanup.org/" target="_blank">
<img class="social-icon" src="https://www.capebretoncares.com/images/sponsor-icons/icon_twitter.png">
</a>
<a href="https://www.bigblueoceancleanup.org/" target="_blank">
<img class="social-icon" src="https://www.capebretoncares.com/images/sponsor-icons/icon_insta.png">
</a>
<a href="https://www.bigblueoceancleanup.org/" target="_blank">
<img class="social-icon" src="https://www.capebretoncares.com/images/sponsor-icons/icon_facebook.png">
</a>
<a href="https://www.bigblueoceancleanup.org/" target="_blank">
<img class="social-icon" src="https://www.capebretoncares.com/images/sponsor-icons/icon_youtube.png">
</a>
</div>

Answer №3

Your code has a problem where space is being added within the <a></a> tags due to the use of margin-right. This results in the space becoming part of the link itself.

To address this issue, I have introduced the use of 

<span class="divider"></span>
after each link. This allows you to customize the amount of white space after the link without it being included as part of the link.

I have also eliminated the margins within your img css.

/**********************************************************************************************************************************************Donation Boxes*/

.sponsors {
  border: 1px solid transparent;
  border-radius: 5px;
  box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
  color: #242527;
  font-family: Netflix Sans, Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 300;
  margin-bottom: 25px;
  margin-top: 50px;
  -moz-box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
  padding: 15px;
  -webkit-box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
  width: 970x;
}

.sponsors img {
  text-align: center;
  vertical-align: middle;
}

.sponsors-title a {
  color: #da291c!important;
  font-family: Netflix Sans, Helvetica, Arial, sans-serif!important;
  font-size: 17px!important;
  font-weight: 300!important;
  line-height: 28px!important;
  text-decoration: none!important;
}

.sponsors-title a:hover {
  color: #242527!important;
  font-family: Netflix Sans, Helvetica, Arial, sans-serif!important;
  font-size: 17px!important;
  font-weight: 300!important;
  line-height: 28px!important;
  text-decoration: none!important;
}

.sponsors-desc p {
  color: #242527!important;
  font-family: Netflix Sans, Helvetica, Arial, sans-serif!important;
  font-size: 16px!important;
  font-weight: 300!important;
  line-height: 28px!important;
}

.sponsors-links {
  margin-left: 10px!important;
  text-align: right;
  vertical-align: right;
  width: 100%;
}

.sponsors-links a:hover {
  text-decoration: none!important;
}

.sponsors-links img {
  height: 25px;
  width: 25px;
  text-decoration: none !important;
}

.sponsors-links a {
  text-decoration: none !important;
}

.divider {
  padding-right: 25px;
}
<div class="sponsors">
  <table style="">
    <tr>
      <td valign="top">
        <img src="https://wpadvancedads.com/wp-content/uploads/2015/08/300x250.png">
      </td>
      <td valign="top">
        <div class="sponsors-title">
          <a href="https://www.capebretoncares.com/">Hotels</a>
        </div>
        <div class="sponsors-desc">
          <p>What’s happening to the ocean is a drag, but talking about it doesn’t have to be. Lonely Whale collaborates with organizations, influencers, and creatives to launch data-driven campaigns that speak to Gen Z, Millennials, and more. Join us.</p>
        </div>
        <div class="sponsors-links">
          <a href="https://www.bigblueoceancleanup.org/" target="_blank">
            <img class="social-icon" src="https://www.capebretoncares.com/images/sponsor-icons/icon_web.png">
          </a><span class="divider"></span>
          <a href="https://www.bigblueoceancleanup.org/" target="_blank">
            <img class="social-icon" src="https://www.capebretoncares.com/images/sponsor-icons/icon_twitter.png">
          </a><span class="divider"></span>
          <a href="https://www.bigblueoceancleanup.org/" target="_blank">
            <img class="social-icon" src="https://www.capebretoncares.com/images/sponsor-icons/icon_insta.png">
          </a><span class="divider"></span>
          <a href="https://www.bigblueoceancleanup.org/" target="_blank">
            <img class="social-icon" src="https://www.capebretoncares.com/images/sponsor-icons/icon_facebook.png">
          </a><span class="divider"></span>
          <a href="https://www.bigblueoceancleanup.org/" target="_blank">
            <img class="social-icon" src="https://www.capebretoncares.com/images/sponsor-icons/icon_youtube.png">
          </a><span class="divider"></span>
        </div>
      </td>
    </tr>
  </table>
</div>

Answer №4

All the image icons for web, twitter, insta, facebook, youtube have been assigned the same link 

https://www.bigblueoceancleanup.org/
. This results in displaying the same link when you hover over them.

To fix this issue, make sure to add the correct links for each of the web, twitter, insta, facebook, and youtube icons.

Review your code where all icons share the same link:

<div class="sponsors-links">
    <a href="https://www.bigblueoceancleanup.org/" target="_blank">
        <img class="social-icon" src="https://www.capebretoncares.com/images/sponsor-icons/icon_web.png">
    </a>
    <a href="https://www.bigblueoceancleanup.org/" target="_blank">
        <img class="social-icon" src="https://www.capebretoncares.com/images/sponsor-icons/icon_twitter.png">
    </a>
    <a href="https://www.bigblueoceancleanup.org/" target="_blank">
        <img class="social-icon" src="https://www.capebretoncares.com/images/sponsor-icons/icon_insta.png">
    </a>
    <a href="https://www.bigblueoceancleanup.org/" target="_blank">
        <img class="social-icon" src="https://www.capebretoncares.com/images/sponsor-icons/icon_facebook.png">
    </a>
    <a href="https://www.bigblueoceancleanup.org/" target="_blank">
        <img class="social-icon" src="https://www.capebretoncares.com/images/sponsor-icons/icon_youtube.png">
    </a>
</div>

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

Update the parent element's class style within a targeted div media query

I am facing a challenge where I want the width of my .container element to be 100% when the screen size reaches 900px. The issue is that I have used .container on multiple pages and only wish to change its appearance within the #sub-top div. The terminolo ...

javascriptjqueryhtmlcss

Manually controlling line breaks in HTML text

When collaborating with designers, they often have strong opinions about word wrapping in the final HTML page. If I am working on a fixed layout (non-responsive) and the designer is not satisfied with how the text wraps, there are several options available ...

javascripthtmlcssword-wrap

Comparing ASP MVC and PHP for uploading files: which is better?

This article on HTML5 file upload with a progress bar is really impressive: http://www.sitepoint.com/html5-javascript-file-upload-progress-bar/ However, the backend code provided is in PHP. I need assistance converting it to ASP.NET MVC3 or at least a go ...

phpasp.net-mvchtmlfile-upload

What is the method for aligning navbar items to the right in Bootstrap 4?

I'm new to Bootstrap and I have a question about aligning navbar items to the right in Bootstrap 4. I've tried the solutions provided in this article Bootstrap 4 - Right Align Navbar Items, but they didn't work for me. I'm trying to un ...

htmltwitter-bootstrapbootstrap-4twitter-bootstrap-4twitter-bootstrap-4-beta

Receive a distinct key alert after including a key attribute to a div element containing multiple sub nodes in react version 18.2.0

When attempting to render the div element on the page, I encountered a warning stating: "Each child in a list should have a unique 'key' prop." <div {...{}} key={"formKey"}> <input type="text" /> <button> ...

javascripthtmlreactjsjsxreact-key-index

Create an animation effect where a div increases in height, causing the divs beneath it to shift downward in a

My aim is to create columns of divs where the user can click on a div to see more content as the height expands. I've managed to set this up, but it seems there's an issue with the document flow. When I click on a div in the first column, the div ...

javascriptjqueryhtmlcss

Different sources for multiple iframes

Greetings everyone, I am facing an issue with multiple iframes on my page, each with a different src attribute. Despite specifying unique sources for each iframe, upon loading the page, they all seem to be loaded with the same src. <html><body&g ...

jqueryhtmliframe

Ensure that the jQuery Knob is set to submit any modifications only after the final adjustment

Utilizing jQuery Knob by anthonyterrien, I have configured the step to be 20. My goal is to transmit the knob's value to the server. The issue arises when the change function is triggered every time the user adjusts the knob using either a right or le ...

javascriptjqueryhtmlajaxjquery-knob

Design a styled rectangular tab using CSS

Does anyone know of any cool CSS techniques for achieving the tabbed rectangle appearance depicted in the image below? While it's clear that accomplishing this with just one div is not possible, is there a more efficient method than layering one div ...

csstabs

How can I create a box-shaped outline using Three.js?

As someone new to threejs, I have been trying to figure out how to render a transparent box around a symbol in my canvas. The box should only display a border and the width of this border should be customizable. Currently, I am using wireframe to create a ...

javascriptcssangularthree.js

The Mat-paginator is refusing to align to the right edge when scrolling the table horizontally in an Angular application

Overview: My Angular component features a table with Angular Material's mat-table and paginator. Despite fetching data from a source, the paginator fails to float right when I scroll horizontally. Sample Code: <!-- Insert your code snippet below ...

htmlcssangularangular-material

Is there a way to conceal a div class on the Payment page in Shopify?

I have encountered an issue with the code on the Shopify checkout (Payment) Page. Unfortunately, I am unable to directly edit this page within Shopify, but I have discovered that it is possible to add custom CSS or HTML code within the checkout settings of ...

javascripthtmlcssshopifyshopify-template

Unable to retrieve all form properties when using enctype='multipart/form-data'

Recently, my NodeJS server has been successfully uploading files to Amazon using a secret form. However, in an effort to enhance security measures, I decided to introduce a password field to the form. Unfortunately, upon doing so, I encountered an issue wh ...

htmlnode.jsformsexpress

Tips for saving JavaScript results to a form

Hey there! I'm looking to figure out how to save a JavaScript calculation within a form instead of just displaying an alert or outputting it on another page. Below is the JavaScript code I have for calculating prices. <script type="text/javascript ...

javascripthtmlforms

I am working with a JSON Object in JavaScript and need to retrieve a key using a String variable

Working with a JSON Object in JavaScript can be tricky, especially when trying to access keys stored as Strings using the dot operator. Consider this example of JSON code: "values" : [ { "prop0" : "h", "prop1" : "pizza", "prop2" : "2014- ...

javascripthtmljsonstring

hierarchical browsing system

Take a look at the image provided below. Currently, I am using multiple unordered lists - specifically 5. However, I would prefer to consolidate them all into a single nested ul. I am encountering two issues: How can I add a border-bottom to the hori ...

javascripthtmlcss

How can I resize or break the overflowing Bootstrap pagination within the parent div based on the resolution?

When utilizing boostrap4 theming for my pagination, a problem arises when loading the page on smaller resolutions than my monitor. The paginate section exceeds the parent div, resulting in an unsightly display. Below is a snippet of my code: <div clas ...

htmlcssbootstrap-4

Ways to remain on the same page even after submitting a form

I've been searching for a solution to my specific issue for days, but haven't had any luck. Can anyone provide assistance? I have a form on my website that is supposed to send an email when clicked, while also converting the div from a form to a ...

javascriptphphtmlajaxforms

How to Determine If a String Represents an HTML Tag Using jQuery

Checking if a string is an HTML tag can be tricky. I've tried various methods found on Google, but none have been successful so far: var v = $(string).html() ? 1 : 0; --or---------------------------------------------- var htmlExpr = new RegExp("/^( ...

javascriptjqueryhtml

Issue with :hover pseudo-class in IE8

If you're unsure about my explanation, check out the video for a visual demonstration. Pay close attention to the cursor movements while I attempt to optimize my website for IE8. Hopefully there is a solution to this issue. Thank you in advance! http ...

cssinternet-explorer-8hover