7 replies [Last post]
WebDragon
Offline
newbie
Delaware USA
Last seen: 18 years 21 weeks ago
Delaware USA
Timezone: GMT-5
Joined: 2004-07-15
Posts: 5
Points: 0

I have a site I'm working on at http://www.allclassics.com/ and am trying to move the silly looking links below the navbar into a drop-down menu below the Products button.

Having worked with several examples, I keep running into problems when I try and incorporate the site's styling into the drop-down properly.

with http://www.webdragon.net/dropdown_test.htm I've somewhat hybridized the various examples I've looked at, but am having trouble with the drop-down.

the drop-down overlays the navbar instead of appearing below it, and the links in the drop-down are displaying inline instead of as a block.

I've been poking at the css for a few hours now and am about ready to give up. Any assistance would be appreciated.

I haven't even given a lick of consideration to testing this in IE yet, as I cannot even get it to work in Firefox properly. *sigh*

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

drop-down menu assistance

Hi WebDragon,
Try this:

#navlist li ul {margin-top:2em;} 
#navlist li ul li{ float:none;  display:block;} 
#navlist li ul li a{float:none; text-align:left;}


Hope that helps

WebDragon
Offline
newbie
Delaware USA
Last seen: 18 years 21 weeks ago
Delaware USA
Timezone: GMT-5
Joined: 2004-07-15
Posts: 5
Points: 0

re: drop down assistance

ok that got it working in firefox although the margin-top bit makes the menu disappear when you go to mouse-over it if you alter the font-size via the browser's text-size option since it leaves a gap below the navbar.

Still wonky in IE though. At first the menu appeared all the way to the left of the screen. I added the IE7 behaviour hack and that fixed a little bit. I also had to add list-style: none; so that IE would refrain from displaying the bullets in the menu, however IE still right-aligns the menu text. Stare

I've moved the example to www.allclassics.com/dropdown_test.php so I can take advantage of the IE7 behaviour hack from http://dean.edwards.name/IE7/

Can anyone else offer any suggestions as to how to get this to display properly in IE as well as Firefox ?

WebDragon
Offline
newbie
Delaware USA
Last seen: 18 years 21 weeks ago
Delaware USA
Timezone: GMT-5
Joined: 2004-07-15
Posts: 5
Points: 0

no more answers ?

I'm kinda surprised no one else responded to this as I still haven't come up with a solution.

Can anyone offer any assistance with 'fixing' this for IE ?

Again, the current test page is at http://www.allclassics.com/dropdown_test.php

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

drop-down menu assistance

Hi WebDragon,
I don't know enough about the IE7 project to know what works and what doesn't.
Wouldn't it be easier and more forward compatable to use JavaScript?

WebDragon
Offline
newbie
Delaware USA
Last seen: 18 years 21 weeks ago
Delaware USA
Timezone: GMT-5
Joined: 2004-07-15
Posts: 5
Points: 0

javascript? yeah we got that

well if you looked you would see the javascript from the suckerfish dropdowns already in place.

IE7 was tried only because of the failure of the dropdown to work properly. I know the suckerfish dropdowns work for MSIE 6.x, so I can't quite figure what I'd gone and done wrong.

Again, any assistance with straightening out the CSS would be appreciated.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

drop-down menu assistance

Hi WebDragon,
Your right, I'm a lazy git Smile

Try setting the top UL to position:relative;#navcontainer ul {position:relative;}

Hope that helps

WebDragon
Offline
newbie
Delaware USA
Last seen: 18 years 21 weeks ago
Delaware USA
Timezone: GMT-5
Joined: 2004-07-15
Posts: 5
Points: 0

#navlist margin issue

ok I've made the change and am trying to talk someone into testing it for me now.

However I've noticed another issue -- the

#navlist li ul {
    margin-top: 2em;
}

causes a gap between the navbar and the menu in firefox. The problem worsens when you change the font-size in the browser. Now I had been under the impression that I wouldn't need this once I dropped the relative positioning in where it belonged, but if I remove it, firefox positions the submenu DIRECTLY over the navbar, obscuring the Products link.

now I had also been under the impression that

#navlist li>ul {
    top: auto;
    left: auto;
}
was there to prevent this from happening, as it is a work-around for yet another MSIE bug.

What's going on here ?