|
CSS - Css Dropdowns Hidden Behind Post Widget In Blogger
Novice at CSS. I have a Blogger website. I'm trying to put a CSS dropdown menu. In Safari, it works fine. Don't have access to Firefox, so I don't know, but in IE (6&7) the dropdowns are hidden behind any other widgets on the page.
I've seen plenty of forum posts regarding this issue with flash player, but none specifically addressing IE and Blogger widgets. I've tried adjusting z-index in each li, ul. I'm still really new at this, so I'd appreciate any help and specific guidance you can offer. Website: crossfit-hr.com CSS code (source from CSS MENU MAKER): .menu{ width:945px; border:none; border:0px; margin:0px; padding:0px; font-family:verdana,geneva,arial,helvetica,sans-serif; font-size:12px; font-weight:bold; font-color:#FF0000; z-index:200; } .menu ul{ background:url(removed for thread) top left repeat-x; height:43px; list-style:none; margin:0; padding:0; } .menu li{ float:left; padding:0px 8px 0px 8px; z-index:200; } .menu li a{ color:#000000; display:block; font-weight:bold; line-height:43px; padding:0px 10px; text-align:center; text-decoration:none; } .menu li a:hover{ color:#FF0000; text-decoration:none; } .menu li ul{ background:#e0e0e0; border-left:2px solid #0079b2; border-right:2px solid #0079b2; border-bottom:2px solid #0079b2; display:none; height:auto; filter:alpha(opacity=95); opacity:0.95; position:absolute; width:150px; z-index:10000; /*top:.5em; /*left:0;*/ } .menu li:hover ul{ display:block; } .menu li li { display:block; float:none; padding:0px; width:150px; z-index:200; } .menu li ul a{ display:block; font-size:12px; font-style:normal; padding:0px 8px 0px 8px; text-align:left; } .menu li ul a:hover{ background:#949494; color:#FF0000; opacity:1.0; filter:alpha(opacity=100); } .menu p{ clear:left; z-index:200; } .menu #current{ background:url(removed for thread) top left repeat-x; color:#FFFFFF; } ========================= HTML code for Widget: <div class="menu"> <ul> <li><a id="current" href="(removed for thread)" target="_self" >Home</a> </li> <li><a href="" target="_self" >Methods & Results</a> <ul> <li><a href="(removed for thread)" target="_self">Our Methods</a></li> <li><a href="(removed for thread)" target="_self">See the Results</a></li> </ul> </li> <li><a href="" target="_self" >How to Start</a> <ul> <li><a href="(removed for thread)" target="_self">Starting Options</a></li> <li><a href="(removed for thread)" target="_self">Sign-Up Form</a></li> </ul> </li> <li><a href="" target="_self" >Schedule & Prices</a> <ul> <li><a href="(removed for thread)=dctrh782_10dsmgnqhq" target="_self">Class Schedule</a></li> <li><a href="(removed for thread)" target="_self">Prices</a></li> </ul> </li> <li><a href="(removed for thread)" target="_self" >Coaches</a> </li> <li><a href="" target="_self" >Admin & Media</a> <ul> <li><a href="(removed for thread)" target="_self">Online Payments</a></li> <li><a href="(removed for thread)=0" target="_self">Release Form</a></li> <li><a href="(removed for thread)" target="_self">CFHR Photos</a></li> <li><a href="(removed for thread)" target="_self">CFHR Videos</a></li> </ul> </li> <li><a href="(removed for thread)" target="_self" >Contact</a> </li> </ul> </div> =================== Similar TutorialsI'm trying to create my first dropdown using suckerfish. anyone have an idea why this will only extend about half way across the page before splitting my main categories into two columns? i want it all on one line..any help is appreciated. thanks! Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
font: 78%/1.5 arial, helvetica, serif;
text-align: center;
padding: 0;
margin: 2em;
}
#container {
width: 36em;
background: #F4ECD9;
text-align: left;
border: 1px solid #eda;
margin: 0 auto;
}
#nav, #nav ul {
float: left;
width: 36em;
list-style: none;
line-height: 1;
background: white;
font-weight: bold;
padding: 0;
border: solid #eda;
border-width: 1px 0;
margin: 0 0 1em 0;
}
#nav a {
display: block;
width: 10em;
w\idth: 6em;
color: #7C6240;
text-decoration: none;
padding: 0.25em 2em;
}
#nav a.daddy {
background: url(rightarrow2.gif) center right no-repeat;
}
#nav li {
float: right;
padding: 0;
width: 10em;
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
w\idth: 13.9em;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}
#nav li li {
padding-right: 1em;
width: 13em
}
#nav li ul a {
width: 13em;
w\idth: 9em;
}
#nav li ul ul {
margin: -1.75em 0 0 14em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
background: #eda;
}
</style>
<script type="text/javascript">
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>
<ul id="nav">
<li><a href="#">WINDOWS</a>
<ul>
<li><a href="#">300 Series</a></li>
<li><a href="#">900 Series</a></li>
<li><a href="#">Sliding</a></li>
<li><a href="#">Bay and Bow</a></li>
</ul>
</li>
<li><a href="#">SIDING</a></li>
<li><a href="#">GUTTERS</a></li>
<li><a href="#">BASEMENTS</a></li>
<li><a href="#">GARAGE DOORS</a></li>
<li><a href="#">DOORS</a>
<ul>
<li><a href="#">Entry</a></li>
<li><a href="#">Patio</a></li>
</ul>
</li>
</ul>
</body>
</html>
I have seen this problem before but I have no idea how to fix it. My CSS dropdown menus are falling behind a javascript slideshow. I managed to tweek the zindex for a submenu that now shows above the slideshow but for the life of me I can't get the main menu to do the same. Its killing me. I would be happy to provide you with any code you might need to determine the problem but want to put it all here until asked as it might be quite extensive. If you need to see it, let me know. The site I am working on is alumniunit dott com Thanks, Bruce I'm not finding a topic which addresses this .. or at least one that I comprehend. I've just begun working with CSS, converting our website from one riddled with tables and frames. The new main page has a set of images at top (which finally don't have borders around them in any testing browser), and a set of dropdowns - which all browsers can see except AOL's. Our AOL user reports he is on 9.0 Optimized. (how kosher is it here to post the contents of an entire set of files..?) Pertinent Components: - CSS: http://www.legendsofkarinth.com/lok_cssindex.css - HTML: http://www.legendsofkarinth.com/smallership7a.html Problem Summary: - all browsers are seeing the rollover buttons performing properly but only after backing down from DOCTYPE STRICT to TRANSITIONAL and reinstalling BORDER="0" on all images with links; - all but AOL see the four dropdowns parading across the bottom (again, no links). As an aside, we had to back down from DOCTYPE STRICT to TRANSITIONAL in order for the images to line up in any browser.. I could use some advice there as well. Other than that, the page validates in STRICT but the images have a black line through the midpoint horizontal. Look fine in FF3 and Chrome, nothing shows in IE8. I likely screwed it up, there is a separate CSS for IE but I can't see what is missing. Thank you for your help, if you can spare it. www.tulsahope.com For the life of me, I can't figure out what is causing this problem. One of my sites (www.whyilovechicago.com) has a blog that I host on Blogger. I customized the blog layout to look exactly like the rest of the site, going as far as to call all of the CSS and images from my hosted domain. I have an unordered list displayed inline across the top of the content. In Firefox, both the blog and the website look fine. However in IE, the website looks fine BUT the blog displays the navigation links on separate lines. If the CSS is the same (I'm calling the same file), WTF is going on here? I'd appreciate if someone could take a look and see if I'm missing something... I'm having trouble getting a layout to look correct in IE (i know same old story) Looks fine is Fire Fox. Here is a link to see what the problem might be Let me know if you need to see the source code. Thanks, Jrock Help! I've spent WAY too much time on this....you wouldn't believe! I made a sliced image header in Photoshop and put it on my site using Dreamweaver. The home page and the calendar page built in Dreamweaver look fine. However, the other pages are actually a Blogger blog at a subdomain. When I put the header in the blog, it does wonky stuff! It looks worse in IE and Firefox (well, maybe--the last code testing did make IE look better). I know its a CSS problem. I've tried lots of different things and have watched them make changes, but nothing fixes it. I don't want to start all over and have my time be a total waste. I am only self-taught on all this stuff, so I think I need someone more knowledgeable to help me. The site is a www hanoverlutheran.com (I understand it takes 5 posts before I can share links, so that's abbreviated). Oh please! I hope someone has the answer! I spent 12 hours alone on it yesterday and many more today! The infamous z-index/select problem in ie6 has become a pain for me now. I have read countless articles and yet to find an understandable and stillworking example of how to get around this. Apprently there is an iframe method which seems to do the trick, however all sample code that is provided never works. IE 6 only problem: I have a list (like a good programmer) for my navigation that generates a drop down via css and some js. Selects stay above it regardless of z-index. I have countless selects scattered throughout my site. Can someone give me a WORKING example of how to get around this...i don't want to go down the road of hidding all the selects. We've implemented a slightly modified form of suckerfish dropdowns...apparently I can't post links, but it's at jlfurnishings.com Here's the markup and javascript: Code:
<ul id="nav-bar" class="nav-bar">
<li><a href="/jlf/pages/facility" >Facility</a></li>
<li><a href="#" >About Us</a>
<ul>
<li><a href="/jlf/pages/aboutjlf" >JLF</a></li>
<li><a href="/jlf/pages/aboutlm" >Lone Meadow</a></li>
</ul>
</li>
<li><a href="/jlf/pages/designerresources" > Designer Resources</a></li>
<li><a href="#" >Projects / Clients</a> <ul>
<li><a href="/jlf/pages/hotels" >Hotels</a></li>
<li><a href="/jlf/pages/restaurants" >Restaurants</a></li>
</ul>
</li>
<li><a href="/jlf/pages/links" >Links</a></li>
<li><a href="/jlf/pages/newsevents" >News / Events</a></li>
<li><a href="/jlf/pages/calendar" >Calendar</a></li>
<li class="nav-bar-white">
<a href="/jlf/pages/contactus"><font style="color:#2E350A;">Contact Us</font></a>
</li>
</ul><!--end nav-bar -->
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav-bar").getElementsByTagName("LI");
if (!sfEls) sfEls = document.getElementById("nav-bar-products").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>
Here's the CSS: Code:
#nav-bar {
position:relative;
float:left;
width:595px;
height:25px;
text-align:left;
padding-left:6px;
margin-left:30px;
line-height:25px;
}
.nav-bar {
position:relative;
float:left;
width:595px;
height:25px;
background:url(../img/content-nav-bg.jpg) #FFF no-repeat;
text-align:left;
padding:0px;
margin:0px;
padding-left:6px;
margin-left:30px;
line-height:25px;
color:#FFF;
}
.nav-bar li {
position:relative;
list-style:none;
display:inline;
margin:0px;
margin-left:-4px;
padding:0px;
}
.nav-bar a {
color:#FFFFFF;
font-size:11px;
font-weight:normal;
padding:0px;
padding-left:12px;
padding-right:8px;
margin:0px;
border-right:solid 1px #FFF;
margin:0px;
margin-left:-4px;
}
.nav-bar a:hover {
position:relative;
color:#2E350A;
background:#FFF;
padding:7px;
padding-left:12px;
padding-right:8px;
margin:0px;
margin-left:-4px;
}
.nav-bar li.nav-bar-highlight {
position:relative;
color:#FFF;
background:#FFFFFF;
font-size:11px;
font-weight:normal;
padding:7px;
padding-left:12px;
padding-right:8px;
margin:0px;
margin-left:-4px;
}
.nav-bar li.nav-bar-highlight a {
position:relative;
color:#2E350A;
background:#FFFFFF;
font-size:11px;
font-weight:normal;
padding:7px;
padding-left:12px;
padding-right:8px;
margin:0px;
margin-left:-4px;
}
/** this is for the "contact us" item that has a white background **/
.nav-bar-white {
background:#FFFFFF;
}
.nav-bar li ul, .nav-bar-products li ul { /* second-level lists */
position: absolute;
background: #E1E1E1;
z-index:9;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
.nav-bar li ul li, .nav-bar-products li ul li {
border:0px;
float:left;
clear:left;
margin-left:5px;
z-index:900;
}
.nav-bar li ul li a, .nav-bar-products li ul li a {
color:#4C4C4C;
border:0px;
width: 10em;
}
#nav-bar li:hover ul, #nav-bar li.sfhover ul, #nav-bar-products li:hover ul, #nav-bar-products li.sfhover ul { /* lists nested under hovered list items */
left: auto;
left:-20px;
top:10px;
z-index:900;
width: 10em;
}
They work fine in Firefox (for the most part...feels a little unstable), but in IE6 (and 7, I believe), the dropdowns are all jacked. Can anyone shed any light on this? I've played with it, but I'm not making any progress. My client is freaking out because this is overdue and my css guy is MIA and I'm about to rip my hair out. Any insight at all would be welcome... (URL address blocked: See forum rules) (dropdowns for 'About Us' and 'Projects / Clients') On a sidenote: how do you guys do this? I'm a PHP developer and CSS is like black magic to me :-) I can usually get things working fine in non-IE browsers, but then I pull up the site in IE and I'm completely mystified. Kudos to you all... Hello everyone, Thanks in advance for any help you can offer. I have a single page for a site I'm creating located he simplethoughts.com/test/index.html The css file for the page is located he simplethoughts.com/test/css/screen.css The main navigation is using suckerfish style dropdowns which work fine in IE7, firefox, and opera. However, when I try the page in IE6 or 5.5, the dropdowns 'drop' about 100px too low and WAY to the right of where they're supposed to and I can't seem to figure out why. Thanks again for any help...it's extremely appreciated! -Neil I'm a bit stumped as far as what I'm doing wrong. Big surprise, eh? Basically, I made a dropdown navigation menu (tested in FF 3.6.8 and IE 8)...works great. I used an unordered list to do so (and jquery). Well, the problem is, when I add another list to the page, it adopts some of the same properties as my menu I do have an ID for the navigation menu, so I'm not sure what's going on here. Any help, thoughts, or ideas would be DEEPLY appreciated! You can find the sample at: http://www.myztacia.com/animated-menu2.html I figured it was easier to post the link than force you to create the webpage yourself Anyone have a clue what I can add to this code to get it working right?! Here is the code for one of them... Code: <!-- AddThis Button BEGIN --> <td class="vbmenu_control" id="facebook" nowrap="nowrap"> <script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script> <div class="addthis_toolbox addthis_default_style"> <a class="addthis_button_facebook"></a> </div> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=***"></script> </td> <!-- AddThis Button END -->
Here is how it looks in FF... http://i34.tinypic.com/28it845.jpg Here is how it looks in IE... http://i34.tinypic.com/27yanvb.jpg Thanks for your help!!! Hey guys, I am in the process of adding a Twitter widget onto my website. I would like it to be very similar to that on http://www.spotify.com/us/about/what/. I am not sure how to edit the currently provided Twitter widgets to resemble that... Has anyone any idea? PS. I am looking for a programmer for my startup company. No cash, but rather equity. We need someone fluent in PHP. Hey, I am trying to edit a blogger template. What I want to do is make each drop down menu a different background color. SO like one item says 1 (hover) 2 | 3 | 4 (background is red) next to 1 is 5 (hover) 6 | 7 | 8 (background is green). Here is the layout and an example @ www. faketester.blogspot .com hi, Im making a menu that looks like: link1 link2 link3 link4 and then wen you hover over link a dropdown may appear i have the problem that when they appear, they lay on top of each other. ANy idea how to make they display under each other. (it doesnt even work in IE at the mo, but i gues ill laft2 sort that later) thanks this is the html: PHP Code: <ul> <li><a href="index.php?action=home">home</a></li> <li><a href="index.php?action=whatnew">what's new</a></li> <li><a href="index.php?action=offers">special offers</a></li> <li><a href="#">collections</a> <ul><a href="#">drop1</a></ul> <ul><a href="#">drop2</a></ul> <!--when looping thru categories, do a WHERE cat_status >= 2--> </li> <li><a href="index.php?action=sBask">shopping basket</a></li> <li><a href="index.php?action=contact">contact us</a></li> </ul> this is the relevant css: PHP Code: #nav ul li { position: relative; margin: 0; padding: 0 10px 0 10px; list-style: none; display: inline; } #nav ul li ul { position: absolute; display: none; } #nav ul li:hover ul { display: block; left: 0; top: 10px; } #nav ul li:hover ul li { height: 20px; } So for a long time I've seen that widths for dropdown menus must be fixed for one reason or another. Trying to make it so that the width of the dropdown was dynamic worked in IE, not Firefox, or vice versa. For instance, you had a horizontal nav menu (<ul>), with two items (<li>s), "cars" and "trucks". Under cars you have dropdown links for "Focus" and "Sky" (so the width could be very short) but for trucks you have "Chevrolet 510 Extended Cab" and "Ford Yadda Yadda Yad" (so a long width). The widths of these dropdowns would have to be specified, meaning that 1.) it wouldn't be perfect padding unless you define the perfect width and 2.) unless you want to define a different width for each dropdown, the width would have to be the same for all and you might have a buttload more padding for one (like the first item) than another (the second item). So I'm wondering, if I force my users to CSS3 (which luckily I'm working on a project where I can), does it allow us to ditch this convention, and dynamically size the width of the dropdown based on content? Maybe through display:table-cell? I've looked around and even the fanciest CSS3 dropdowns still appear to have fixed widths: http://webdesignerwall.com/tutorials/css3-dropdown-menu Hi, I have created a accordion menu using a spry widget built into Dreamweaver CS3. However I want to amend this so that the menu is collapsed until the user clicks on a category. Do I have to amend the CSS or the javascript to make it collapsed to begin with? Any help would be appericated. Thanks Gary Hi, Trying to get this widget to disappear using responsive design when the browser is less than 800px. I'm using WordPress and the theme is already responsive. Here's the media query in the style sheet now: @media only screen and (max-width: 800px) { /* and I added this part below (not working!) */ .page-title .widget-area { display:none !important; } } Please see http://simplemethod.ca to check it out. I'm trying to remove my big fancy title widget with the signup form in it (since it breaks in an ugly way when the responsive design kicks in!) Thanks for helping friends. I hope my post made some sense! Perhaps I'm using the wrong class names for the style change... This part has got me a bit stumped. Best Regards, Drew |
|||||||