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

What is the best way to apply styling to an image that is contained within the document.write function?

I'm looking to customize the design of this cat image, but I'm struggling to locate where to incorporate the div class. It's likely a basic step, but as a beginner in JavaScript, I'm hoping that someone can assist me. document.write(&ap ...

javascriptcss

What is the best way to generate multiple progress bars by leveraging a for loop?

Exploring the code snippet below, I've been creating a progress bar that reacts to specific data input in array form. However, the issue I've encountered is that the code only generates a single progress bar. How can I incorporate this into my f ...

javascripthtmlcssfor-loopprogress-bar

Error 404 occurs when images are not able to load when stored in a different directory

When I encounter a custom 404 Error on my website at http://ericmuir.tk and it happens in a directory other than the home one, none of the images on the page load. I faced a similar issue with loading CSS scripts, but resolved it by using style tags which ...

htmlcsswebhttp-status-code-404

peculiar coding in HTML (HTML_ASG HTML_TAG, SYN_BLK, JS_ACV, etc..)

I created a website for a client and everything was working perfectly on my end. However, they are experiencing errors on 3 of their Windows machines running IE8 where the ElementById cannot be found. Upon inspecting the html-source, I discovered that ther ...

htmlcode-injection

Creating a linear video playback system

Having an issue with my code in Chrome where auto play is enabled, but the video won't play. I have a loop set up to play each video one after the other, but first things first - how do I get this video to start playing? If there's a pre-made so ...

javascriptjqueryhtmlvideo

Is there a way to achieve a double background color effect in CSS while ensuring that the text is centered within the second background color element?

How can I achieve a layout similar to the one shown in this image: ul menu li tags Should I use two tags for each element? Here is an example: <ul class="menu"> <div class="outside"><li class="inside"><a href="#">Firefox</a ...

htmlcsshtml-listsmenuitem

Creating Personalized Checkboxes for Internet Explorer Versions 7 and 8

I am currently in the process of implementing custom checkboxes for my website. Everything is functioning smoothly on browsers such as IE9 and other modern ones. However, I am encountering issues with IE8 and 7. Below is a snippet of my CSS code: input[typ ...

javascripthtmlcss

AngularJS Bootstrap CSS implementation for Hand Cursor Grab

Is there a way to ensure the cursor is always a hand / grab for sortable containers in AngularJS & Bootstrap? What specific HTML modification would achieve this change? <div ui-sortable="sortableOptions" ng-model="responses" class="container-f ...

cssangularjstwitter-bootstrapcursor

What is the best way to iterate through my array and display each value within my button element?

I have a challenge where I'm trying to iterate over an array named topics. This array contains the names of various people. Within my loop, my goal is to extract each name and insert it into a button as text. When I use console.log within my loop, I ...

javascriptjqueryhtml

Click a button to show or hide text

I am attempting to create a button that will toggle text visibility from hidden using 'none' to visible using 'block'. I have tried the following code but unfortunately, it did not yield the desired outcome. <p id='demo' s ...

javascriptcsshtmldom-events

What is the best way to overlay my slider with a div containing content?

In the hero section of my website, there is a slider with 3 slides. I am looking to add a div element that will display content over these slides at all times, regardless of which slide is currently showing. ...

htmlcss

Tips for creating a vintage, weathered font appearance on a web browser

Is it possible to create unique, randomly outwashed letters using a standard font? Instead of relying on pre-designed outwashed fonts available at , I am interested in achieving the same effect with a regular font that appears washed out when displayed in ...

htmlcssfontswebfontshandwriting

Design a dynamic rectangular division using CSS and Bootstrap 4 that adapts to different screen sizes

I am encountering difficulties attempting to replicate a full-width rectangle div on a website, particularly with issues related to responsiveness and mobility. Here is an example of the design I am trying to recreate. And here's what I've acco ...

htmlcss

The fix for the unresponsive fixed container in Angular 2 Material

I've encountered an issue with CSS and Angular 2 material. Any element with a fixed position doesn't behave as expected inside an md-sidenav-container. However, when it is placed outside the container, it works perfectly. I have created a Plunker ...

cssangularangular-material

Tips for restricting the line length in email XSLT

I am currently working on creating a report that needs to be sent via email. However, I have encountered an issue where the lines get cut off if they exceed about 2040 characters in length by email daemons. I have been using XSLT to construct the email rep ...

htmlxmlxsltemail

Ways to identify when a React child element is overflowing

tl;dr How can I create a component that hides overflow and toggles views with a button? For example, the user can initially see tabs 1, 2, and 3 while tabs 4, 5, and 6 are hidden. Clicking a button will hide tabs 1, 2, and 3, and show tabs 4, 5, and 6 with ...

javascripthtmlcssreactjs

Calculate the sum of multiple user-selected items in an array to display the total (using Angular)

Within my project, specifically in summary.component.ts, I have two arrays that are interdependent: state: State[] city: City[] selection: number[] = number The state.ts class looks like this: id: number name: string And the city.ts class is defined as f ...

javascripthtmlarraysangulartypescript

How to dynamically assign width to elements in a v-for loop in Vue.JS

I am working with HTML code that looks like this: <div v-for="(s, k) in statistics" v-bind:key="s.id" class="single-stat"> <div class="stats"> { ...

cssvue.jsstyleswidth

Expanding Issue with Bootstrap Navigation

Hello! I am experiencing an issue with my navbar. The menu collapses, but it does not expand. I have used an example from Bootstrap and made some tweaks, but for some reason, it still doesn't expand properly. Below is the code that I have been workin ...

htmlcsstwitter-bootstrap

AngularJS - Sending configuration values to a directive

I'm trying to figure out how to pass parameters (values and functions) to an Angular directive. It seems like there should be a way to do this in Angular, but I haven't been able to locate the necessary information. Perhaps I'm not using th ...

javascripthtmlangularjsparametersconfiguration