Win a copy of Murach's Python Programming this week in the Jython/Python forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

Need underlining on a command button  RSS feed

 
prach Gupta
Greenhorn
Posts: 10
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Bartender
Posts: 18531
61
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Greenhorn
Posts: 10
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 8
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 10
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 8
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 10
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 8
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 10
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!