Anchor Links won't stay in the same place in different browsers

[BelowZero]

1) Script Title: AnyLink CSS Menu v2.2

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...anylinkcss.htm

3) Describe problem: I used this menu and it looks great in IE8, but when viewed in Safari 3.2.2 the anchor links aren't where they're supposed to be. They are all below where I placed them when designing the page. Any suggestions??

www.hpc.esu7.org/website/test/test.html

Thanks.

[ddadmin]

Actually for me, in all browsers I tested, it's the anchor links that appear out of place, below the button interface they are supposed to be contained inside. The drop down menus, however, do drop down properly directly beneath the anchor link. Here's a screenshot of what I see in say FF3.x:



This includes Safari 4.x for Windows. I haven't had a chance to test it in Safari 3.x yet.

[jscheuer1]

Your page is a mess - at least insofar as it isn't coded according to standards. As a result, there can be little certainty how one change meant to improve things in one browser may affect how things look in another browser. I'd suggest validating the HTML to a valid URL DOCTYPE, and the css to CSS2 standards.

That said, the problem you are describing was also evident here in Firefox. Using its developer extension, I was able to see what adding this style:

p {
 margin: 0;
}

to the page's stylesheet would do - It fixed the problem in that browser. So give that a try, if were lucky it will solve all your problems in this particular regard.

[BelowZero]

Well, I'm not well-versed in programming. I'm just using a WYSIWYG program to make this page, so I'm at their mercy as far as the coding goes. So I'm not surprised you consider this page a mess. That being said, where would I insert the code you provided? I've tried to insert it in the stylesheet, but with no results. Thanks.

[jscheuer1]

Instead of:

.anylinkcss ul{
p {
 margin: 0;
}
margin: 0;
padding: 0;
list-style-type: none;
}

do it like so:

p {
 margin: 0;
}
.anylinkcss ul{
margin: 0;
padding: 0;
list-style-type: none;
}

[BelowZero]

Many thanks, John. I believe that fixed it for me.