|
CSS - Css Dropdown Problems
Hi. I'm trying to create a dropdown menu using some code from son-of-Suckerfish. It's simple enough in concept - just a few lines of Javascript
<!-- SON OF SUCKERFISH DROP DOWN MENU --> <script type="text/javascript"><!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]></script> </head> <body> <!-- Open Wrapper --> <div id="wrapper"> <!-- Open Header --> <div id="header"> </div> <!-- Close Header --> <!-- Open Menubar --> <div id="menubar"> <ul id="nav"> <li id="home"><a href="../home">Home</a></li> <li id="aboutus"><a href="../aboutus">About Us</a> <ul> <li id="aboutus2"><a href="#meetthestaff">Meet the Staff</a></li> <li id="aboutus2"><a href="#healthyeating">Healthy Eating</a></li> <li id="aboutus2"><a href="#ourcharity">Our Charity</a></li> </ul> </li> <li id="daynursery"><a href="../daynursery">Day Nursery</a> <ul> <li id="daynursery2"><a href="#dormice">Dormice & Hedgehogs</a></li> <li id="daynursery2"><a href="#sensory">Sensory Room</a></li> <li id="daynursery2"><a href="#activity">Activity Room</a></li> <li id="daynursery2"><a href="#outdoor">Outdoor Area</a></li> </ul> </li> <li id="preschool"><a href="../preschool">Pre-School</a> <ul> <li id="preschool2"><a href="#rabbits">Rabbits & Squirrels</a></li> <li id="preschool2"><a href="#montessori">Montessori Room</a></li> </ul> </li> <li id="parents"><a href="../parents">Parents</a> <ul> <li id="parents2"><a href="#news">News and Events</a></li> <li id="parents2"><a href="#parentspartnership">Parents in Partnership committee</a></li> <li id="parents2"><a href="#testimonials">Testimonials / references</a></li> <li id="parents2"><a href="#ofsted">Ofsted</a></li> <li id="parents2"><a href="#swapshop">Swap Shop</a></li> </ul> </li> <li id="contact"><a href="../contact">Contact</a> <ul> <li id="contact2"><a href="#findus">How to Find Us</a></li> <li id="contact2"><a href="">Our Prospectus</a></li> </ul> </li> </ul> </div> CSS code is: @charset "utf-8"; /* Design by Creative Media Heroes littleowlsnursery/devsite */ * { padding: 0; margin: 0; } body { font-family: Verdana, Arial, sans-serif; font-size: 11px; margin: 0; padding: 0; color: black; } .nurserycol { color:#000;} .preschoolcol { color:#000;} .parentscol { color:#000;} #wrapper, #header, #menubar {width: 775px; margin: 0; padding: 0;} /*#wrapper, #header, #infobar, #menubar, #menubar2, #optionbox, #sidebar, { display:inline;}*/ #header, #infobar, #menubar, #content{ float: left; } #wrapper { border: 1px solid #FF3300; border-top: none; border-bottom: none; background-color: white; margin: 0 auto; } #header { height: 274px; background:url(../images/lon-head-temp.jpg) no-repeat; } #content { clear: both; width: 650px; margin: 0 0 0 0; padding: 15px 0 15px 0; min-height: 400px; /*border-right: 1px solid #CCC;*/ } #sidebar { float: right; margin: 0px 0px 5px 0px; padding: 0px; height: 335px; width: 120px; background: #E7DBD5; } #rightcolumn { float: right; color: #333; margin: 15px 0 0 0; padding: 0; width: 120px; display: inline; /*height: 480px; background: #E7DBD5;*/ } img.left { float: left; } img.right { float: right; } /* Dropdown menu*/ #nav { float: left; width: 775px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; list-style: none; line-height: 17px; clear: both;} #nav li { height: 50px; } #nav li a { float: left; ; height: 0; padding-top: 50px; overflow: hidden; } /*#menubar ul, #menubar ul a { background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; }*/ #nav ul { float: left; padding: 0; margin: 0; list-style: none; line-height: 17px; color: white; } #nav a { display: block; width: 105px; list-style-type: none; } #nav li { float: left; width: 105px; color: white; line-height: 17px; } #nav li ul { position: absolute; color: white; width: 105px; left: -999em; line-height: 17px; } #nav li:hover ul, #nav li:hover ul a, #nav li.sfhover ul { /*float: left;*/ left: auto; color: white; line-height: 17px; margin-top: 50px; } /* BUTTONS */ #nav li#home{ width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: 0 0px; } #nav li#aboutus{ width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -105px 0px; } #nav li#daynursery{ width: 125px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -210px 0px; } #nav li#preschool{ width: 125px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -335px 0px; } #nav li#parents{ width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -460px 0px; } #nav li#contact{ width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -565px 0px;} /* ON STATES */ #nav li#home a:hover { width: 105px; background-image: url(../images/lonmenu.gif); background-position: 0 -50px; } #nav li#aboutus a:hover { width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -105px -50px; } #nav li#daynursery a:hover { width: 125px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -210px -50px; } #nav li#preschool a:hover { width: 125px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -335px -50px; } #nav li#parents a:hover { width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -460px -50px; } #nav li#contact a:hover { width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -565px -50px;} #nav li#home2 { width: 105px; height: 17px; display: block; background:#0099FF;} #nav li#aboutus2 { width: 105px; height: 17px; display: block; background:#6FAADF;} #nav li#daynursery2 { width: 125px; height: 17px; display: block; background:#AC2282;} #nav li#preschool2 { width: 125px; height: 17px; display: block; background:#E74C15;} #nav li#parents2 { width: 105px; height: 17px; display: block; background:#0F549D;} #nav li#contact2 { width: 105px; height: 17px; display: block; background:#D4B2A1;} #nav li#daynursery2 :hover { width: 125px; height: 17px; display: block; background:#D4B2A1;} [if lte IE 6]> <style type=text/css"> div.nav a:hover {visibility:visible;} </style> [endif] /* Footer bar*/ .footer { float: left; clear: both; width: 775px; margin: 5px auto; padding: 0; display: inline; color: #999999;} .footer a { border: none; color: #88746a; text-decoration: none; font-size: 9px; } .footer ul { margin: 0; padding: 3px 0 3px 0; list-style: none; } .footer li { display: inline; } .footer ul a { float: left; padding: 1px 10px; border-left: solid 1px #95a2c0; color: #88746a; text-decoration: none; font-size: 9px; } .footer a:hover { color:#400000; text-decoration: none; } The CSS code is a bit jumbled because I've been trying all I can to fix the problems I'm getting. Basically I have a single-graphic hover menu which works fine, but then the drop-down menus (in their separate colours) are just not coming in underneath in IE7 - ok in Firefox on pc and mac, plus fine is Safari on mac - but they should be normal wording links as 11px text with 17px line-height. I am getting the single-graphic coming in instead. I know this must have something to do with the nested ul in the li, but just can't stop this happening. So, it's really a 2 stage HELP. PLEASE!!!! Oh, I know I can't put a url link in. It's basically in a devsite folder of the main site I'm talking about here! Similar Tutorialshey all, I have been working on a multilevel suckerfish menu tutorial and i have the following: http://www.wildhosting.co.uk/cssMenu/menu.php However, i am having a couple of final problems. 1) In FF the grey highlight colour does not seem to fill from top to bottom on the main menu. 2) In FF, When a sub menu (for the top option of the menu) appears the top border of the submenu overlaps the bottom border of the main menu. 3) In IE, the above are ok but the submenu appears a long way from where it should, ie 5cm to the right... any help would be great, thanks RF http://www.describe.org/homework/esdcar http://www.describe.org/homework/esdcar/esdcar.css Three things: One is that in FF, etc, the dropdown for the single level labels (about, events) as opposed to the doubledecker ones (buyers) start too high -- not at the bottom of the box. I've tried playing with padding, height, margins...I must not have hit on the right combo yet, but I can't get it right. The second, though minor, is why there's a tiny crack that appears between one set of boxes (which set changes). I tried bumping up the width on one box by a tenth but that just caused the whole menubar to wrap down to a second line. The third is that the javascript doesn't work on IE. I copied it straight from the suckerfish/html dog tutorial and substituted the appropriate div name, but it's not working. (I haven't tried fixing anything else in IE yet, so it all looks bad...but the js should work.) late edit: I forgot to say that if I could, I'd like the single-level labels to be centered vertically, too, instead of up at the top... Hello. I'm trying to create a CSS/SPRY dropdown menu. It seems to work fine in Firefox but in IE 6 the dropdown goes horizontal until I mouse over then it goes verticle. Also how do I add black 1px border around each list item in the dropdown menu? I have tried but it tends to give the first Menu Item the border as well which doesnt work so well with the layout. Here is the temp site. http://www.nessphysiotherapy.com/tempmenuhelp.html Quote: @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; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ 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: 100%; position: relative; text-align: left; cursor: pointer; width: auto; float: left; white-space: nowrap; } /* 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; z-index: 1020; cursor: default; width: auto; position: absolute; left: -1000em; } /* 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 { float: none; background-color: transparent; } /* 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 { background: #781844; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarHorizontal a { display: block; cursor: pointer; color: #FFFFFF; text-decoration: none; font-family: Tahoma, "Times New Roman", Serif, Arial; font-weight: bold; font-size: 0.9em; line-height: 0.98em; padding-top: .9em; padding-right: 1.1em; padding-bottom: 1em; padding-left: 1.1em; } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus { color: #99CCCC; } /* 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: #99CCCC; } /******************************************************************************* 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: url(SpryMenuBarDown.gif); background-repeat: no-repeat; background-position: 95% 50%; } /* 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: url(SpryMenuBarRight.gif); background-repeat: no-repeat; background-position: 95% 50%; } /* 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 { background-image: url(SpryMenuBarDownHover.gif); background-repeat: no-repeat; background-position: 95% 50%; } /* 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: url(SpryMenuBarRightHover.gif); 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: transparent; } } I'm trying to update my main navigation bar for my site into a something a bit more useful and clean. I've gotten it to work pretty much exactly as I want to in FF and Opera, but of course it's displaying very wrong in IE. I thought I had found the code needed to fix IE, but I've either used it incorrectly, or it's just not the right bit of code. Here's a page with the navbar live: http://www.skullcrow.com/community_upload.php Here's the css being used: Code: /* horizontal drop down navbar - basic formatting */
#centering_wrap {width:100%; position:relative;}
#menu {margin:0 auto;width: 955px;font: bold 11px/16px arial, helvetica, sans-serif;color:#666;} /* Main width and default font properties */
#menu ul {list-style: none;margin: 0;padding: 0;float: left; line-height:42px;} /* Main format for top categories */
#menu ul ul{ position:relative; top:35px; left:5%; width: 90%;} /* child element widths */
#menu ul li{ background-position:bottom left;} /* set nav bg position */
#menu ul li:hover{ background-position:top left;} /* set nav bg position hover position */
/* Positioning popouts (2nd level only) */
#menu li {position: relative;} /* make "ABSOLUTE" work correctly */
#menu ul ul {position: absolute; z-index: 500;} /* prevent menu from "pushing" contents down */
#menu ul ul ul {position: absolute; top: 0; left: 100%;} /* move child elements to the side */
/* Hover behavior */
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
/* Additional text formatting */
#menu a {display: block;width: 100%;height: 100%;}
#menu ul ul li {
font: bold 11px/16px arial, helvetica, sans-serif;
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: #ccc #323E6B #456594 #323E6B ;
margin: 0;
padding: 3px 4px;
background: #2B3344;
}
#menu ul ul a {color: #CCC;text-decoration: none;}
#menu ul ul a:hover {color: #FFF;background:#06F;}
...and here's the html from the menubar (which is contained in a separate php.includes, if that matters at all): Code: <div id="centering_wrap">
<div id="menu">
<ul style="width:195px;">
<li style="background-image:url(../images/nav_com_home.png);"><a href="http://www.skullcrow.com/" alt="Home"> </a>
<ul>
<li><a href="http://www.skullcrow.com/">Storefront</a></li>
<li><a href="http://www.skullcrow.com/community_home.php">Community</a></li>
</ul>
</li>
</ul>
<ul style="width:188px;">
<li style="background-image:url(../images/nav_com_store.png);"><a href="http://www.skullcrow.com/" alt="Store"> </a>
<ul>
<li><a href="http://www.skullcrow.com/">Shirts</a></li>
<li>Hats</li>
<li>Stickers</li>
<li>Misc Stuff</li>
</ul>
</li>
</ul>
<ul style="width:188px;">
<li style="background-image:url(../images/nav_com_community.png);"><a href="http://www.skullcrow.com/community_home.php" alt="Community"> </a>
<ul>
<li><a href="http://www.skullcrow.com/forum">Forum</a></li>
<li><a href="http://www.skullcrow.com/community_upload.php">Upload Photos</a></li>
<li><a href="http://www.skullcrow.com/community_designers.php">Submit Shirt Designs</a></li>
<li><a href="http://www.skullcrow.com/skullcrow_blog">SkullCrow Blog</a></li>
</ul>
</li>
</ul>
<ul style="width:188px;">
<li style="background-image:url(../images/nav_com_help.png);"><a href="http://www.skullcrow.com/help.php" alt="Help"> </a>
<ul>
<li><a href="http://www.skullcrow.com/help.php">Contact Us</a></li>
<li><a href="http://www.skullcrow.com/forum/faq.php">FAQ</a></li>
<li><a href="http://www.skullcrow.com/aboutus.php">About Us</a></li>
</ul>
</li>
</ul>
<ul style="width:196px;">
<li style="background-image:url(../images/nav_com_otherstuff.png);"><a href="#" alt="Other Stuff"> </a></li>
</ul>
</div>
</div>
...and finally, here's the small snippet of code I used up in the header of the main php file that I thought was suppose to fix the display issue but didn't: Code: <!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(css/csshover3.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
That last bit is contained at the very of the header, and is the very last item before the </head> tag. In addition to the other 'adjustments', it's also suppose to be including the csshover3.htc file that I thought was suppose to fix a lot of display problems. The site I got that file from is he http://www.xs4all.nl/~peterned/csshover.html Whatever help is always very appreciated. I'm still sort of a css newb, although I think I'm starting to understand more, but IE is a bastard and I think most web developers would probably agree. Thanks again. Can anyone give me a hint on why the css/javascript controlled dropdowns don't appear right on this page in Safari: http://spa.american.edu As you can see in the view source the script is very basic and not embedded in an external file. Safari cuts off a portion of the final link. Thanks, Jeremy i am trying to use the suckerfish dropdown menu. starting from the pretty example, i got it going in IE6 but it looked pretty off in mozilla. i tinkered around further the the IE code which changed things a bit there and made things look a bit better in mozilla but not much! my code is at http://www.fizzycherry.com/menutest.html - i would *really* appeciate any ideas. the main things really bugging me a how can i get the menu bar to fill the width of the screen in mozilla? my navbar div did this before i inserted the sub menus! once i tinkered with my css, placing padding on the links rather than the li elements, huge vertical gaps started appearing in the submenus in both IE and Mozilla, even with no margins padding and borders. i need to *add* a bottom border (same colour as background) to remove these gaps! why?? ideally i would like the submenus to look somethign like they do in ie6 but even if someone could just tell me how to make the bar fill the screen i'd be chuffed! it's best to get a visual of this one: www.viportals.com i'm talking about the buttons under the top banner. if you hover "Games", a drop down list appears. there is a 1pixel line between the "Games" button and its dropdown list (when you hover the "Games" button) which i want to get rid of, but can't. in IE, there are many horrible problems, probably due to the display:inline-block of the li a. the buttons are too tall and hang down below the bottom line of the horizontal bar, and the dropdown menu appears beside the "Games" button. i tried css Code: Original - css Code #sddm ul li a { padding-top: 0; padding-bottom: 0; margin-top:0; margin-bottom:0; }
#sddm ul li a {
in my separate ie css file, but its the same here is all the code if you need it to gain a better understanding (css, html, and js). css Code: Original - css Code /* DROP-DOWN NAVIGATION MENU */ #sddm { margin: 0; padding: 0; z-index: 30; } #sddm li { margin: 0; padding: 0; list-style: none; float: left; } #sddm li a { display: inline-block; text-decoration: none; color:#495B20; background-color:#BAD36B; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; } #sddm li a:hover { background-color:#495B20; color:#BAD36B; border-left: 2px solid #000; border-top: 2px solid #000; border-right: 2px solid #fff; border-bottom: 2px solid #fff; text-decoration:none; } #sddm li:hover div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #BAD36B; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; } #sddm li div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #BAD36B; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; } #sddm li div:hover { background-color:#495B20; color:#BAD36B; border-left: 2px solid #000; border-top: 2px solid #000; border-right: 2px solid #fff; border-bottom: 2px solid #fff; } #sddm li div:hover a{ background: #495B20; color: #BAD36B; } #sddm li div a { position: relative; display: block; margin: 0; padding: 5px 10px; width: auto; white-space: nowrap; text-align: left; text-decoration: none; border:none; font: 11px arial; } #sddm li div a:hover { text-shadow:#000; text-decoration:underline; border:none; } /* DROP-DOWN NAVIGATION MENU */ html Code: Original - html Code <div id='navbar'> <ul id="sddm"> <?php echo " <li> <a href='".get_home_link()."'> Home</a> </li> <li> <a href='".get_category_link("name=all&page=1")."'"; ?> onmouseover='mopen("m1")' <?php echo " onmouseout='mclosetime()'> Games</a> <div id='m1' onmouseover='mcancelclosetime()' onmouseout='mclosetime()'> "; $categories = get_categories("htmlize=true&order=order&sort=ASC"); foreach ($categories as $category) { $link=get_category_link("name="._sp($category['name'])."&page=1"); echo "<a href='".$link."'>".$category['name']; $category['gamenum'] = count(get_games("thecat="._sp($category['name']))); echo " (".$category['gamenum'].")"; echo "</a>"; } echo " </div> </li> <li> <a href='".get_users_link()."'> Members</a> </li> <li> <a href='".get_news_link()."'> News</a> </li> <li> <a href='".get_submit_link()."'> Submit</a> </li> <li> <a href='".get_links_link()."'> Links</a> </li> <li> <a href='".get_rules_link()."'> Rules</a> </li> <li> <a href='".get_faq_link()."'> FAQ</a> </li> <li> <a href='".get_contact_link()."'> Contact</a> </li>"; ?> </ul> <div style="clear:both"></div> </div>
<div id='navbar'>
<ul id="sddm">
<?php
echo "
<li>
<a href='".get_home_link()."'>
Home</a>
</li>
<li>
<a href='".get_category_link("name=all&page=1")."'";
?>
onmouseover='mopen("m1")' <?php echo "
onmouseout='mclosetime()'>
Games</a>
<div id='m1'
onmouseover='mcancelclosetime()'
onmouseout='mclosetime()'>
";
$categories = get_categories("htmlize=true&order=order&sort=ASC");
foreach ($categories as $category) {
$link=get_category_link("name="._sp($category['name'])."&page=1");
echo "<a href='".$link."'>".$category['name'];
$category['gamenum'] = count(get_games("thecat="._sp($category['name'])));
echo " (".$category['gamenum'].")";
echo "</a>";
}
echo "
</div>
</li>
<li>
<a href='".get_users_link()."'>
Members</a>
</li>
<li>
<a href='".get_news_link()."'>
News</a>
</li>
<li>
<a href='".get_submit_link()."'>
Submit</a>
</li>
<li>
<a href='".get_links_link()."'>
Links</a>
</li>
<li>
<a href='".get_rules_link()."'>
Rules</a>
</li>
<li>
<a href='".get_faq_link()."'>
FAQ</a>
</li>
<li>
<a href='".get_contact_link()."'>
Contact</a>
</li>";
?>
</ul>
<div style="clear:both"></div>
</div>
I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container. Anyone know why there is a shift, and what I can do about it? Style sheet code pasted below: Code: body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3;
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}
h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}
h2 {
font-size:2em;
}
h3 {
font-size:1.5em;
}
h4 {
font-size:1.25em;
}
a:link {
color:#8090AC;
text-decoration:none;
}
a:visited {
color:#B17F6C;
text-decoration:none;
}
a:hover {
color:#E9DF55;
text-decoration:underline;
}
a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}
#header {
height:200px;
width:760px;
margin:0;
padding:0;
}
#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
font-size: 12pt;
color: #e9df55;
background-color:transparent;
text-indent: 200pt;
vertical-align: text-bottom;
}
navigate{
color : #105BAC;
background-color : transparent;
height : 20px;
font-size: 100%;
border-top : 1px solid #999999;
}
#navigate ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 150px;
margin-right: 0px;
padding: 2px 0 0 0;
}
#navigate ul li {
display: inline;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 14px;
color: #FFFFFF;
left: 50px;
right: 50px;
}
#main {
width: 660px;
padding-right: 50px;
padding-left: 50px;
}
#footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #666666;
height: 100px;
width: 760px;
vertical-align: text-bottom;
text-align: center;
}
#SplashImage {
float: left;
}
.image-left {
clear: none;
margin-bottom: 10px;
float: left;
margin-right: 20px;
margin-left: 10px;
}
.image-right {
clear: none;
margin-bottom: 10px;
margin-left: 10px;
float: right;
}
I've developed a dropdown navigation menu from a tutorial. The basic menu works perfect in IE and FF. But I would like to change a few things that for the life of me I can't get to work. First would be that under each item in the dropdown menu I would like there to be a bottom border. So in my css file I added border-bottom to the li li {} section. Now I am faced with two problems. First in firefox the border expends maybe 5px. Apon further investigation I found that for some reason FF has the <li> tags only about 5px wide all over the place! In IE it extends atleast below the text but won't will the entire <li> like it should! FF also doesn't give the border to all the links like it should. The next problem is in the width of the elements. Instead of the dropdown part being a set width, I would like the the part that drops down to stretch so that each link is on one line. But the entire part that drops down would be still remain rectangular like it does now. Code: Ex: [Link1][Link2][Link3] *with the mouse over the link 1 |Url1 | |Url2 | |Much Longer| instead of [Link1][Link2][Link3] *with the mouse over the link 1 |Url1 | |Url2 | |Much| |Longer| I think this has something to do with the width of the li, so I set the width to auto. No change. To recap my lengthy post. Getting a bottom border on the li tags in the dropdown Getting FF to behave with the bottom border and widths Each link should be on only one line I think that getting the <li> width to behave will solve most of my problems. I've attached the original css and html pages. Hi, I'm trying to solve a little CSS issue with, guess what!, IE6. 92 (dot) 48 (dot) 108 (dot) 113 (forward slash) ~anyjob In FF all is good, but when viewed in IE the nav bar has been forced down to misalign with my background red strip. Also the dropdowns don't work. Could anyone point me in the right direction. I don't think this is a float issue and I've read up as much as possible but this is really confusing me. Any help would be very much appreciated. Thanks, Brian I made a drop down menu with css and I can't get it to work with IE6. Can anyone help? You can view an example of what I have at the following url mentalgameofmoney.co.uk/example.html Here is the CSS Code:
#menu {
position:absolute;
background-color:#FF0000;
overflow:hidden;
height:30px;
width:91px;
top:0px;
left:0px;
}
#menu:hover{
overflow:visible;
}
#menu a:link{
text-decoration:none;
}
#spacer{
height:30px;
}
#link_box{
background-color:#cbbba2;
border-left:#c1ad90 solid 1px;
border-right:#c1ad90 solid 1px;
border-bottom:#c1ad90 solid 1px;
padding-left:5px;
color:#51351a;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:12px;
text-decoration:none;
text-align:left;
}
#link_box:hover{
background-color:#51351a;
color:#FFFFFF;
}
Here is the HTML Code: <div id="menu"> <a href="#"> <div id="spacer"></div></a> <a href="#"><div id="link_box">Link</div></a> <a href="#"><div id="link_box">Link</div></a> <a href="#"><div id="link_box">Link</div></a> <a href="#"><div id="link_box">Link</div></a> <a href="#"><div id="link_box">Link</div></a> <a href="#"><div id="link_box">Link</div></a> <a href="#"><div id="link_box">Link</div></a> <a href="#"><div id="link_box">Link</div></a> </div> hello, i was reading the well-known suckerfish dropdown tutorial and was trying to do something like it. i thought i had understood the logic behind it, but i can't get it to work. the nested unordered lists appear like so: ITEM1 subitem1 subitem2 subitem3 ITEM2 subitem1 subitem2 subitem3 i wanted them to appear like so: subitem1____subitem1 subitem2____subitem2 subitem3____subitem3 ITEM1_______ITEM 2 the positioning isn't too relevant, all i really wanted was to pull the nested ul out of the flow... i made sure that the li ul part was positioned absolutely, but i can't do anything with it (no styling, no anything). my css/code must be the problem, but i can't see what i'm doing wrong. here's the relevant code: CSS: Code:
#menu ul {
position: relative;
margin: 8em 0 0 0;
float: left;
background-color: #D60078;
list-style-type: none;
}
#menu li {
display: inline;
padding: 0 2.5em 0 0;
position: relative;
}
#menu li a:link, a:visited {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
}
#menu li a:hover, a:active {
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
}
#menu li ul { position: absolute;
left: 0; top: 0;
background-color: #FFF;
display: block;
}
HTML: Code: <ul id="menu"> <li><a href="">ITEM1</a> <!-- SUBMENU --> <ul> <li><a href="">subitem1</a></li> <li><a href="">subitem2</a></li> <li><a href="">subitem3</a></li> </ul> </li> <li><a href="">ITEM2</a> <!-- SUBMENU --> <ul> <li><a href="">subitem1</a></li> <li><a href="">subitem2</a></li> <li><a href="">subitem3</a></li> </ul> </li> </ul> i hope that made sense (after working on this for hours and trying everything that came to mind, i'm getting a little incoherent). thanks for any help! Hi, I've put together a drop down menu based on the suckerfish demo which can be seen at http://wetherbyrunners.mdwebspace.co.uk. However it doesn't seem to be working in Internet Explorer. I've tried changing the z-index to a higher value for the drop down, but it hasn't worked. Does anyone have any ideas of how it could be sorted out? Thanks in advance, Matthew Dingley Link: http://cemtec.quicksites.co.za CSS: http://cemtec.quicksites.co.za/wp-c...grass/style.css Hi This dropdown menu on Products works in Firefox but when I goto IE7 I dont see anything at all. I have tried changing the div Class to a Div Id also without any change. Anybody have any clues to what I have todo? L. I'm sure some of you have seen the article on alistapart for the suckerfish dropdowns. After recently moving through this, I found a bug with mac ie where the child list is displayed to the side of and not below the major nav link. I'm not sure exactly what this might be, does anyone have any ideas on this? Here's the CSS: Code:
#nav ul {
margin: 0 0;
padding: 0 0;
list-style-type: none;
}
#nav ul li {
float: left;
position: relative;
width: 10em;
}
#nav ul li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}
#nav ul li > ul {
top: auto;
left: auto;
clear: left;
}
#nav ul li:hover ul, #nav ul li.over ul {
display: block;
}
...and the html... Code: <div id="nav"><ul id="rootul"> <li><a href="#">Link One</a> <ul> <li><a href="#">Sub Link</a></li> <li><a href="#">Sub Link 2</a></li> </ul> </li> <li><a href="#">Link Two </a> <ul> <li><a href="#">Sub Link</a></li> <li><a href="#">Sub Link 2</a></li> </ul> </li> <li><a href="#">Link Three </a> <ul> <li><a href="#">Sub Link</a></li> <li><a href="#">Sub Link 2</a></li> </ul> </li> <li><a href="#">Link Four </a> <ul> <li><a href="#">Sub Link</a></li> <li><a href="#">Sub Link 2</a></li> </ul> </li> <li><a href="#">Link Five </a> <ul> <li><a href="#">Sub Link</a></li> <li><a href="#">Sub Link 2</a></li> </ul> </li> </ul> </div> ..and finally, the javascript.. Code:
<script language="javascript" type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("rootul");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
I know that technically this could be a DHTML issue, but I feel certain it's a CSS rule that I'm not doing right. I've tested this and it works in IE 6.0 and FF 1.0. Does anyone have a browser that this does NOT work in? Thanks much! -Brian Link Hi I need some help with this Menu. It works fine when you mouseover products in firefox. But when you switch to ie6 it shows nothing. It has code specific for ie6 but still no menu. tx Hi there, I'm trying to integrate some SEO friendly dropdown menus into an existing website design. The trouble I'm experiencing so far is that the body of the design is aligned centre, and most of the examples I've seen thus far use absolute positioning of <div> elements (i.e. the design is left-aligned, so the designer knows to position the dropdown div X pixels). Is there a good reference I can use for positioning my divs properly? Thanks Hello guys I sure would appreciate some help integrating a css dropdown menu into a site. If you visit in FF, the drop down works find, If you open it in IE9 the dropdown does not work. i am new to css.so cant solve the poblem. Thanks for any help. I am having problems getting a drop down menu to work in IE6. Using a little bit of javascript i finally got it to where the functionality is correct but the drop down menu appears behind the page content (in any browser). I have tried the z-index values and maybe I'm using them incorrectly but I cannot fix the problem. I kind of posted this problem before but was unable to give much detail. I was able to upload it though so I have link to both the CSS and the actual page. Any help would be greatly appreciated, or even if there is no fix, any help on drop downs in IE6 would be greatly appreciated. Complete HTML: http://happyhomebuilders.net/test/test.html Complete CSS: http://happyhomebuilders.net/test/css.html Thanks a lot, Brian In today's Website Development world, which kind of Drop Down menus do the pro's prefer to use, pure CSS without Javascript or CSS with Javascript? And also, can pure CSS Drop Down menus be used in Dynamic Websites? Thank you. |
|||||||