Styling <html:link> elements with CSS

I'm new to using struts and I'm struggling with applying my CSS styles to link tags.

<html:link action="LoginLink" styleClass="loginButton"/>

My goal is to add a button image to a link that directs to a login page.

I've successfully used this method for submit buttons on forms, but when trying to do the same for links, it doesn't display properly.

<html:submit styleClass="submitButton" value=" " ></html:submit>

I can only see part of my button image at the top when I include text in the link, for example:

<html:link action="LoginLink" styleClass="loginButton" >Some text here</html:link>

Is there an alternative tag I can use or a way to set the height and width (in pixels) of the link tag so the button displays correctly?

Here is the CSS for the loginButton:

.loginButton {
    border:none;
    background:url('../images/adminbutton.png');
    height: 59px;
    width: 138px;
}.loginButton:hover {
    background:url('../images/adminbutton2.png');

}.loginButton:active {
    position:relative;
    top:1px;
}

Answer №1

Consider including this attribute:

display: block;

within the styling of the element with the class name .loginButton

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

Hiding an HTML image element by setting its display to none will prevent it from being visible if later changed to block display

I am currently developing a web-based game that can be played on both desktop computers and mobile devices. However, for the optimal experience on mobile devices, players need to rotate their device to landscape mode. To prompt users to rotate their devic ...

Contrasting Firefox Experience on Mac and Windows

I'm experiencing some issues with a website that is displaying differently in Firefox on Windows compared to Mac. I did some research online to see if there are any known differences in CSS rendering between the two versions of Firefox, but it doesn&a ...

Image with text overlay

In my content, the setup includes the following: <p class="All-Book-Text">Maecenas iaculis, ipsum at tempor placerat, orci ligula aliquam enim, sit amet sagittis turpis enim sit amet lorem. Praesent dapibus pretium felis, et tempus nibh posuere a.&l ...

Utilizing CSS to Properly Position HTML Elements

Check out my code on jsFiddle I'm facing some challenges in positioning HTML elements using CSS. While I grasp the fundamental concepts of block and inline elements, implementing them in real coding scenarios can be confusing. I've shared my HTM ...

Design a personalized button with a hand-shaped image using CSS

I am aiming to design a unique custom button that resembles the shape of a hand featured in this image, with the intention of adding some functionality to it later. My attempts so far have involved using an SVG path created in GIMP within a button, but all ...

Firefox not displaying caret in Bootstrap dropdown

I am trying to display a caret on the right side of a bootstrap dropdown button inside a button-group. Here is the code snippet I am using: <div class="span3 well"> <div class="btn-group btn-block"> <a class="btn btn-primary dro ...

Bootstrap CSS: arranging columns for mobile devices

UPDATE: Having implemented the solution provided in the accepted answer below, I find myself back at square one with the original layout before any adjustments were made. The issue still remains unresolved. Any advice on how to achieve the desired design o ...

JavaScript and modifying the attributes of the nth child

I'm working on a navigation bar that changes the "background-image" of menu items using the nth-of-type CSS selector. Now, I need to figure out how to dynamically change the picture of the "background-image" when hovering over a specific menu item usi ...

The jquery selector fails to retrieve all elements

On the upcoming web page, I am attempting to use Jquery to select all <li> elements. Specifically, I want to target all the products contained within <ul class=search-result-gridview-items">. You can find the products here: I have made attempt ...

Using CSS files in the web directory in CakePHP and connecting them to HTML

Could someone offer some help with cakephp? I'm experiencing an issue related to routes that I can't seem to resolve. I've organized all my css files in webroot/css within my app. In my default layout, I included a html link <link href=" ...

How can you trigger CSS transitions to happen multiple times?

Currently, I have a basic circular logo that rotates 360 degrees when certain ajax functions are triggered. While this works as intended, the rotation only occurs once after the function is triggered, and I need to reload the page for it to happen again. ...

I am looking to have two elements positioned next to each other in equal dimensions, such as the reCaptcha feature

Could someone assist me in positioning these elements side by side, each taking up 50% of the screen? I'm unsure if this can be achieved while using the reCaptcha iFrame. <div class="g-recaptcha" data-sitekey="sitekey" style="transform:scale(0.5); ...

Attempting to consistently place an element at the bottom of my div container

I am attempting to align my <span class="fechar_fancy">Back/span> at the bottom of my div, regardless of the height of my content. I want this element to always be positioned at the bottom. Therefore, I tried using position:absolute and bottom:0 ...

"Using Javascript to assign a class based on a date being greater than

I am facing an issue with a script that applies a CSS class to table cells if the date is greater than a certain value. Currently, the script only works for today's date. I need it to work for dates within and outside of this week as well. $('td ...

Arrange and display similar objects together

I have a list of items in a listView that need to be visually grouped based on their class, displayed within boxes. For example, I have 5 items with the following classes: <div class="1"></div> <div class="1"></div> <div class= ...

Avoid activating the hover effect on an element situated below another element without the use of JavaScript

After reviewing various posts, it seems like the only solution involves using javascript. Is there a way to hover over one element without affecting the style of another element below it, all without relying on javascript? I'm looking for a solution u ...

Customize the border of the Tab indicator within Material UI

I created a custom NavBar with a unique tab indicator implementation: indicator: { background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', }, <Tabs classes={{indicator: classes.indicator}} onChange={handleClickTab} value={value}> ...

Ways to ensure the image stays fixed even as the screen dimensions fluctuate. HTML/CSS

Struggling to create an HTML header with a title and image positioned on the right side, but facing issues with the image shifting over the title when screen size changes. How can I ensure the image stays in place? Have tried various solutions without succ ...

Setting the dimensions of an HTML - CSS block

I am trying to style a navigation bar using the following CSS code: #nav {} #nav a { position: relative; display: inline-block; color: #F0F0F0; width: 1em; height: 2em; line-height: 0.9em; } #nav a.ic ...

Tips for concealing a tab upon selecting an option from a dropdown menu

<ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#song">Song</a></li> <li id="image-tab"><a href="#image" data-toggle="tab">Image</a></li> </ul> <div class="tab-cont ...