javascript interfering with CSS

Will the following javascript:

function openDrawer(obj) {
			var el = document.getElementById(obj);
			if ( el.style.display != 'none' ) {
				el.style.display = 'none';
			}
			else {
				el.style.display = '';
			}
		}

Code (markup):

interfere with the following attempt at using the "Pixy method" (see wellstyled.com/css-nopreload-rollovers.html for explanation of Pixy method):

<div id="faq-content" class="clear_left">
	<h1>Frequently Asked Questions</h1>
	<p class="faq"><a onclick="openDrawer('faq_ans_1');">Who can join?</a></p>
	<div id="faq_ans_1" class="faq_ans" style="display:none;">
		<p>
		FAQ Answer content...
		</p>
	</div> <!-- END #faq_ans_1 -->

HTML:

where the following external CSS produces the Pixy method of swapping images (the image being one of those triangular arrows that indicate something can expand or collapse and changes colour upon hovering):

#faq-content a {
	background: #fff url(Images/faq_arrow.gif) no-repeat left top;
}

#faq-content a:hover {
	color: black;
	background-position: 0 -16px;
}

Code (markup):

The method above fails to display the arrow image in the background although it does effectively control the background colour. If I insert the background-image style directly into the <p class="faq"> tag above, it displays the image but if I insert it directly into the <a> tag (where I want it)then still nothing happens. I feel like the "onclick" javascript call in the <a> tag is interfering somehow but it doesn't really make sense that it would do so. My knowledge of javascript is close to nil so I have no idea for sure. I wasn't sure to post in the CSS or javascript forum. Let me know if this isn't the appropriate place.

 

Eh, I've never seen a moderator here so I don't see why you couldn't also post this in Javascript... although I dunno what answer you'll get there...

Have you tried removing the background colour from the <a> and putting it on the <p> if you must have a background colour? Sometimes the background colour covers things up unexpectedly.

If you think it's the onClick, then simply remove it or comment it out and look at the page. If the background image magically appears, then you would at least know that it WAS the onClick (though I also can't see why an attribute added to an <a> would change it's other CSS properties... it shouldn't).

 

There's a neat trick for rotating triangles on hover as long as you don't need fancy ones. Use the triangles in Webdings. No kidding. No graphics. All browsers have webdings so it really works for plain triangles.