Need underlining on a command button

[prach Gupta]

Hi
I have a command button shown as a link (using CSS) on a jsf page.
<h:commandButton id="prevBtn" value="Prev" actionListener="#{selectLEZDatesBean.prevMonth}" styleClass="link-like-button-center"/>
The CSS is
.link-like-button-center {
background-color: transparent;
color: #245CCE;
border-style: none;
cursor: pointer;
cursor: hand;
padding-left: 1px;
text-align: left;
font-size:100% !important;
font-family:Verdana,Arial,Helvetica,sans-serif;
}
I need to underline it on hovering mouse over it.I am using the following CSS for it.

.link-like-button-center:hover {
color: #945C9E;
text-decoration: underline;
}

It works fine in Internet Explorer but no underline is shown on mozilla.Is there any specific implementation required on Mozilla?

[Tim Holloway]

I don't know of any difference and I do most of my testing on Firefox. You might want to install the FireBug plug-in, open the FireBug console and see if there are errors displayed. You can also examine an element to see what styles are actually being applied. In JSF, there are some cases where a simple JSF tag results in unexpected HTML, and the style doesn't always end up on the element you want it to.

For a quick check without installing FireBug, type "javascript:" in the URL Location Bar.

At least you're not having the problem in IE, where debugging tools are harder to come by!

[prach Gupta]

Hi Tim

I already have fire bug installed in my fire fox and have seen every bit of style applied on it.As you can see
.link-like-button-center:hover {
color: #945C9E;
text-decoration: underline;
}

This css is shown in the fire bug applied on the command button but doesnot reflect at all.I havenot got any solution still for the same.

[Rorco Reggz]

Updating .link-like-button-center:hover style like this, did the trick for me (at least in FF 3.5):


.link-like-button-center {
text-decoration: none;
background-color: transparent;
color: #245CCE;
border-style: none;
cursor: pointer;
cursor: hand;
padding-left: 1px;
text-align: left;
font-size:100% !important;
font-family:Verdana,Arial,Helvetica,sans-serif;
}

[prach Gupta]

Rorco
You have updated the main CSS with text-decoration: none; but still it doesnot work for me.I think I will have to use anchor tag with the command button.So go to check how can i use anchor tag for it.

[Rorco Reggz]

prach, why are you using commandButton instead of commandLink? Could you also provide HTML code that gets rendered (only the button part)?

[prach Gupta]

I am not suppossed to use command link as it does not work properly with java script...what HTML are you asking about?

[Rorco Reggz]

When the page is displayed in your browser, open it's source ("View Source" in IE, for example). Then navigate to the button part and paste that HTML code here.

[prach Gupta]

I have added a new css along with the existing css

.calendarPrevMonth {
float:left;
width:auto;
}

and it works fine now.I could not understand the exact logic behind it but its working for me.