PDA

View Full Version : AnyLink CSS Menu throws off absolute positioning



xerigen
08-12-2007, 10:34 PM
1) Script Title: AnyLink CSS Menu

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

3) Describe problem: On my page, I have absolute positioning relative to the wrapper (container). This causes the drop down menu to look fine in 1024x768 (what the design was designed for), but appear to the right of the rollover when scrolling over the image in any other resolution. If I get rid of the relative positioning of my wrapper, the absolute positioning looks good in 1024x768, but is not positioned correctly (it appears to the left of where it should be) in any other resolution because it's positioned relatively to the left most edge of the screen, but then the menus all go below the correct images as the script intends.

How can I make both work? The page in question is located at http://autolevel.mygamesonline.org/testingdropmenus.html . If you are on a resolution other than 1024x768 you will notice the drop down menu does not show up below the correct rollover, making the links unclickable. The only absolute positioning I have relative to the wrapper is on the right hand side, and includes "PvP Stats" and the content below it, "Multimedia" and the content below that, and "Community" and the content below that.

I've searched through about 10 pages of anylink css menu problems, I've tried commenting out a line in the .js file, but that still didn't look right in most resolutions. I've been working on potential fixes for nearly 4 hours now, and ANY help with be GREATLY APPRECIATED! Thanks!

EDIT: Well I kind of fixed it, but not how I wanted. I got rid of +obj.offsetHeight+"px" in js file, and then I put all of the divs for the drop down menu outside of the wrapper so they weren't positioned relative to the wrapper, but then I had to add more absolute positioning for the menu to be positioned below the top banner where it should be. This is a really sloppy fix and if anyone still has some advice how I should fix it properly, I'd appreciate that.

EDIT2: Disregard my last edit, because when I centered the div that wasn't wrapped by aligning it 50% from the left and -455 margin-left (half the width) to center it, the menu did the same as it did before I changed all this mess. So help is still needed. Thanks.

EDIT3: Now, after changing the align from left to right in the anylink.js file, everything aligns perfectly in all firefox resolutions (as far as I know), but I'm still having the original issue in Internet Explorer. I've been working on this literally all day and any help would be appreciated.

ddadmin
08-13-2007, 06:49 AM
In most cases of problems caused by your layout consisting of absolute and relative positioning, the way to solve it is to move the drop down DIVs of the script outside this layoout, such as to the bottom of your page, right above the </body> tag. In your case, something like:


<!-- End Wrapper -->

<div style="visibility: hidden; left: 45px; top: 201px;" id="download" class="anylinkcss"><a href="http://www.xenimus.com/&#37;7Exenimus1/files/Xen.exe">-Main Installer</a><a href="http://www.xenimus.com/%7Exenimus1/files/Xenupdate.exe">-Update Installer</a><a href="http://msdn2.microsoft.com/en-us/xna/aa937781.aspx">-DirectX</a><a href="http://www.xenimus.com/%7Exenimus1/files/gladius.zip">-Gladius</a></div><!--end download anchor link and menu -->

<div style="visibility: hidden; left: 185px; top: 201px;" id="news" class="anylinkcss"><a href="http://xenimus.com/GAMEINFO.HTM">Game Messages/Update Info</a><a href="http://xenimus.com/WritXen.htm">Writing Xenimus</a></div><!-- end news anchor link and menu -->

</body></html>

With the above I've moved two of them, but you should move the rest of your drop down DIVs as well.

p.s: Since you've modified the original anylink.js file, you should revert back to the original file (http://dynamicdrive.com/dynamicindex1/anylink.js).

xerigen
08-13-2007, 08:23 PM
That works brilliantly! I don't exactly know why, nor do I care at this point. The whole website is still messed up in IE5 (only .4&#37; of our users use it, anyways), but I'm pretty sure it's not because of the top menu. Thanks sooooo much!