[bojangles]

I’m working on an update to my company’s web site, and I’ve got an interesting problem:

I’ve created drop-down menus using CSS and hidden <div>s, and they look great in every browser—but only if there’s no scrollbars. To see what I mean, compare the splash screen to the products page. If there’s no scrollbar, the menus line up with their titles perfectly. When a scrollbar is introduced to the layout, everything (necessarily) moves to the left—everything except the drop-downs, which stay put. (In IE5 for Mac®, they don’t show up at all.)

I figure if I can just get the pages that don’t have a scrollbar to move over anyway—or if I can force them to display a useless scrollbar (yuck!)—I can design based on those dimensions.

Any suggestions?

[wallinbl]

The easiest thing to do would be to have your javascript that displays the drop down also set it's left property equal to the left property of the div tag that contains call to display the menu.

[redJag]

FYI, I just checked your site in PC Mozilla 1.3 and the menus are unusable. They render as you described, but as soon as I try to mouse down to an item, they disappear. Works fine in IE 6, though.

[bojangles]

wallinbl—

Sounds great, and that was actually what I originally wanted to do. Unfortunately, the call to display the menu isn’t based on a <div>; it’s based on the text within the <div>. Do you happen to know of any way to set that up? For that matter—this is probably a silly question, but—how would you set one layer’s position to be based on that of another? Is that where { position:relative } comes in?

Thanks again!

[bojangles]

redJag—

That’s weird. They work fine in Netscape 7.02 for both Mac OS X and Windows, as well as in Mozilla 1.2.1, Camino 0.7, and Phoenix 0.5 for Mac OS X. However, I get the same issue you mention in Mozilla 1.4RC1 for Mac OS X—sometimes.

Ah, the joys of coding for multiple browsers.

[ameat]

here's a chunk of javascript that i've used on a previous site ...

[PHP]
//--------------------------------------------+
// Align the left
//--------------------------------------------+
if (ie4) screenwidth = document.body.offsetWidth;
else screenwidth = window.innerWidth;
var leftAlign = (screenwidth >= 700) ? (screenwidth / 2) - 250 : 109;
if (ie4 || ns6)
{
var xPos = document.vertRule.offsetLeft;
var tempObj = document.vertRule.offsetParent;
while (tempObj != null)
{
xPos += tempObj.offsetLeft;
tempObj = tempObj.offsetParent;
}
}
else if (ns4) var xPos = document.anchors["vertRule"].x;
leftAlign = xPos - 116;
[/PHP]

basically, "vertRule" is the main image that i wanted to line the hidden divs up to, however to find its x value on the page, you have to continuously funnel up its parent chain to the top of the dom which will then contain the page relative x value. in netscape 4 this isn't necessary. i'll explain further (this was a cut and paste job...) if you don't get it...

also, the numbers in the first line are dependent on the site

[bojangles]

ameat—

I appreciate the code, but being the (very) amateur JavaScripter that I am, I only about half understand what’s going on. I assume that I should use leftAlign as the numeric value of left for #content, but you’re right: a bit more explanation would be helpful.

On a related note, can I put JavaScript in an external style sheet? I’ve never tried!

Thanks again!

[ameat]

Originally posted by bojangles:
ameat—

I appreciate the code, but being the (very) amateur JavaScripter that I am, I only about half understand what’s going on. I assume that I should use leftAlign as the numeric value of left for #content, but you’re right: a bit more explanation would be helpful.

On a related note, can I put JavaScript in an external style sheet? I’ve never tried!

Thanks again!

hmm, sorry about that assumption. let me explain:

Lines 1-3: since the page i created (as well as your page) are center aligned, the distance from the left edge of the screen to the div layer will fluctuate dependent on the user browser window size. however, at some minimum width (700px on the example page), the layout will be wider that the window and so won't move around anymore. this is the conditional check on the 3rd line.

Lines 6-12: OffsetLeft is the relative x-axis difference of displacement from its OffsetParent. So if you have only one div on a page, its OffsetParent will be the main body of the page. at the top of this hierarchy of OffsetParents is the null value. so basically, the while loop continues to chain up the hierarchy of OffsetParents until it reaches null. for each iteration, you want to compile the total OffsetLeft values which will give us the total left position of our original target div.

on your page, i would use the right edge of the s&s logo image as the reference point. so you find the overall OffsetLeft of the logo image and add to it its image width to find the position of the right edge.

once you have that value, you tell your div to reposition its x value to the right edge...in your case, you'd have to tell each drop down layer to do so...

i understand that this might still sound entirely too complicated given your javascript level, but i felt like i should put out a description for you anyways, in case you decide to come back to it at a later time.

i like your css approach but given the existence of stupid browsers (and my boss's desire to make things compatible in NS4) i've found that javascript and this method are the most reliable...but sloppy...

in regards to javascript in an external javascript, you can't do that but you can use the concept of a javascript include by doing the following:

[PHP]<script language="JavaScript" src="SCRIPT.js" type="text/javascript"></script>[/PHP]

it's a nice way to have one central code source (for stuff like drop down menus) and still have it on every page...the dreamweaver drop down code on your page would be a perfect candidate to be put into a separate file for inclusion...

[bojangles]

Actually, that does make a lot of sense. I guess I just underestimate my own understanding, sometimes.

That having been said, I do think I’m going to keep my css solution. I’m trying hard to keep it simple, and as I’ve gotten to thinking about it, I doubt there are any pages anywhere on the site (besides the splash page) that will ever appear without scrollbars. That being the case, I’m just going to reposition the splash screen by 10-15px and (hopefully) be done with it.

That is, of course, unless anyone else knows how to take care of the problem in css....

[ameat]

check this link out:
http://devedge.netscape.com/viewsour...e-redesign-js/

[bojangles]

Ameat— That link is great! Thank you! However, I do have one more question: I still think it’s easier to just reposition the drop-downs on the splash screen, since that’s the only one that’s having problems. Unfortunately, redefining the CSS for the layers in question in the &lt;head&gt; of the splash screen (after the &lt;link&gt; tag) isn’t working. How can I take care of this?