|
CSS - Dropdown Using Css/javascript Safari Problems
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 Similar Tutorialsit'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>
Safari 1.2.3 (or so) will display my multi-level CSS-driven menus/ The third-level is set to display with a background color over a text area with a different background. When the user clicks or mouses-off the third-level menu, there is about a 3px vertical remnant of that menu left on screen. What can I do to prevent this? Hi there, currently, my site uses CSS and it works perfectly in FF and IE. But when it comes to Safari, it doesnt seem to pull the CSS up properly, if at all. (www.nsma.com/store) Just wondering if anyone can help/shed light on this. the css file is at store/stylesheet.css. Im offerin payment if u can help. paypal is best for me, let me know Many thanks in advance I have a new site at www.sdgolflessons.com. Looks fine in all browsers, including Safari, until I changed the doc type to strict (from the default loose in my Dreamweaver), and now Safari has odd gaps. I don't have much CSS for formatting, so I can't figure out what's going on. I've tried to force heights, make sure paddings are 0, etc., to no avail. I'd appreciate someone checking it out. I have Safari on a PC, though I'm not sure if that matters. I was told earlier that absolute positioning was a bad practice, at least to do it excessively in code, so I learned about margins and floats and fixed my page to where I want it. I test my page in Firefox 3 and Safari 4 (beta) and they both look exactly how I want the page to look. However, IE doesn't like a few things: 1. The top header positioning doesn't match up where it should (leaving yellow showing, which I placed behind the images to make sure I was aligning the images correctly rather than using the same background color). 2. The navigation by letter (A-Z and View All) is positioned right under the light blue bar when it should be in the middle of the light blue bar. Safari 3 has the same problem mentioned in #2 but is positioned level with the bottom of the light blue bar. Any suggestions and solutions would be most appreciated as I have tried looking for some explanation/solution to this problem for a few days now. Thanks ahead of time. P.S. the link is advance.byu.edu/sgtest Hi all, After the latest update of Safari, my Web site has gone all Wonky in the layout. The problem occurs in table cells where there is both a field and some text. If I put a <b> bold tag on some text in the row or even a <span> with special style attributes like plain text, the text jumps up and becomes almost a superscript and the rest of the text remains at the baseline of the text input fields in the row. I uploaded a picture, not sure how to link it into the posting though. The forms on our site are old, 7+ years, so have been beautifully laid out until this latest Safari release. It used to only be IE that messed up formatting with each release. This is the first Safari release I have seen do this. Can anyone else confirm similar issues? hello. i'm using a CSS tutorial and DREAMWEAVER to build a website. i find that the site is interpreted the way i would like it in either Firefox or Safari...but not in IE. When links are hovered over while using IE, the page distorts. has anyone experienced this type of problem before? thank you in advance for your time and assistance! i did post several explanatory screenshots to illustrate the problem. replace each "@" with a period. mea culpa. www@wwpea@net/screenshots@htm 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! Hey guys, I'm in need of some help here. Okay, so. My site looks the way I want so far on google chrome and safari (mac). And right now I'm at the stage of getting it to display like the two. If anyone who decides to help doesn't have access to certain browsers, I'll further explain, but I think it's easiest said to see for yourself. Right now I'm focusing on ie6, ie7, ff3. The markup in some areas is whacky, I know, but I decided to pick up where I left off on this project (which I first began building awhile ago) instead of starting completely over with a good template. http://thecheckoutplace.com/compute...eOneNetbook.php If anyone can offer a hand, it means a lot. Cheers guys. 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... hey 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 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. 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! Sorry if this is in the wrong section but i'm not sure if it should be here or in the javascript section. Here is the CSS code that I am making. I am trying to make a javascript drop down but the css is preventing the code from becoming a vertical dropdown. It justs goes to the left. Here is the beggining css for it and I am having trouble making it like that. Sorry if I can't be more descriptive but i've been trying to work for 5 hours and got nothing. Can any one please help. CSS code Code:
#nav{
float:left;
width:100%;
margin:0px;
padding:0px;
margin-top:-8px;
}
#nav ul{
float: right;
list-style-stype:none;
margin:0px;
padding:0px;
height:27px;
overflow:hidden;
}
#nav ul li{
display: inline;
margin: 0px;
padding: 0px;
height: 27px;
overflow:hidden;
}
#nav ul li a,
#nav ul li a:visited{
background-position: centertop;
background-repeat:no-repeat;
display:block;
float: left;
height: 0px;
margin: 0px 0px 0px 8px;
overflow: hidden;
padding: 30px 0px 0px 10px;
text-decoration:none;
}
#nav ul li a:link#nav_agency,
#nav ul li a:visited#nav_agency {
background-image:url(images/agency2.gif);
border:0px;
width:54px;
}
#nav ul li a:hover#nav_agency,
#nav ul li a:link#nav_agency.active,
#nav ul li a:visited#nav_agency.active {
background-image: url(images/agencyup2.gif);
border: 0px;
width: 54px;
}
#nav ul li a#nav_services,
#nav ul li a:visited#nav_services {
background-image: url(images/services2.gif);
border:0px;
width: 56px;
}
#nav ul li a:hover#nav_services,
#nav ul li a#nav_services.active,
#nav ul li a:visited#nav_services.active {
background-image: url(images/servicesup2.gif);
border: 0px;
width: 56px;
}
Java Code Code:
window.onload = initAll;
function initAll() {
var allLinks = document.getElementsByTagName("a");
for (var i=0; i<allLinks.length; i++) {
if (allLinks[i].className.indexOf("menuLink") > -1) {
allLinks[i].onclick = function() {return false;}
allLinks[i].onmouseover = toggleMenu;
}
}
}
function toggleMenu() {
var startMenu = this.href.lastIndexOf("/")+1;
var stopMenu = this.href.lastIndexOf(".");
var thisMenuName = this.href.substring(startMenu,stopMenu);
document.getElementById(thisMenuName).style.display = "block";
this.parentNode.className = thisMenuName;
this.parentNode.onmouseout = toggleDivOff;
this.parentNode.onmouseover = toggleDivOn;
}
function toggleDivOn() {
document.getElementById(this.className).style.display = "block";
}
function toggleDivOff() {
document.getElementById(this.className).style.display = "none";
}
Html code Code:
<div id="nav">
<ul>
<li><a href="agency.html"id="nav_agency" class="" title="Agency">AGENCY</a></li>
<li><a href="services.html"id="nav_services" class="active" title="Services">SERVICES</a></a></li>
<ul>
<li><a href="technology.html" id="nav_technology" class="" title="Technology">TECHNOLOGY</a></li>
<li><a href="#.html">As You Like It</a></li>
<li><a href="#.html">Love's Labour's Lost</a></li>
<li><a href="#.html">The Comedy of Errors</a></li>
</ul>
</nav>
please delete Hi all, Not exactly sure where this post truely belongs (CSS, HTML, JS forums) but firt trying this forum. I'm trying to create a simple expandable link but the link jumps up and down when expands/collapses. The code attached, any ideas any one. Code demonstrates the problem so please save it as .html and view it. -- Thanks. Code:
<style type="text/css">
.faq_hidden
{
visibility: hidden;
}
.faq_shown
{
visibility: visible;
}
</style>
<script type="text/javascript">
function showReview(n)
{
document.getElementById(n+'_r').className = 'faq_hidden';
document.getElementById(n+'_f').className = 'faq_shown';
}
function hideReview(n)
{
document.getElementById(n+'_f').className = 'faq_hidden';
document.getElementById(n+'_r').className = 'faq_shown';
}
</script>
<div id="r1_r" class="faq_shown">
<a onclick="showReview('r1'); return false;" href="#">
<div>
Completing the questions 1
</div>
</a>
</div>
<div class="faq_hidden" id="r1_f">
<a onclick="hideReview('r1'); return false;" href="#">
<div>
Completing the questions
</div>
</a>
<p>
Completing the questionnaire should take 8 - 10 minutes of your time.
Be honest, answer as you would normally behave and act, in response to
the statements and questions.
</p>
</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 am using the <pre> tag in my application and it works for IE, Firefox, etc... except for Safari. This is what I am using in my css Code:
<STYLE TYPE="text/css">
#Pre tags with word wrapping for Mozilla, etc...
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
_white-space: pre;
font-family:verdana,arial,sans-serif; font-size:11px; color:#000000;
}
</style>
<!--[if gte IE 5]>
<style type="text/css">
pre {
word-wrap: break-word; /* IE 5.5+ */
white-space: normal; font-family:verdana,arial,sans-serif; font-size:11px; color:#000000;
}
</style>
<![endif]-->
This is how I am using the pre tag in my perl cgi application Code:
my $id = $FORM{'id'};
my $query = "Select title, news_story, begin_date, author from su_archives where news_id = '$id'";
$sth = $dbh->prepare($query);
$sth->execute();
my ($title, $news_story, $begin_date, $author) = $sth->fetchrow_array;
@begin = split(' ',$begin_date);
@date = split('-',$begin[0]);
$startDate = $date[1].'/'.$date[2].'/'.$date[0];
print "<br><b>$title</b><br><br>";
print "<p><i>$startDate</i><br></p>";
print "<PRE WIDTH=55px style=\"font-family: verdana, arial, helvetica, geneva, swiss, sans-serif;\">$news_story</pre>";
Any Suggestions on how this should be revised for Safari? Thanks in Advance I have my webpage coded in HTML 4 and CSS, and everything is valid. It displays perfectly in all browsers, with one exception. In Safari 1.2, the menu background positioning is screwed up. It is supposed to display the b&w image first, then rollover to the color image. Instead, it is displaying the color image, and not repositioning the image so it displays correctly. It works fine in other browsers. any suggestions?? (PS) i'm judging the Safari support by BrowserCam.com, I don't actually have a Mac to test with. And yes, I do need it to work in Safari since this is a class website and we are provided with apple laptops to use. |
|||||||