My images seem to lose control and go completely wild when I try to turn them into hyperlinks

Seeking advice on why my social icons are behaving strangely. This is a new issue for me and I suspect that some other CSS is causing the problem, but I can't seem to locate it.

I want to ensure that the formatting of these images remains consistent when they are links.

I'm sure there is a simple solution that I am overlooking, and I appreciate your help in addressing this.

<div id = "socialcontainer">
    <A HREF = ""><IMG class = "socials" SRC = "icons/FB.png"></IMG></A>
    ><IMG class = "socials" SRC = "icons/insta.png">
    <IMG class = "socials" SRC = "icons/SC.png">
    <IMG class = "socials" SRC = "icons/YT.png">
    <IMG class = "socials" SRC = "icons/BIT.png">
  </div><!--socialcontainer -->

    #socialcontainer{
  width:270px;
  padding-top:35%;
  left:80%;
  //position:sticky;
  //text-align:center;
  //border-style: solid;
  //border-color: red;
  z-index: 1;
  display:block;
  margin:auto;
}
.socials{
  width:50px;
  float:left;
  display:inline; 
  text-align:center;
  border-style: solid;
  border-color: red;
}

A:not(img){
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}

/*a img{
  width:inherit;
  margin:inherit;
  padding:inherit;
  display:inherit;

}*/

a:not(img):hover {
  color: #7d0505;
}

https://i.sstatic.net/hvT64.png

Answer №1

A quick solution is to apply a float property to a tag, allowing all immediate descendants to inherit the same styles.

Answer №2

<a> elements are typically set to display: inline; as a default styling. To modify the display property of <a> tags containing icons, you can change it to display: inline-block;

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

Is it best to stick with a static page size, or

While I typically design my webpages dynamically by determining the screen size and creating divs accordingly, I'm curious about the advantages of using a 'static' sizing approach (such as using pixels). Any insights on this contrasting meth ...

Fade out one div and then fade in a new one using Jquery

Hey there! I'm looking to create a smooth transition effect for my website where the content fades out when clicking on a menu item, and then fades in with the new content based on the link provided. Here's an example: . So basically, when I clic ...

Guide to displaying highcharts using external json data for numerous series

Having an issue with using angularjs and highcharts with multiple series where the data is coming from an external JSON file. When trying to access the data with a for loop using data.data[i].data, it's not working properly. Can anyone offer assistanc ...

Obtaining the Value of Input Text

Let's say you have the following HTML code: <form> Enter hash here: <input type="text" name="hash"> <button type="submit" formaction="/tasks/">Retrieve Url</button> </form> Is there a way ...

Angular HTML layout designed for seamless interaction

<div class ="row"> <div class ="col-md-6"> Xyz </div> <div class ="col-md-6"> Abc </div> </div> Using the code above, I can easily create a layout with two columns. Th ...

Utilize PHP to import data from a CSV file into a MySQL table

Currently, I am attempting to upload data to my table by importing a CSV file to my PHP page. The code I am using for this task is sourced from EggSlab <?php $servername = "localhost"; $username = "root"; $password = ""; $dbname = "Test"; // Establ ...

Tips for concealing non-selected categories in the product tree when a single category is chosen

When navigating through the shopping cart, users will encounter a product category tree structured as follows: Category1 Subcategory11 Subcategory12 ... Category2 Subcategory21 Subcategory22 ... Category3 Subcategory31 Subcategory32 ... ...

Tips for implementing lazy loading with an owl carousel featuring background images

Is there a way to add lazy loading to a semi custom owl carousel that uses background images instead of regular img tags? I've tried using Owl carousel's function for lazy loading but it doesn't seem to work. How can I achieve this? This is ...

Unexpected behavior with CSS background-image transitions effects

Currently, I am experimenting with a hover swipe effect using div and background image. The background image utilizes the outer div's max-width and an inner div with a padding-bottom percentage to maintain the aspect ratio. However, there are several ...

Tips for transforming a hover menu into a clickable menu

The scenario above demonstrates that when hovering over the dropdown menu, it displays a submenu. However, I want the submenu to be displayed after clicking on the dropdown text. Could anyone provide assistance on how to change the hovermenu to a clickabl ...

combining: enhancing the value of the background-image property

Here is a mixin that I would like to modify: .a () {background-image: url(one.png);} I want to create a new class .b which inherits properties from .a, but also includes an additional background image layer, like this: .b { .a; ...

Having difficulty getting the sign operator to show up in a text field

Whenever the ADD div is clicked, "+" should be displayed on the textbox. The same goes for SUBTRACT, MULTIPLY, and DIVIDE. However, I am struggling to make the operators show on the textbox. Here is what I have managed to come up with so far. <!D ...

Avoiding the application of a border-right to the final child of a div in CSS

Check out this custom HTML code: <div class="main"> <div class="parent"> <div class="child"> <span></span> <label></label> </div> <div class="child2"> // some html content </div> ...

Exclude the CSS file from all elements except for the ones that are being appended to a specific div

Imagine you have a document with a CSS file that applies to all elements on the page. Is there a way to selectively remove or add styles from this file so they only affect a specific div and not the entire document? ...

Step-by-step guide for activating a text box when a check box is marked

I'm looking to activate and deactivate two text boxes when a check box is selected. Currently, only one text box is enabled when the check box is checked. How can I modify my code to enable and disable two text boxes based on the check box status? Her ...

unable to adjust the maximum height limit

I've been struggling to set a maximum height on the slider I'm currently using. No matter what height value I input, it doesn't seem to take effect. Additionally, I attempted setting the width for the echo img row in the PHP section but enco ...

Integrating my HTML-CSS layout into a Ruby on Rails framework

After creating a web page template using a combination of HTML, Bootstrap, and CSS, I am now looking to see it in action on my Rails application. I need guidance on how to accomplish this step by step. Can anyone provide assistance on what steps need to ...

Tips for emphasizing the current element without disrupting existing styles

Is there a way to highlight an element with a border without causing it to shift? The script seems a bit glitchy when detecting mouse leaving the area. I'm unable to override parent element properties like border or outline. I also can't use pse ...

What is the reason behind Firefox's disregard of CSS font-size for code tags within pre tags?

There seems to be a discrepancy in how different browsers on Mac OS X 10.11.4 handle font-size. Is this an issue with Firefox, a CSS bug, or am I missing something about CSS? Here's a JSFiddle where you can see the details. In a section like this: &l ...

Delivering Access data in HTML format via email

In my MS Access database, I have a report that combines client records from one table (including email addresses) with grouped records fetched from other tables using a Query. I want to send this report directly to each client via email, within the body o ...