The lines intersecting with the ethereal image in the background

I'm trying to achieve button links with an image overlay, but so far I've only been able to do it using CSS:

section a:link, section a:visited {
    width: 150px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -khtml-border-radius: 10px;
    color: white;
    background: #03c;
    padding: 10px 10px 10px 60px;
    display: block;
    text-decoration: none;
}

section div {
    margin-left: 5px;
    margin-top: -9px;
    width: 50px;
    height: 50px;
    float: left;
}

.pdf div {
    background: transparent url('pdf.png') no-repeat 0 50%;
}

Here's the HTML structure I used:

<section class="pdf">
    <div></div>
    <a href="#">Sheet music (PDF)</a>
</section>

However, negative margins are causing issues in IE7. Is there a better solution for this that works across all browsers? I attempted adding a margin-top in the section a tags, but due to collapsing margins, that didn't solve the problem.

(Unfortunately, embedding images and adding more external links is restricted based on my current reputation.)

cssimagehtmlmargin

Answer №1

@jill; I noticed in your code that you placed an image outside the link, causing the link to hide when hovering over the image. I'm not sure if this was intentional or not, but perhaps using position absolute could solve this issue.

HTML 

<a href="#"><span>&nbsp;</span>Sheet music (PDF)</a>

CSS

a{
    display:block;
    position:relative;
    text-decoration:none;
    -moz-border-radius: 10px 10px 10px 10px;    
    background: none repeat scroll 0 0 #0033CC;
    color: white;
    padding: 10px 10px 10px 60px;
    text-decoration: none;
    width: 150px;

}
a span{
    display:block;
    position:absolute;
    background: url("http://www.jill-jenn.net/drafts/background-image-over-the-lines/pdf.png") no-repeat ;
    width:50px;
    height:50px;
    top:-5px;
    left:10px;
}
a:hover{
    background:red;
}

For a helpful example, you can check out http://jsfiddle.net/sandeep/AwkwF/ hopefully, that will assist you

Answer №2

Consider experimenting with a different approach, such as utilizing a span tag for the image background while keeping everything else consistent.

<a href="#"><span>Click here to access the sheet music (PDF)</span></a>

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

Tips for shifting icons from the left to the right when collapsing a sidebar menu

Trying to solve a challenge with the sidebar width transition! How can I move icons to the right only when the sidebar is at a width of 50px, within the specified area? The current look: https://i.sstatic.net/GIc4n.png Desired outcome: https://i.sstati ...

jquerycsstwitter-bootstrapbootstrap-4

Alter the style of a div by clicking on a button

Can the background image of a div be changed by selecting a button outside of the div? For example: HTML <div id="change"></div> <div id="buttons"> <button class="button1">this</button> <button class="button2"> ...

javascriptjqueryhtmlcss

Error: ASP stylesheet no longer functioning

Why won't my CSS changes apply after I update the file? Even though it was working before, now when I make a change to my CSS file, the updates do not take effect. When viewing the applied styles on IE11 in troubleshoot mode, I am seeing the old sett ...

htmlcssasp.netvisual-studio

Empty the localStorage when terminating the IE process using the Task Manager

Utilizing HTML5 localStorage to keep track of my application session has been a useful feature. Here is a snippet of the code I am currently using: if(typeof(Storage)!=="undefined") { if(sessionStorage.lastname=="Smith") { alert("Your ses ...

javascripthtml

The alignment of two responsive divs is off

My goal is to create two responsive columns of divs that stack on top of each other as the screen size decreases. The challenge I am facing is getting these divs to always be centered and sit next to each other, using only inline CSS. <div id="containe ...

csshtml

Prevent scrolling on both md-sidenav and md-content in AngularJS Material

Currently, I am working on a website using AngularJs Material sidenav. My goal is to make both md-sidenav and md-content appear as one page, without any scroll bars showing up when the height of one element exceeds that of the other. How can I achieve th ...

cssangularjsangularjs-material

Tips for showing various images from a server using ng-repeat

Is it possible to display different images from a server using AngularJS? I have ng-repeat set up for posts and for each post, I want to retrieve its avatar. My approach is to call a function getImage(post.author.id) to fetch the corresponding avatar. $ ...

javascriptangularjshtmlcordova

Building a Dynamic Web Widget with the Perfect Blend of HTML, JS,

While developing a javascript-based web widget, I am aiming to steer clear of using iframes and avoid relying on the page's CSS. It is infeasible for me to utilize custom CSS, as it defeats the purpose, and iframe integration would not present a user- ...

javascripthtmlcsstwitter-bootstrapweb-widget

Adding gaps between hyperlinks in the sidebar navigation using Bootstrap 4

I created a sidebar containing links and I am attempting to add space between each link. Here is the code snippet I have tried: .sidebar-nav>li>a{ padding-bottom: 500px; } Unfortunately, this code is not producing the desired result. Are there any ...

htmlcssbootstrap-4sidebar

Unable to successfully submit a form using PHP

I am currently working on a PHP page that retrieves data from MySQL. The goal is to fetch a list of objects from the database, display each object in a separate form for editing, and then save only the edited values. However, I am encountering difficulties ...

phphtmljson

Why are all links broken and the mobile menu disappeared after installing featherbox gallery?

If you want to see for yourself, here is the link. I can't figure out why my website has suddenly lost functionality on this specific page. None of the links work, except for the home and contact (the non-expandable ones). The navigation menu seems ...

jqueryhtmlcsslightbox

Unable to eliminate italicized text within collapsible content

Despite having no programming experience, I am attempting to create a FAQ section for our help site using collapsible sections for the Q&A. While I've managed to achieve most of what I wanted, there is one element that stubbornly refuses to change. De ...

htmlcss

Modifying the default actions of Material UI components: A step-by-step guide

In my project, I am using materialUI to showcase an Expansion Panel. Here is the code snippet: import React from 'react' import ExpansionPanel from '@material-ui/core/ExpansionPanel'; import ExpansionPanelSummary from '@material-u ...

cssreactjsmaterial-ui

Issues detected with Foundation Block Grid in small size setting

I created a React component to display a series of div elements on a page using the Foundation Block Grid system to control the number of divs per row. However, I am facing an issue where the number of divs does not change when switching to a small-sized s ...

cssreactjszurb-foundation

Differences in behavior of multiple select with track by in Angular versions above 1.4.x

I recently upgraded my product from Angular 1.2.x to 1.4.x. Since updating to angularjs 1.4.x, I've encountered an issue: What I have: I included code snippets for both angular 1.2.0 and 1.4.8. You can check out the comparison on JSFIDDLE. Explanat ...

javascripthtmlangularjshtml-select

Is the concept of WebSockets simply adding unnecessary complexity?

Let me know if I'm mistaken... The implementation of firewalls was initially meant to limit internet access for Corporate employees (and indirectly safeguard home users). Now, with the introduction of WebSockets, applications are able to tunnel any ...

networkinghtmlwebsocket

Is it better to upload images to Vue.js (front end) or Node.js (back end) when using Vue.js and Node.js together?

Looking to create an image upload component that saves the uploaded image name to a database. Uncertain of where to upload the image itself. Should I store it in uploads/ within vue.js, or send the whole image to the backend node.js and store it there? ...

node.jsimagevue.jsfile-upload

How can I incorporate a .shtml file into a .php webpage?

Is there a way to include a .shtml file within a .php page? I know it can be done, as I have successfully achieved this in the past (although I cannot remember the exact code). Can someone please assist me with this? ...

phphtmlshtml

What is the best way to keep a text editable in a razor editor without it vanishing?

I'm on a quest to find the name for a certain functionality that has been eluding me, and it's truly driving me up the wall. Check out the razor code snippet I've been using to exhibit my form inputs: <div class="col-sm"> ...

javascripthtmljqueryrazorbootstrap-4

Create a new division directly underneath the bootstrap column

Imagine having a bootstrap table like this: https://i.sstatic.net/kXHiP.jpg Now, if you want to click on a column and open a div with more details below it, is it achievable with CSS or JavaScript? https://i.sstatic.net/HIfkK.jpg I tried using the Metr ...

javascripthtmlcssbootstrap-4dropdown