CSS Chrome Menu: Positioning Problems

**kickinmusician** · 11-07-2007, 08:13 PM

1) Script Title: Chrome Menu (2.01)

2) Script URL (on DD): ???

3) Describe problem: I am having two problems, one is with FireFox and the other occurs in both FireFox and IE7.

a) The positioning of my chrome bar is set fine horizontally (using my
CSS), but vertically it acts very funny. If I scroll down a little bit and
then mouse over my link, the drop down menu appears below it just fine.
But if I mouse over the link without scrolling down at all, the drop down
menu starts at the very top of the page. If I remove "position:absolute;"
it pushes everything down and the menu moves to the left. I want the
drop down menu to stay exactly where it's at horizontally but to vertically
come down from the first link, not the top of the page.

b) In FireFox, an added problem occurs. On top of not being positioned
correctly (see above), it displays an empty white box with no links in it.

I have attached a compressed folder (.zip) with my html and css code, please let me know if any other information is needed so I can get help with this!

Attachment 1392

Thanks!

**kickinmusician** · 11-13-2007, 02:08 AM

I posted my question almost a week ago...just wondering if I will get a reply soon. I am using this on a Web site that I am doing for a class project, and it is due the first of December.

I wonder if the reason I haven't gotten a reply is because I did not know what to put for "Script URL (on DD):"

I copied this from someone else's post, and I believe it corresponds to the same script I am using:

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

Thanks in advance to anyone who can help...

**ddadmin** · 11-13-2007, 10:36 AM

Do you have a URL to the problem page (even if temporary) on your site? It's easier to test out the script with all the pieces in place.

**kickinmusician** · 11-16-2007, 12:27 PM

I included the .html page in the .zip folder I uploaded in my original post, but I did not have the pictures in there and the files organized correctly so you could see the page the way it is supposed to look. I believe if you open this folder you will be able to see my page properly and you will see what I mean about the chrome menu shifting up to the top of the page. What I think is weird is that if you scroll down a little bit and then mouse over the chrome menu it comes down just like it's supposed to. Thanks for offering to help...

-Chris

Here are the files:

Attachment 1402

**ddadmin** · 11-16-2007, 11:23 PM

I see what you mean. Actually, the menu sometimes appearing at the very top of the page is normal, since it does this if it detects there isn't enough visible space below to drop down the menu, as is the case here depending on how you scroll the page. Anyhow, if you wish to disable this, so the menu always drops down, just comment out the below lines inside the script (add "//"):

Code:

//if (windowedge-this.dropmenuobj.y < this.dropmenuobj.contentmeasure){ //move up?
//edgeoffset=this.dropmenuobj.contentmeasure+obj.offsetHeight
//if ((this.dropmenuobj.y-topedge)<this.dropmenuobj.contentmeasure) //up no good either?
//edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
//}

p.s: Inside chromestyle.css, you have a "margin: 124px" line:

Code:

.dropmenudiv{
"
"
margin: 124px;
}

Not sure if this is intentional, but it probably makes more sense visually to remove it.

**kickinmusician** · 11-17-2007, 08:28 AM

Thanks a lot, it looks wonderful in IE now!

I do still have one problem though...I have a feeling it has to do with something in my CSS, but in both Opera and FireFox the menu does not look right and the drop down is only white with no links/text in it.

As for the 124px margin, that was intentional because I could not get the box to drop down from the middle of my menu text when testing it in IE7. I tried removing it and the box drops down too far to the left of my text, so I put it back. I have a feeling that margin might be the cause of part of my problem in Opera/FireFox, but I don't know how to specify that it is needed only if the user is running IE. Is there a way to do that? I think I've seen it done before on a forum somewhere (browser-specific formatting) but I don't know how to do it myself. I am supposed to have my page looking as good as possible in Opera, FireFox, and IE for my class project, which is why I am trying to figure out how to fix this. I eventually plan to publish it as well so that is another reason.

I really appreciate your help, and any further assistance you can offer if it isn't too much trouble.

Here are my updated files:

Attachment 1403

-Chris

**ddadmin** · 11-20-2007, 09:55 AM

Hi Chris:
Try removing the line:

Code:

visibility:collapse;

inside chromestyle.css

**kickinmusician** · 11-20-2007, 06:22 PM

Thanks, that at least gets the drop-down menu working in FireFox and Opera! The only thing left is that the text that you hover on is showing up wrong. I think it has something to do with some CSS modifications I made in my style.css file, so I'll see if I can figure it out. If anybody has time to take a look at it though and see what it's doing in FireFox, I'd sure appreciate it!

Thanks again DDAdmin, I don't think I ever would have figured this out without your help!

-Chris

Attachment 1408