css help needed

[stevennestler]

I just implemented the css dropdown menu for my site, and it works wonderfully. The only problem is that it intermittently is out of place on the page. If I click it a few times, it usually goes back in place.
(Please see attached).
I don't know enough css to fix this. Do I make the positioning absolute, instead of relative?

Thanks,
Steven

[gjh42]

Advising on styling issues like this from a screenshot is impossible. We need to see the site live to help you.

[stevennestler]

Hi, Glenn.
It's http://ahimsatradingcompany.com
The only problem being that it is intermittent; it happens maybe 1 out of 10 or so times.

Thanks,
Steven

[gjh42]

What browser are you seeing this on? Have you tested more than one browser? Okay, I have gotten it in Firefox.
You have this in stylesheet_header_menu.css (line 4)

div#dropMenu {
margin: -11px -20px 4px 20px;
position: relative;
text-align: center;
width: 979px;
z-index: 1000;
}

What is the odd margin set for? Removing that (or making it a straight 1px) fixes the issue immediately. Obviously I can't test to see if it fixes it on the next reload.

[gjh42]

This is what is actually in the stylesheet rule:

div#dropMenu {
   width:979px;
   margin:-11 -20 4 20px;
   text-align:center;
   z-index:1000;
   position:relative;
}

margin:-11 -20 4 20px; is invalid; you need units on any nonzero values, so the declaration is (usually) being ignored. For some reason, though, it occasionally gets applied with px values.

Try commenting out that line and see if any side effects turn up. Did you write that margin line, or did it come with the template?

[stevennestler]

Glenn,
Thanks. That worked. I had changed the original 0 15px. The 15px was giving me a problem, and I set about fixing it the wrong way. With everything zeroed out, it's fine.
Steven