| Author |
Need underlining on a command button
|
prach Gupta
Greenhorn
Joined: Jun 04, 2008
Posts: 10
|
|
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
Saloon Keeper
Joined: Jun 25, 2001
Posts: 14480
|
|
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!
|
Customer surveys are for companies who didn't pay proper attention to begin with.
|
|
prach Gupta
Greenhorn
Joined: Jun 04, 2008
Posts: 10
|
|
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
Greenhorn
Joined: Jul 21, 2009
Posts: 8
|
|
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
Greenhorn
Joined: Jun 04, 2008
Posts: 10
|
|
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
Greenhorn
Joined: Jul 21, 2009
Posts: 8
|
|
|
prach, why are you using commandButton instead of commandLink? Could you also provide HTML code that gets rendered (only the button part)?
|
|
prach Gupta
Greenhorn
Joined: Jun 04, 2008
Posts: 10
|
|
|
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
Greenhorn
Joined: Jul 21, 2009
Posts: 8
|
|
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
Greenhorn
Joined: Jun 04, 2008
Posts: 10
|
|
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.
|
|
 |
|
|
subject: Need underlining on a command button
|
|
|
0
