File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes jQuery - setting the vertical align property of text in an accordion header Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "jQuery - setting the vertical align property of text in an accordion header" Watch "jQuery - setting the vertical align property of text in an accordion header" New topic
Author

jQuery - setting the vertical align property of text in an accordion header

Joe Lemmer
Ranch Hand

Joined: Oct 24, 2008
Posts: 171
Hi there,

I want to use jQuery's accordion widget. In my implementation, I want the text in the header sections of the accordion to be vertically aligned in the middle. However, the css property vertical-align seems to have no effect.

I have been using firebug to check that I am adding the vertical-align property to the right class and I am. I have also tried creating a class which will be added only to spans in the headers that contain the text. But that doesn't work either.

I notice that the + and - icons for my headers are vertically aligned in the middle and want to know how they managed this. I see from the css in the jquery-ui-1.7.2.custom.css file that the plus and minus have the following css:


but I understand that the background-position property is just for positioning images.

Please could someone give me some suggestions as to how I can vertically align text in the accordion headers.

Many thanks

Joe

PS. Here is my HTML code and js code:




OCPJP 85%
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
What you tried to override the class

.ui-accordion .ui-accordion-header a

Eric
Joe Lemmer
Ranch Hand

Joined: Oct 24, 2008
Posts: 171
Hi there,

I've fixed the issue now.

In my css, I had set the display property for the ui-accordion-header class to block, like so:



This was because I was using the tag as a header for the accordion as shown in the html above and it didn't seem to display properly without it. It almost looked like tabs. After reading this article, I changed the display property to table-cell and the vertical-align now works. Hurrah!

My css code for the accordion header now looks like:



Cheers

Joe
Joe Lemmer
Ranch Hand

Joined: Oct 24, 2008
Posts: 171
Hi Eric,

thanks for your reply
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: jQuery - setting the vertical align property of text in an accordion header