The Ferrett wrote: > I'm working on a table-free layout with jQuery-based drop-down megamenus > (which have a hover-based trigger that displays a panel). The menus are > ULs, though to make it fit underneath the logo they're contained in a DIV > set to a "display: inline" (since otherwise, it doesn't validate). > Though the page now validates, it's running into two problems in separate > browsers. > http://www.starcitygames.com/SCG_6/test.html > > In FIREFOX, the menu displays fine, but displays another line just > below it > - a narrow strip the height and background color of the menu that drops > everything else down. I'm not sure why this is happening. > > In IE, if you hover your mouse over the "Buying Cards" link and see the > (horrifically styled) drop-down panel, you'll note that the author in the > text underneath the panel ("The Ferrett") bleeds through into the actual > panel, even though the z-index on the panel is set to 10,000. This > could be > a JavaScript issue, but I think it's CSS-related. > In CHROME, OPERA, and SAFARI: No problems. > Any ideas? The relevant markup and CSS is below, though obviously the > whole > page can be visited. > Thanks in advance! [...]
Can't answer the IE problem from this computer, but the problem in Firefox seems to be with the navigation_bar div. Setting the border to 0px eliminated the line, and reducing the margin to 0px eliminated the extra space. I'm not sure what your intentions are for these values, as my removing them seemed to produce no visual effect in Chrome or Safari, but it's possible removing them might fix your problem. Sincerely, Dan Gooch ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
