Breaking the link from the image it is connected to using [middleman] css and html

My question is about an icon with a link attached to it.

<%= link_to image_tag("infobutton_circle_blue.png") ,"http://redbullrecords.com/artist/awolnation/", :id => "about" %>

After applying styles, the link may not work properly:

<a id="about" href="http://redbullrecords.com/artist/awolnation/" style="
    height: 40px;
"><img src="/images/infobutton_circle_blue.png"></a>

When adding position and sizing styles, such as:

        #about 
          img
            float: right
            width: 50px
            padding-right: 45px

            +rhythm(-2.0 , 0, 0, 0)

The image may no longer function as a link, appearing strangely on the page inspector with a 0px x 0px size. Has anyone encountered this issue before?

If you have any solutions or suggestions, please share them with me as I try to figure out what might be causing this problem.

I attempted to target the image id directly without success, which is why I am using #about img in my code snippet.

csshtmlsassmiddleman

Answer №1

Upon observation, I noticed that the designated space for the icon overlapped another element. To resolve this issue, I adjusted the styles to absolute positioning, which resulted in everything functioning as expected. It was definitely an unusual situation.

#about 
  img
    position: absolute
    width: 50px
    padding-right: 45px
    margin-left: 70%

    +rhythm(-2.0 , 0, 0, 0)

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

Ways to set control values with AngularJS

After retrieving a single record from the database for my detail view, I need to assign data to controls. Take a look at my code snippet below: var app = angular.module("MyProductApp", []); app.controller("ProductsController", function ($scope, ...

javascriptjqueryhtmlcssangularjs

Customizing the input placeholder for password fields in IE8 using jQuery

Currently, I have opted to use jQuery instead of the HTML5 placeholder attribute <input type="text" name="email" value="Email" onfocus="if (this.value == 'Email') { this.value = ''; }" onblur="if (this.value == '') { this. ...

javascriptjquerycsshtml

Why does tagging P trigger popups in the DIV when the DIV contains another DIV?

JSBIN HTML <p> <div>123</div> </p> CSS p div{ background:#f00; } Encountering an odd issue here. When I input the HTML structure as shown below: <p></p><div>123</div> The CSS code fails to produce ...

htmlcss

Rotation of the SVG coordinate system distorts angles

My comprehension of SVG, particularly the viewport, viewBox, and the user coordinate system, seemed fairly solid. In the initial example provided below, we utilized a viewBox with a matching aspect ratio as the viewport. As expected, there was no distorti ...

htmlcsssvg

What causes *ngIf to display blank boxes and what is the solution to resolve this problem?

I am currently working on an HTML project where I need to display objects from an array using Angular. My goal is to only show the objects in the array that are not empty. While I have managed to hide the content of empty objects, the boxes holding this co ...

htmlcssarraysangulartypescript

Creating a function that counts the number of times a button is clicked

I want to have the "game" button appear after the user clicks the "next-btn" 2 times. Once the multiple choice test has been completed twice, I'd like the game button to show up and redirect the user to a separate HTML page called "agario.html." I&ap ...

javascripthtml

Toggle visibility

Seeking a unique example of a div SHOW / HIDE functionality where multiple divs are populated within the main container. Specifically looking to display new paragraphs or topics of text. I have experience with standard show/hide techniques for collapsing ...

javascripthtml

Creating a vertical scrollbar with CSS flexbox for columns set at 100% height in a row for FF, IE, and

I am currently working on an HTML application that needs to fit perfectly within a designated space without causing any page level scrollbars. I have utilized flexbox styles extensively to achieve this, but unfortunately, I am facing compatibility issues w ...

htmlcssflexbox

Using ReactJS to create cross-browser inline styling with flexbox

I'm currently working on a React web application that relies heavily on inline styling. My goal is to ensure compatibility with the latest versions of major browsers (Safari, Chrome, Firefox, IE) while utilizing flexbox for layout. The issue I encou ...

javascripthtmlcssreactjsflexbox

Creating an error message display function using HTML and JavaScript when incorrect input is detected

I am having trouble creating an HTML5 and JS program that will show an error message if the user input is empty. Despite my efforts, I can't seem to get the "Error Message" to display. As a beginner, the video tutorial I'm following doesn't ...

javascripthtml

Creating a dynamic input box with an add/remove button in each row using jQuery

Need help with a jQuery-based UI that allows users to dynamically add input boxes. The desired look is as follows: Default appearance: INPUT_BOX [ADD_BUTTON] [REMOVE_BUTTON] Clicking on the [Add_Button] should add another row like this, and so on: ...

javascriptjqueryhtmldynamic

Is there an alternative solution to the issue of the jQuery resize() event not triggering when an input is

Despite the fact that the jQuery event resize() should trigger when the width of an input box changes, it seems to be malfunctioning. As per the jQuery API documentation, the resize event is supposed to go to the (window) handler. So my query here is, what ...

javascriptjqueryhtmlajax

Tips for showcasing a drop-down menu using Jquery

I am currently utilizing jQuery to showcase a drop-down menu. It is successfully working for a single menu and displaying the appropriate drop-down. However, when I attempt to use more than one menu, it displays all of the drop-down menus simultaneously. I ...

javascriptjqueryhtmlcssdrop-down-menu

Bootstrap's square-shaped columns

I would like to implement a grid of squares for navigation purposes. By squares, I mean that the colored areas should have equal width and height. Currently, I have achieved this using JavaScript, but I am interested in a CSS-only solution. My project is ...

javascriptjqueryhtmlcsstwitter-bootstrap

Certain parts of the CSS grid are not aligning properly within the grid lines

I'm having trouble with my CSS grid. The red section fits in the first square, but the rest of the content seems to be out of place in the grid. I'm new to all this and I can't figure out what I'm missing. I've tried everything but ...

csscss-grid

Is it possible to alter the name of a slot before displaying the element in the shadowDOM, depending on the slot utilized in the DOM?

In my project, I am working on implementing different features for both desktop and mobile devices. Some of these features can be replaced by slots. My goal is to have a slot that can be either replaced by a desktop slot called poster-foreground, or a mobi ...

javascripthtmltypescriptlit

Issue with Chrome related to svg getScreenCTM function

Check out the jsFiddle demo I am attempting to utilize the getScreenCTM function to retrieve the mouse position based on SVG image coordinates. It seems to work in IE and Firefox, but not in Chrome. When I define the attributes width and height in the SV ...

javascripthtmlcssgoogle-chromesvg

Ensure advertisements are easily accessible and not visible to screen-reading tools

I oversee the management of numerous ads on a website. My goal is to enhance their accessibility, and though I have been doing research, there seems to be limited information available on how to achieve this effectively. While I continue my investigation, ...

htmliframeaccessibilityadswai-aria

Tips for combining multiple fields into a single variable in PHP

When I click the submit button, the image source does not show any result but the image color is displayed. Any help would be greatly appreciated. <div class="form-group"> <input type="file" name="images[source][]" class="form-control input-l ...

phphtmlmysql

Displaying API logs on an Html console

function updateData(e) { const animeName = e.target.value; const apiUrl = `https://nyaaapi.herokuapp.com/nyaa/anime?query=${animeName}`; fetch(apiUrl) .then((res) => res.json()) .then(displayAnimeData); } const inputField = document.getEl ...

javascripthtmljsonapi