What's the problem with my CSS button not functioning properly?

My background image at 120x30 is not displaying in full size. Can you help me figure out why?

You can view the issue here - under each article's read more button.

Answer №1

<a> represents an inline element. Therefore, an inline element does not have any

height, width, vertical margin or vertical padding
by default.

To rectify this, we need to set display:block in the css like so:

.comments-link, .readmore-link {
        display: block;
    }

Answer №2

Insert display: block;

.comments-link, .readmore-link {
        background: url("images/readmore.png") no-repeat scroll 0 0 transparent;
        border: medium none;
        display: block;
        font-size: 11px;
        height: 30px;
        line-height: 30px;
        padding: 0;
        text-indent: 8px;
        text-transform: uppercase;
        width: 120px;
    }

Answer №3

The a tags act as inline elements, meaning their width is determined by the content they contain. However, if you change their display to block, you can manually set their width and height, allowing for better control over their layout. Floating them will also enable you to position elements side by side, such as the comments link and read more link. To achieve this effect, add the following CSS code to your style sheet:

.comments-link, .readmore-link {
    display: block;
    float: left;
}

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 structure a div to resemble a table

I'm currently working on a form that has multiple input fields, and I'm looking to structure them in a specific way. The layout I want to achieve can be seen in this example: https://jsfiddle.net/dmilos89/58ea82gj/2/ The example above utilizes ...

Display information using HTML elements within a loop in JavaScript

I am facing an issue with iterating over an array of objects in JavaScript. Each object contains multiple parameters, and my goal is to extract the data from each object and display it in a table or a grid format. Here is an example of my code: function ...

Dynamic transition when selecting a navigation bar link in Bootstrap

Check out my website here: On my webpage, I have 3 navigation links which are: Who We Are What We Do Contact Us I have set up the "a href" tag to link to each section of the page when clicked. My query is, how can I create a sliding effect when clicki ...

Saving the output of an AngularJS expression in an input field

Looking at the calculations below, I am currently evaluating an expression, {{ annualIncome * 4.5 }}, in one input and then re-evaluating the same expression in another input. Instead of saving the result and transferring it to the other input, I am repeat ...

Having trouble interacting with an element using Selenium in Python

I am trying to figure out how to download an image from Instagram, but I cannot seem to programmatically click on the download button of this page. Even after attempting to use XPath and CSS selector methods for clicking, unfortunately, neither seems to w ...

Trouble exporting to Excel on Chrome and Firefox browsers

I am having an issue with exporting tables to Excel using JS. The <table> tag contains some descriptions and a class (<table class="someClassName" border="0" cellpadding="0" cellspacing="0">). When the table is exported to Excel, the Excel fil ...

Tips for horizontally aligning a list with sublist using CSS

Is there a way to align a horizontal list with a sublist in HTML and CSS? I want the menu items (Home, News, etc.) to be on one line, with submenu items below them. HTML <body> <div class="menu"> <ul class="menu_l ...

Tips for creating a rounded bottom for your header

Is it possible to create a rounded header similar to this one? https://i.stack.imgur.com/aYQbA.png ...

Which CSS properties can I implement to ensure that the text remains legible regardless of the background behind it?

Looking ahead, I am displaying an issue where the colors are almost perfect, but when different percentages are applied, some or all of the text becomes obscured. My goal is to assign the font color based on the background difference. I vaguely remember s ...

What is the best way to align the value text within an input tag to the upper left corner?

I recently adjusted the size of the input box to be 500 by 500 pixels, but I noticed that the text was starting from the middle instead of the top. Despite trying to set the padding to zero, it didn't seem to have any effect. This issue is occurring w ...

"Create a sleek design with CSS background stripes featuring 1px of white alternating with transparent sections

Despite reviewing numerous CSS background stripe tutorials, I have been unable to find a solution to my specific dilemma. How can I achieve a design with diagonal white lines that are only 1px wide alternating with transparent stripes that are approximatel ...

To submit the form, users must check off multiple checkboxes using JavaScript conditional statements

Currently, I am working on creating a form that requires multiple fields like name and email. While I have been successful in sorting out those fields, I am facing a challenge with the checkboxes. I am trying to figure out how to make it mandatory for two ...

Show the text from the chosen option using jQuery with a button

Hey everyone, I have a question regarding a coding issue I'm facing. In this problem, I am unable to display the text from the selected option when I click the order button. The desired result is to show the selected option that I choose and display i ...

Splitting areas within a liquid vessel using bootstrap 5

My container is structured like this with divisions: <div class="container-fluid"> <div class="row"> <div class="col-3"> sidebar </div> <div class="col-7"> top slider </div> <di ...

Setting a default value dynamically in a `select` control can be done by using JavaScript to

Upon subscribing to the HTTP server for data retrieval, my select control in Angular framework gets loaded with the received data. My objective is to set a default value that comprises three values from the server object separated by slashes ("/"), which r ...

How to Align Two Headers Vertically Next to Each Other Using HTML and CSS

Looking for a solution for aligning the orange date: Here is the current setup: Check out the JsFiddle example: http://jsfiddle.net/N4gpA/ (Including code as jsfiddle-only is not permitted) HTML: <div class="Box1"><a href="#"&g ...

I'm facing a challenge with getting the 'extend' feature to function correctly while using Flask in Python

As someone who is just starting out in programming, I recently decided to embark on creating a web app using flask, python, and HTML. To start off, I set up three essential files - two HTML files, and one python file. The first HTML file requiring informa ...

What is the best way to display a red cross on a button?

Could you please help me add a red cross (font awesome icon) to the button? I attempted to implement the code on JSFiddle. However, I still need: UPDATE Initially, I found Kiranvj's answer suitable for its simplicity and applicability to all r ...

After the automation is finished, I am interested in outputting the IMDB rating of a movie or series to the terminal

I prefer using Google search to find the element because I find it easier to navigate compared to IMDB. import selenium.webdriver as webdriver print("This script is designed to retrieve the IMDb rating of a movie or TV series!!!") def get_results(search_ ...

The link background color is malfunctioning

I'm having trouble getting the background color to show for the active link class. The border changes to dashed, but the color remains the same. Can anyone help me figure out what's going on? I'm new to CSS and feeling a bit frustrated. Also ...