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

Content towering over the footer

Can anyone help me figure out how to create a footer that appears behind the content when you scroll towards the end of a website? I've tried looking for tutorials online, but haven't found exactly what I'm looking for. Most of what I'v ...

Changing animation during mouse hover off

I've been experimenting with using 'translate3d' and 'transition' on hover to animate a div into view. While the animation works smoothly when hovering over the element, I'm having trouble getting it to transition back out of ...

How to Overlay a Semi-Transparent Object on a Background Video using CSS and HTML

Hey there, I'm encountering a puzzling issue with my website. I have a background video set up, and I wanted to overlay a floating textbox on top of it. However, no matter what I do, the background color and borders of the textbox seem to be hiding be ...

It appears that IE 10 is having trouble displaying modals, possibly due to a compatibility issue with jQuery 1.7.1's animate function

By visiting www.carsense.com and clicking on the login link in the top-right corner, you may notice that the curtain appears but the modal itself does not display, even though it exists: If you locate id="content1" and modify the inline opacity to 1, the ...

Tips on achieving horizontal scrolling for div overflow instead of wrapping onto a new line

It's a frequent occurrence in mobile apps to have a navbar with selectable text options that overflow horizontally without breaking into a new line. Instead, users must scroll horizontally to access all the options available. Is there a way for me to ...

Conceal the scrollbar when the expansion panel is in its collapsed state

One issue I am encountering is that the scroll-bar appears when the expansion panel is collapsed, but not when it's expanded. Here are the references: Collapsed Expanded <mat-expansion-panel class="panel"> <mat-expansion-panel-he ...

"Unlocking the Power of CSS: How to Effortlessly Align Text and Images

Dealing with an unchangeable piece of HTML can be frustrating, especially when it comes to styling. In my case, I have the following structure: <a title="some title" href="..."> <img src="....jpg"></img> Some text </a> Here ...

Displaying HTML elements conditionally in React depending on boolean values

Developing a component that limits the display of text to the first 40 characters, but can show the full description when a Chevron click event is triggered. The goal is to have the content expand in a similar fashion as it currently does with the Accord ...

All images must be arranged to fit seamlessly side by side regardless of the screen size

I'm currently experimenting with creating a website dedicated to my favorite TV shows. Upon entering the site, you are greeted with the main page that includes 7 images. Each image is linked to a specific webpage providing information about the corre ...

Animate.css does not function properly when loaded locally

I'm currently using a Flask server to host an HTML file for testing purposes. Within the head of this HTML file, I have linked to a locally stored animate.min.css file (<link rel="stylesheet" type="text/css" href="{{ url_fo ...

What is the best way to modify a CSS property using logical operators in JQuery?

If an element with the class ".has_padding" does not have any text content, it should be set to "display:none;". However, those elements with text inside should remain visible. Below is some code where I have styled the elements to demonstrate the issue. ...

Creating a custom Chrome extension with CSS embedded within an iframe

Recently, I developed a Chrome app that includes an iframe element within it. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="v ...

What is causing the z-index to not function properly on my elements?

In my current code setup, I have positioned the hero image at the bottom with an overlay on top that contains text and a button. Additionally, there is a navigation bar with a z-index applied. However, I am facing an issue where the button for viewing my r ...

Updating div width in Laravel blade using expressions or jQuery can be a simple task

Is there a way to dynamically change the width value of a div element based on a variable? The div contains blocks, and the size of each block is determined by the variable. For example, if $t->spotdiff = 2, I would like two equal blocks in a column wit ...

The MySQL database will need to contain an HTML form with specific styling attributes

I have been experimenting with creating an HTML form that allows users to add style attributes to their posts, such as Bold, Center, Font-Size, Link, Image, and more. However, my English skills are not the best, so I apologize if I am not explaining my que ...

Methods for verifying if a file is included in another file, while disregarding any whitespace adjustments

Let's say I have multiple CSS files (a.css, b.css, ..., e.css) and after concatenating and compressing them, I get a new file called compressed.css. Now, I need to verify if each of the original CSS files is included in the compressed.css file. Are th ...

Unable to alter the background color of the text box

I am currently struggling with my code where I am trying to overlay a text box on an image. Even after setting the background color to white, it still shows up as transparent. I have successfully done this in the past, but for some reason, it is not work ...

Align anchor tag text in the center vertically after adjusting its height using CSS

I'm having trouble vertically aligning the text within an anchor tag that has a height and background color set. The goal is to have equal amounts of space above and below the text, but currently all the extra height is being added below the text. I&a ...

Having trouble getting the show/hide div feature to work in a fixed position on the

Trying to show/hide a div using jQuery isn't working when the div is wrapped in a position:fixed element. However, changing it to position:relative makes the show/hide function work again. You can see an example of the working version with position:r ...

Achieve a floating right alignment of an unordered list navigation using CSS without changing

I am currently implementing a jquery navigation system which can be found at this link: http://css-tricks.com/5582-jquery-magicline-navigation/ My goal is to have the navigation bar float to the right without changing the order of items (e.g. home, contac ...