Something weird...Opera and AnyLink CSS Menu [Archive]

View Full Version : Something weird...Opera and AnyLink CSS Menu

Mel

09-25-2005, 06:58 AM

I just set up the AnyLink CSS Menu,

http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm

on a page and made it match the existing navigation bar. So far, so cool.

But in Opera (currently running version 8.02), the drop downs "drop down" way below the original navigation bar with the anchor links.

The page in question is http://atrakehner.com It looks right in IE6, Firefox, Netscape--at least in the versions I tried--so at this point I am thinking it is just an Opera thing.

The css I am using is:

.anylinkcss{
position:absolute;
visibility: hidden;
border: 2px solid #F0FAFE;
border-bottom-width: 0;
font-size: 11px;
font-family: verdana, arial, sans-serif;
font-weight:700;
line-height: 13px;
z-index: 100;
background-color: #E8F9FF;
width: 140px;
}

.anylinkcss a{
color: #0874BE;
width: 136px;
display: block;
border: 2px solid #F0FAFE;
padding: 1px;
text-decoration: none;
font-weight: bold;
}

.anylinkcss a:visited{ /*hover background color*/
background-color: #E8F9FF;
color: #0874BE;
}

.anylinkcss a:hover{ /*hover background color*/
background-color: #058ECE;
color: white;
border-style: outset;
text-decoration:underline;
}

Please let me know if I need to post the content of the anylink.js file...it is unmodified from the DD script.

Thanks so much to anyone who can shed some light on this! :)

jscheuer1

09-26-2005, 03:21 AM

I copied your page for a local example to work on. The css is extensive and disorganized looking. I found that if I added:

margin-top:-170px;to the .anylinkcss class declarations, it fixed things in Opera. Of course, this messed things up in IE and FF. So, I hit upon this solution, good for all three browsers that should only affect Opera - I inserted this script:

<script type="text/javascript">
if (window.opera)
document.write('<style type="text/css">.anylinkcss{margin-top:-170px;}</style>')
</script>Just above the closing </head> tag. The trouble appears to be the 170px top margin on the .wrap class. I'm not sure how else to work around that though, as without it, the page looks terrible in all three browsers. Unless you can find where the .wrap division may be missing a closing </div> tag, I'd just use the script.

jscheuer1

09-26-2005, 03:49 AM

Wait, I discovered that if you wrap the anylinkcss divisions in this red one:


<div style="z-index:100;">
<div id="mares" class="anylinkcss">
<a href="tara.html">TARA VOM CASTELL</a>
<a href="lottie.html">ITAMIGNON</a>
<a href="ani.html">TARIANA</a>
<a href="elfi.html">TANZELFE</a>
<a href="tarika.html">TARIKA</a>
<a href="twinks.html">ITANIKA</a>
</div>

<div id="sales" class="anylinkcss">
<a href="anifoal.html">TANZBRISE</a>
<a href="mick.html">TARYTHMIC</a>
<a href="mira.html">KASIMIRA</a>
</div>

<div id="album" class="anylinkcss">
<a href="elfifoal.html">TOUJOURS FÉLICITÉ</a>
<a href="lottiefoal.html">ITASOPHIA</a>
<a href="diva.html">TANZDIVA</a>
<a href="tess.html">TANZFEE</a>
<a href="maggie.html">ITAMIGA</a>
<a href="taz.html">ITARZAN</a>
</div>

<div id="pony" class="anylinkcss">
<a href="http://www.atrakehner.com/pokey/about.html">PAYDAY POKER</a>
<a href="http://www.atrakehner.com/pokey/showrecord.html">SHOW RECORD</a>
<a href="http://www.atrakehner.com/pokey/progeny.html">PINTO PONY FOALS</a>
<a href="http://www.atrakehner.com/pokey/breeding.html">AT STUD</a>
<a href="http://www.atrakehner.com/pokey/contact.html">BREEDING INFORMATION</a>
</div>
</div>and move them to just below the <body> tag, it seems to work fine in all three browsers too, without the added script. This solution would be preferable, I think.

Mel

09-26-2005, 04:33 PM

Thanks for the help! The CSS is a work in progress... ;)

Why do you suppose it works to add that as a style block, when the z-index is already part of the primary class specification?

jscheuer1

09-26-2005, 06:08 PM

That was only needed by IE. IE is often odd. But, overall this is a hack that fools each browser in a unique way to display the drop downs as you want them. FF needs the red division to have no position property, IE needs the z-index specified and OP needs it there in the first place. A better solution still, would be a total page rewrite that works 'as expected' from the beginning.