CODEWITHSUNDEEP
jqueryaccordion
Ashley Briscoe
Ashley Briscoe

Reputation: 737

Can't line up icons for jquery ui accordion

I can't get the icons to line up with the text here is the fiddle: jquery accordion

I am happy with the rest of the code just need to line the icons up, I have tried targeting the span tags created with the icon in by jquery with no avail am I missing something.

Upvotes: 0

Views: 870

Answers (3)

RJD22
RJD22

Reputation: 10340

You should float the icons left. That way they won't influence the a. http://jsfiddle.net/kZkTV/4/

.closedacc { background: url(http://www.somesite.com/dataimages/static/faq/menuarrow-blue.jpg) no-repeat 0 9px; padding-top: 2px; padding-botttom: 2px;  padding-left: 18px; float: left; width: 16px; height: 16px;}

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191729

http://jsfiddle.net/kZkTV/2/

I changed the #helpmenu h3 a to display: inline-block instead and added vertical-align: middle. This should work unless you need to support very old IE versions.

You may also want to do some small updates to the padding here or there, especially to :first-child (a CSS2 pseudo-class).

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

Change the display: block to display: inline-block here:

#helpmenu h3 a {  padding-right: 5px; color: #666; display: inline-block;  padding-top: 8px; padding-bottom: 8px; text-decoration: none; padding-left: 18px;}

And also remove the padding-left. Also, use this for IE 7 compatibility:

*display: inline; *zoom: 1; /* Display Inline Block in IE 7 */

Updated Fiddle: http://jsfiddle.net/kZkTV/3/

Upvotes: 1

Related Questions