CSS - Css Drop Down Menu Gap (blank Space) When Scrolled Down...
I am working on a web page, and am all but done, but I am having one final problem with it. The css drop down menu works fine except for one issue... when you scroll down on one of the pages, and then go to the css menu bar a gap appears between the menu bar and the sub menu options that drop down.
How can I get this menu to always drop down DIRECTLY below the main menu bar without the gap? ___________ Here is the SpryMenuBarHorizontal css _____________ @charset "UTF-8"; /* SpryMenuBarHorizontal css - Revision: Spry Preview Release 1.4 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /******************************************************************************* LAYOUT INFORMATION: describes box model, positioning, z-order *******************************************************************************/ /* The outermost container of the Menu Bar, an auto width box with no margin or padding */ ul.MenuBarHorizontal { margin: 0; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: auto; padding-left: 0px; padding-right: 0px; position: relative; background-image: xxx; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: ul.MenuBarActive { z-index: 1000; } /* Menu item containers, position children relative to this container and are a fixed width */ ul.MenuBarHorizontal li { margin: 0; padding: 0; list-style-type: none; font-size: 16px; position: relative; text-align: center; cursor: pointer; width: ; float: left; background-image: xxx; padding-left: 0px; padding-right: 0px; } /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.MenuBarHorizontal ul { margin: 0; padding: 0; list-style-type: none; font-size: 100%; z-index: 1020; cursor: default; width: 8em; position: fixed; left: -1000em; background-image: xxx; padding-left: 0px; padding-right: 0px; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible { left: auto; } /* Menu item containers are same fixed width as parent */ ul.MenuBarHorizontal ul li { width: 9.2em; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul { position: absolute; margin: -5% 0 0 95%; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible { left: auto; top: 0; } /******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ /* Submenu containers have borders on all sides */ ul.MenuBarHorizontal ul { border: 0px solid #000000; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarHorizontal a { display: block; cursor: pointer; color: #2C2A2B; text-decoration: none; padding-left: 24px; padding-right: 24px; padding-top: .5em; padding-bottom: .5em; background-repeat: repeat; background-image: xxx; } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus { color: #FFF; display: block; } /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible { color: #FFF; display: block; } /******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************/ /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenu { background-image: XXX; background-repeat: repeat; } /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenu { background-image: XXX; background-repeat: repeat-x; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenuHover { } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover { background-image: xxx; background-repeat: no-repeat; background-position: 95% 50%; } /******************************************************************************* BROWSER HACKS: the hacks below should not be changed unless you are an expert *******************************************************************************/ /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */ ul.MenuBarHorizontal iframe { position: absolute; z-index: 1010; } /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */ @media screen, projection { ul.MenuBarHorizontal li.MenuBarItemIE { display: inline; f\loat: left; background: #FFF; } Thank you so much for your help, I have a deadline that is coming up very quick... I'd appreciate any help I could get. _______________ my css is sloppy , but at this point with the deadline approaching, I really just need to get this to work properly, and I have a feeling its as simple as a few lines of code changed.... Similar TutorialsCode: <form action=""> <div> <select id="about_menu" name="about_menu" onchange="window.location.href=this.form.about_menu.options[this.form.about_menu.selectedIndex].value;" title="Go to About pages"> <option value="">About</option> <option value="http://myblog.com/about-the-blog/">About The Blog</option> <option value="http://myblog.com/welcome/">Welcome</option> </select> </div> </form> I use <option value="">About</option> as self labeling. I would like the width of the form to be so that there won't be a blank after About even if other options are longer. The issue is that About is going to be translated in several languages and thus I can't rely on a determined value for the width. I'm very new to doing my own custom CSS, so please bear with me. I have a feeling I am missing something obvious... A space of about 22px height is appearing below my nav bar, which itself is 22px high, but is otherwise working fine. I can't figure out what code is causing the space to appear where I don't want it (just under the #page-nav and just above the #page-content). I'm not sure how to link to my test site, as the forum does not allow new members to link to urls... I can put it in a code tag, but I don't want to 'cheat' the rules... Let me know if that's okay... (the html and css is too long to post here) (P.S. Many, many, MANY thanks to anyone who can help me figure out this puzzle!) The website I created has a large blank space at the bottom. I want 30px between the bottom and the layout. At the top, I could create the space I want. Margin-bottom: 30px doesn't do the trick. I tried so many things but I just can't get it fixed. I think something is set too height or something? If someone could figure it out, I would be forever grateful! You can check out the site and css he I can't post the url because I'm a new user Can a mod post my url? EDIT: I have set the url as my homepage in my profile! Just click my username to check out the site. Here is the site: http://wildlife. kinetic-designs. n et/ I was modifying a wordpress theme and somewhere in there i must have changed something, but now I have an unexplainable horizontal scroll bar as well as blank space off to the right of the screen. Can someone help me explain this phenomenon ?? i am using display:none to hide two divs, but the space where they are located still remains... but only in firefox... here is a link... it happens when you click on one of the tabs at the bottom of the box... 15 Games thanks for any help. Hi, I'm new here and hope someone can help! I wasn't sure whether to post this in the CSS or Flash forum; it's a problem caused by Flash which I suspect needs some clever CSS to resolve. My new website is carolineofbrunswick (dot) co (dot) uk. As you can see, there's a ton of blank space off to the right of the pages, and I can't figure out how to get rid of it. It's caused by the Flash objects in the right-hand column. Changing the width attributes on those Flash objects just causes them to not appear at all, though the blank space still exists. Can anyone help? Cliff Hello everyone, I have a drop-down menu that is currently working well. The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned. I want the menu to "drop" down and to the left, so the right edges are aligned. I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed. Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use. Thank you! Here is the page: http://www.littlebuddymedia.com/site05/012.html The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG Here is my code: Code: .chromestyle{ width: 100%; font-weight: bold; float: left; height: 29px; } .chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/ content: "."; display: block; height: 0; clear: both; visibility: hidden; } .chromestyle ul{ border: 0px solid #BBB; width: 100%; background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/ padding: 4px 0; margin: 0; text-align: right; /*set value to "left", "center", or "right"*/ } .chromestyle ul li{ display: inline; } .chromestyle ul li a{ color: #000000; padding: 4px 7px; margin: 0; text-decoration: none; border-left: 1px solid #DADADA; } .chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/ background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/ } /* ######### Style for Drop Down Menu ######### */ .dropmenudiv{ position:absolute; top: 0; border: 1px solid #BBB; /*THEME CHANGE HERE*/ border-bottom-width: 0; font:normal 12px Verdana; line-height:18px; z-index:100; background-color: white; width: 200px; visibility: hidden; } .dropmenudiv a{ width: auto; display: block; text-indent: 3px; border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/ padding: 2px 5px; text-decoration: none; font-weight: bold; color: black; } * html .dropmenudiv a{ /*IE only hack*/ width: 100%; } .dropmenudiv a:hover{ /*THEME CHANGE HERE*/ background-color: #0000ff; color: #fff200; } Hi, my css drop down menu seems to be working fine in firefox, but there are a few problems in IE. It didn't even work in IE7 until I added Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 1. In IE7, if you first hover over the link to get the drop down menu to show, move away, then hover over the menu again, it will show the blank sub menus of the one you last have opened. This is hard to explain. Please see my webpage for what I mean. http://ling.twinner.com.tw/uselink/index.php Move your mouse to the Products link at the top. 2. My menu seems to load slow. Is it because I have many sub menus or is my css not efficient? 3. How do I set the sub menu height to auto? Here is my css: http://ling.twinner.com.tw/uselink/menu_style.css Any suggestion is greatly appreciated. Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like: Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Now clicking [+] in front of Google.com will look like. Code: . Ask.Jeeves . [-] Google.com . Google.co.ie . Google.co.ie . [+] Google.co.nz . [+] Yahoo.com Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e. Code: . Ask.Jeeves . [-] Google.com . Google.co.ie . Google.co.ie . [+] Google.co.nz . [+] Yahoo.com Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e. Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting. Here is the source for the above: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/> <meta http-equiv="content-language" content="en"/> <title>Test Harness</title> <style type="text/css"> ul li ul {display:none;list-style-type: none;} #myNav li a:hover { color: blue; } #myNav li a:active { color: #FF0000; background: #FFFFFF; } #myNav { list-style-image: url(page.GIF); } </style> <script type="text/javascript"> <!-- function initNav() { var navObj = document.getElementById('myNav'); var ulCollection = navObj.getElementsByTagName('li'); for (var loop = 0; loop < ulCollection.length; loop++) { if(ulCollection[loop].getElementsByTagName('ul').length > 0) { /* we have an LI that contains a UL */ if (ulCollection[loop].getElementsByTagName('span').length > 0) { /* there is at least one SPAN tag present */ ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] "; } } } } window.onload = initNav; //--> </script> </head> <body> <ul id="myNav"> <li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li> <li><span></span><a href="http://www.google.com">Google.com</a> <ul> <li><a href="http://www.google.co.uk">Google.co.uk</a></li> <li><a href="http://www.google.co.ie">Google.co.ie</a></li> <li><span></span><a href="http://www.google.co.nz">Google.co.nz</a> <ul> <li>*3*</li> <li>*4*</li> </ul> </li> </ul> </li> <li><span></span><a href="http://www.yahoo.com">Yahoo.com</a> <ul> <li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li> <li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li> </ul> </li> </ul> </body> </html> Any help is really appreciated thanks. EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears. (My drop down is vertically aligned on the left.) (bits of the code that relate to the menu) PHP Code: .btn1 { position: absolute; left: 165px; top: 200px; } .btn2 { position: absolute; left: 165px; top: 240px; } .btn3 { position: absolute; left: 165px; top: 280px; } .btn4 { position: absolute; left: 165px; top: 320px; } .btn5 { position: absolute; left: 165px; top: 360px; } .btn6 { position: absolute; left: 165px; top: 400px; } .btn7 { position: absolute; left: 165px; top: 440px; } .btn8 { position: absolute; left: 165px; top: 480px; } .link1 { position: absolute; left: auto; top: 240px; } .link2 { position: absolute; left: auto; top: 280px; } .link3 { position: absolute; left: auto; top: 320px; } .link4 { position: absolute; left: auto; top: 360px; } .link5 { position: absolute; left: auto; top: 400px; } .link6 { position: absolute; left: auto; top: 440px; } .link7 { position: absolute; left: auto; top: 480px; } .link8 { position: absolute; left: auto; top: 520px; } .link9 { position: absolute; left: auto; top: 560px; } #nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav a { display: block; width: 100px; } #nav li { width: 100px; } #nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; } #nav li:hover ul { display: block; left: 266px; z-index: 3; } #nav li:over ul { display: block; left: 266px; z-index: 3; } PHP Code: <ul id="nav"> <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li> <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a> <ul> <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li> <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li> <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li> <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li> <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li> </ul> </li> <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a> <ul> <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li> <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li> <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li> <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li> </ul> </li> <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a> <ul> <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li> </ul> </li> <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a> <ul> <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li> <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li> <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li> </ul> </li> <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a> <ul> <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li> <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li> </ul> </li> <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li> <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li> </ul> <script type="text/javascript" src="drop_down.js"></script> the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later. link: The Page Hi, I dont have much hair left as I've been trying to sort this problem with no success for some time. I feel it shold be quite straight forward but I'm pretty new to css. The page can be seen at - http://www.clivesefton.co.uk/temporary-files/index7a.html It's utilising external css and js files - http://www.clivesefton.co.uk/temporary-files/css/navlist7a.css http://www.clivesefton.co.uk/temporary-files/drop_down.js This appears fine in IE6, Mozilla, Opera but the drop-downs have white space and are strangely spaced in IE5. Any help would be appreciated, thank you. Hi all, I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear. You can find the page he http://www.perceptes.com/topdog/ The CSS and JS (uses jQuery) can be found he http://www.perceptes.com/topdog/css/screen.css http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment) http://www.perceptes.com/topdog/js/tdps.js http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment) For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look. Thanks very much in advance! Hi, Can somebody tell me why the menu on the url below needs so much space between menu items? (between the home, browses, forms, pages). Maybe a margin / padding problem, but I cannot seem to find it. The URL: http://www.genwise.com/temp/ordersbrowse.aspx.htm Thank you! -- Fizgig2 Hello, if you go to: http://tombraiders.net/katie/Site/index.html you'll see that the items in the menu aren't spaced evenly. I've tried to put some padding underneath but it doesn't appear to be working. I would like it if they were all evenly spaced, because some of the text (where there's two lines of text) is quite cramped. The CSS file can be found here Thanks! I'm using a menu from CSSPlay, and I have it working. http://www.wattersisere.co.uk/devshed It also works for browsers with 800x600 screens. However, as you can see the menu items on the top bar are close together (2 * 11px). I am wanting to increase the spacing between them depending on the browser size. Maybe a % would be appropriate, any other ideas would be super. Alternatively, I could increase the spacing between them to an aesthetically pleasing size and then force the smaller browsers to have a horizontal scrollbar. What would I have to make this work, or would you not recommend it? Thanks, Watters Hi, I have the following code and under the main menu, it's a space as you can see under Contact for example for the entire menu. If I want to move down the menu with margin-top, the bottom will exceed the bottom of logo.png image. How do I insert an image here ? http :// imageshack.us/photo/my-images/600/44485569.jpg/ this is css code body { margin: 0; padding: 0; border: solid 1px black; } #nav { position: relative; margin: 0px auto; width: 960px; padding: 10px 0px 10px 0px; border: solid 1px red; } ul { list-style-type: none; margin: 0; padding: 0; font-family: Georgia; font-size: 21px; } ul a { text-decoration: none; padding-left: 25px; padding-right: 25px; display: block; color: #843bbb; } ul a:hover { color: #bd66ff; } ul a:visited { color: orange; } li { float: left; } How can I achieve same positioning with logo on left side, menu on right side, and I want somehing like an add in the middle using float and divs and not a table ? Thanks. I have ads on the side of my website that when clicked open a div with a larger ad. The problem is that if a user has scrolled the page down and then clicks the ad, the div shows at the top of the page out of view, how can I fix this. I have tried position:fixed, relative and inherit as well as absolute but nothing works. Tim I working on a CSS to display a round-shouldered-tab menu. My result is acceptable: http://rickduley.webs.com/roundShoulderTabMenu.jpg except for the fact that the tabs are set below the menuBar on which the are supposed to display. I have run out of ideas. Would someone please set me on the right path? Thanks. P.S.: the code is at http://rickduley.webs.com/roundShoulderTabMenu.zip.kgb - you have to delete the 'dot key gee bee' suffix. I have the following code in my style sheet: body { background: url('../../docks/images/dock2_fade.jpg') no-repeat fixed center 35%; } which displays correctly. However, the pages using this style sheet are displayed in a frame and when I scroll the page any text blurs until it is unreadable. If I display the pages outside of the frame then it all works perfectly. Can any one shed any light as to why this is happening? Jeni |