PDA

View Full Version : 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!

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:

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 "//"):


//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:


.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:

1403

-Chris

ddadmin
11-20-2007, 09:55 AM
Hi Chris:
Try removing the line:


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

1408

kickinmusician
11-20-2007, 08:13 PM
I was able to get it working and it looks great now! It was a CSS issue as I had suspected. Thanks again for all your help!

-Chris

harrycanary
04-16-2010, 08:41 PM
How can you do the same thing in v.2.5? Getting the drop downs to only drop downward and never upward?