|
CSS - Problem With Flyout Menu That Gets Hidden In Ie
Hello
I hope somebody can help me. I have a newly designed home page for my website, which looks fine now in pretty well all browsers - but I've just started getting feedback from people looking at the site with ie, and they say that the flyout menu on the left of the page is obscured by the content in the centre column when it does its flying out thing. I've tried giving the menu elements z-index:100; but it doesn't seem to have made any difference. I would be really appreciative if anyone can help - it is even more difficult to work out as I don't have access to a machine with ie as a browser, and remote screen shots don't show up the problem... This is the page: http://www.independentliving.co.uk/index.shtml And this is the part of the style sheet for the menu: .menu { width:150px; position:relative; margin:0; font-size:11px; margin:0px 0; z-index:100; } .menu ul li a, .menu ul li a:visited { display:block; text-decoration:none; color:#003366; width:150px; height:25px; text-align:center; border:1px solid #fff; border-width:1px 1px 0 0; background:#003366 url(nav.gif); line-height:19px; font-size:11px; z-index:100; } .menu ul { padding:0; margin:0; list-style-type: none; z-index:100; } .menu ul li { float:left; margin-right:1px; position:relative; z-index:100; } .menu ul li ul { display:none; } /* specific to non IE browsers */ .menu ul li:hover a { color:#996600; background:#cccccc; font-size:11px; text-decoration:none; z-index:100; } .menu ul li:hover ul { display:block; position:absolute; top:0; left:150px; width:150px; z-index:100; } .menu ul li:hover ul li a.hide { background:#ffffff; color:#003366; font-size:11px; text-decoration:none; } .menu ul li:hover ul li:hover a.hide { width:150px; font-size:11px; text-decoration:none; } .menu ul li:hover ul li ul { display: none; } .menu ul li:hover ul li a { display:block; background:#cccccc; color:#996600; width:200px; font-size:11px; text-decoration:none; z-index:100; } .menu ul li:hover ul li a:hover { background:#dfc184; color:#666666; font-size:11px; text-decoration:none; z-index:100; } .menu ul li:hover ul li:hover ul { display:block; position:absolute; left:151px; top:0; color:#003366; font-size:11px; text-decoration:none; z-index:100; } .menu ul li:hover ul li:hover ul li a { display:block; width:200px; background:#dfc184; color:#003366; font-size:11px; text-decoration:none; z-index:100; } .menu ul li:hover ul li:hover ul li a:hover { background:#bd8d5e; color:#fff; font-size:11px; text-decoration:none; z-index:100; } Any ideas gratefully received! Thanks Frances Similar TutorialsI changed over all my CSS flyout menus from the CSSPlay method to the whatever:hover method. It's working great. I've just got a minor, but annoying, problem that occurs in IE (6 & 7 tested). URL 1 URL 2 Check out the left-side navigation menus on those two pages. Obviously they're different files, but the code is exactly the same for the menus (except the path for the links, of course). The pages even use the same stylesheet. So why, then, does the menu flutter when you hover over the "Our Dogs" <li> on the base level menu, but not move a pixel on the /dogs/ level menu? Here's the path to the stylesheet: Stylesheet 1 I have a vertical flyout menu setup on the left side of the page with the associated links arranged in vertical columns next to each menu selection. It is working fine 99% of the time but I am getting some reports that the vertical columns do not touch the main selection column so that when the user moves the cursor to the right to go to the selection list there is a break between the columns and the column disappears before a selection can be made. I have not been able to duplicate this on my IE8 and it works fine with Firefox. This makes it rather hard to trouble shoot so I am hoping someone else has had this problem and know what I am talking about. It seems to only happen to users with IE7 and IE8 but not most IE8 users. Is there perhaps some code I need to add to the CSS file that will solve this problem? THX Hello, everyone. I'm a relative newcomer to CSS, and I decided I'd try and add a neat flyout menu to the new site I'm developing: www.mindwallpictures.com. As you'll notice, it works great in Firefox, but doesn't work at all in IE. Here is the CSS code from my site: Code:
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at (URL address blocked: See forum rules)
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.menu {
height:150px;
font-size:90%;
/* this page only */
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
position:relative;
z-index:500;
padding:0;
margin:0;
list-style-type:none;
width:150px;
}
/* style the list items */
.menu li {
background:#6b6b6b url(images/button.gif);
height:26px;
/* for IE7 */
float:left;
}
.menu li.sub {background:#6b6b6b url no-repeat right center;}
/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
/* style the links */
.menu a, .menu a:visited {
display:block;
text-decoration:none;
height:25px;
line-height:25px;
width:149px;
color:#FFF;
text-indent:5px;
border:1px solid #6b6b6b;
border-width:1px 1px 1px 1px;
}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {width:150px;}
/* style the link hover */
* html .menu a:hover {color:#adbaad; background:#888d88; position:relative;}
.menu li:hover {position:relative;}
/* For accessibility of the top level menu when tabbing */
.menu a:active, .menu a:focus {color:#adbaad; background:#888d88;}
/* retain the hover colors for each sublevel IE7 and Firefox etc */
.menu li:hover > a {color:#adbaad; background:#888d88;}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu li ul {
visibility:hidden;
position:absolute;
top:-30px;
/* set up the overlap (minus the overrun) */
left:100px;
/* set up the overrun area */
padding:30px;
/* this is for IE to make it interpret the overrrun padding */
background:transparent url(transparent.gif);
}
/* for browsers that understand this is all you need for the flyouts */
.menu li:hover > ul {visibility:visible;}
/* make the second level visible when hover on first level link */
.menu ul a:hover ul {
visibility:visible;
}
</style>
and here is the html that goes with it: Code:
<div class="menu">
<ul>
<li><a href="index.html">MindWall Home</a></li>
<li class="sub"><a href="#nogo">News</a>
<ul>
<li><a href="news/recent/index.html">Recent News</a></li>
<li><a href="news/archives/index.html">News Archives</a></li>
</ul>
</li>
<li class="sub"><a href="#nogo">Films</a>
<ul>
<li><a href="films/rendezvous/index.html"><i>A Dreamer's Rendezvous</i></a></li>
<li><a href="films/millberg/index.html"><i>Millberg Apartments</i></a></li>
<li><a href="films/musicvids/index.html">Music Videos</a></li>
<li><a href="films/upcoming/index.html">Upcoming Projects</a></li>
</ul>
</li>
<li class="sub"><a href="#nogo">Links</a>
<ul>
<li><a href="http://www.mooseheadfilms.com">Moosehead Studios</a></li>
<li class="sub"><a href="#nogo">Purdue</a>
<ul>
<li><a href="http://www.purdue.edu">University Home Page</a></li>
<li><a href="http://www.cla.purdue.edu/film-studies/">Film Studies Program</a></li>
<li><a href="http://purduefvsnewsletter.blogspot.com/">FVS Newsletter</a></li>
</ul>
</li>
<li><a href="http://www.imdb.com">Internet Movie Database</a></li>
</ul>
</li>
<li class="sub"><a href="#nogo">About Us</a>
<ul>
<li><a href="about/mindwall/index.html">About MindWall Pictures</a></li>
<li><a href="about/awards/index.html">Awards & Recognition</a></li>
<li><a href="about/crewbio/index.html">Crew Biography</a></li>
</ul>
</li>
<li class="sub"><a href="#nogo">Contact Us</a>
<ul>
<li><a href="contact/mindwall/index.html">Contact MindWall</a></li>
<li><a href="contact/crew/index.html">Contact film crew</a></li>
</ul>
</li>
</ul>
</div>
It has been altered (by myself, the n00b) from the original code found at CSSplay: http://www.cssplay.co.uk/menus/flyout_4level.html It's bugging the crap out of me, and the guy wants the site done as early as next week. This is the one thing holding me back, since people...actually...use IE. -_- Poor souls. Any help would be greatly appreciated! Thanks. Hi there, I'm working my way through html, css and web design at the moment, and looking at drop down menus. Currently I'm looking at css only menus, I haven't delved into javascript yet. So I I've got a few questions regarding what I've currently got: html4strict Code: Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello</title> <link type="text/css" rel="stylesheet" media="screen" href="default.css" /> </head> <body> <div id="navbar"> <ul> <li><a href="#">Main Page</a></li> <li><a href="#">About</a></li> <li><a class="dropmenu"><a href="#">Tutorials</a> <ul> <li><a href="#">Photoshop</a></li> <li><a href="#">Dreamweaver</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> </ul> </a></li> <li><a class="dropmenu"><a href="#">Articles</a> <ul> <li><a href="#">3 column magic</a></li> <li><a href="#">Site layouts</a></li> <li><a href="#">Creating Navbars</a></li> </ul> </a></li> <li><a href="#">Links</a></li> </ul> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> css Code: Original - css Code @charset "utf-8"; /* CSS Document */ #navbar ul { padding: 0; margin: 0; list-style: none; background-color: #3F9; width: 120px; } #navbar li { position: relative; } #navbar li li { position: static; } #navbar ul ul { background-color: #7B5; top: 0; left: 120px; display: none; position: absolute; } #navbar a { text-decoration: none; text-align: center; display: block; padding: 5px 10px; } #navbar a.dropmenu { padding: 0; margin: 0; border: none; display: block; } #navbar li:hover ul, #navbar a.dropmenu:hover ul { display: block; } #navbar a:hover, #navbar li:hover { color: #000; background-color: #3CF; } #navbar li:hover li:hover { background-color: #F04; } @charset "utf-8"; So its currently a vertical flyout menu, I'll be looking at horizontal drop down ones soon. Regarding the last css rule, I was just experimenting with presentation and was wondering if I could make the second level of menus have a different hover background colour than that of the initial menu. Is it just something I've got wrong with the selector (#navbar li:hover li:hover)? The 2nd, more puzzling thing, is that you can see in the first menu, only the text comes up as a hyperlink (or clickable). In the second level menus, the whole area of the li (being an a element displayed in block mode) is clickable. I am pretty sure this is a result of setting the position property of the the li elements to relative. I have set the li elements to static (default) in the second menu, and as noted, they work fine (or more desirably). Why does changing the position property of the li to relative suddenly stop it from being clickable? The relative positioning is needed to correctly position the second level uls (menus), unless there is another way to do that. BTW Currently looking at it with ie7 at the moment. What's going on here? Lastly, I was hoping my a.dropmenu elements would let ie6 display the menu; sadly this doesn't seem to be happening. Again, any ideas what's gone wrong? the following code works in opera and i think mozilla, but in ie only the top menu flies-out. the other two (a div in a table, and a table in a div) don't work. Any idea how to amend the css so they do work. I have tried setting the z-index to various things, so i dont think that's it. ...waiting to fly Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
--><HTML>
<HEAD>
<TITLE> New Document </TITLE>
<link rel="stylesheet" media="all" type="text/css" href="css/flyout2.css" />
<!--[if lte IE 6]>
<style>
.nav-head ul li a.hide, .nav-head ul li a:visited.hide {display:none;}
.nav-head ul li a:hover ul li a.hide {display:none;}
.nav-head ul li a:hover {color:#fcf; background:#36f;}
.nav-head ul li a:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;z-index:99;overflow:visible;}
.nav-head ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.nav-head ul li a:hover ul li a {display:fixed; background:#22e; color:#000;}
.nav-head ul li a:hover ul li a ul {visibility:hidden;}
.nav-head ul li a:hover ul li a:hover {background:#cc0; color:#0a0;}
.nav-head ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#955;}
</style>
<![endif]-->
</HEAD>
<BODY>
From code at <A HREF="http://www.cssplay.co.uk/menus/flyoutt.html">this site</A><BR>
<div class="nav-head">
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>
<!--[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK >
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</div>
<!-- end 1 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1 -->
<TABLE width='30%' bgcolor='red'>
<TR>
<TD>
<div class="nav-head">
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>
<!--[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK >
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</div>
</TD>
</TR>
</TABLE>
<!-- end 2 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1 -->
<div class="nav-head">
<TABLE bgcolor='yellow' width='250%' height='250%'>
<TR>
<TD>
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>
<!--[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK >
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</TD>
</TR>
</TABLE>
</div>
</BODY>
</HTML>
I was wondering if anyone knows of any tutorials or resources for creating a menu system using css. The problem I have is that when I change the submenu's which are divs to display, they pop into place. I want to change this aspect and assume there is a javascript solution to make the display slow down, but have not been able to find one on this forum or using google. Perhaps a pointer or two? Hi, I am hoping someone can help me please. I am looking for some code (CSS, PHP or otherwise) to be able to create a drop down menu (with flyout) on mouseover of some pre-existing pictures. I have tried to take some codes which "sort of" do what I need but I'm unable to modify them to do what I need them to. It seems like the varying widths of the PNGs is a sticking point. At the minute I have a navigation bar consisting of 5 PNGs of same height but different widths. I had intended it to work so that when you click on these top links you are given a page for that section, and along the top of that page are "sub links". However, I have changed my mind and would like to keep the current images, but on rollover have a drop down menu appear with the different "sub links" instead of having them on the top of each page. For example I have a PNG which says "About Clan Wars". I would like a mouseover to show a Dropdown with flyout like: >What Is Clan Wars? >What are the rules ----> D Class Rules ----> C Class Rules >Clan Wars 1 ----> Fight Card ----> Pictures ----> Videos >Clan Wars 2 ----> Fight Card ----> Pictures ----> Videos I hope that makes sense to whoever is reading. Thank you Sean I would first like to start out by stating that I hope I put this in the right forum. If it is a problem with my html, then obviously I am trying to fix the wrong things. I also hope that I am using the proper terminology or something close enough that you can understand. Anyway, here is my problem. I have created a website for a dog rescue group with no spare money. So they picked me to create a website. I knew nothing about how to do it so I have been teaching myself along the way. The woman in charge of the group decided that she wanted a flyout in the left navigation and tasked me with creating it. So after a lot of research I thought I had it. Alas, I did not. That brings me to you guys. Firefox Problems: The flyouts are not big enough. They do not expand to fix the words. It looks much like text wrapping. I can't figure this out because it works in IE When I add lists in the main portion of the page and add a third tier to it, a flyout box appears at the top of the page instead of the list. Also on the lists, clicking on a something linked, stretches a "you clicked on me" box across the entire length of the page. (sorry for a lousy description. I don't know the actual term.) IE Problems: The colored boxes that surround the two links that have the flyouts, have an extra line of color below the link. I am not sure what is causing this. On one flyout are two links. The top one is cut off immediately after the word even though the one below it is not. It has the same problem with the third tier of lists being in a flyout at the top of the screen that Firefox has. If this isn't the correct area of code let me know. Oh, and I validated both the XHTML and CSS. CSS: PHP Code: #nav ul { margin:10px 0 10px 5px; padding:0 0 0 0; background:transparent; } #nav li { list-style-type: none; position: relative; background:#B7D7AF; color: #daa520; border:1px solid #7DB26E; text-align:left; padding:0 0 0 0; margin-bottom:6px; vertical-align: bottom; } #nav li a { color: #ffffff; font-weight:bold; text-decoration: none; display: block; padding:2px 0 2px 5px; } #nav li a:hover { background:#ffffff; color: #7F9BC5; } #nav li a:hover:after { background:#ffffff; color: #7F9BC5; content: url(img/square.gif) } #active a { display: block; color: #FFF; background-color: #99CCFF; width: 15.65em; padding: .2em .8em; text-decoration: none; } .navholder { width: 8em; float: left; display: inline; margin: 15px 20px 5px 20px; } ul a { display: block; padding: 5px 10px; vertical-align: bottom; text-align: left; text-decoration: none; color: #552; } ul ul { position: absolute; left: -3000px; background: #fed; } li:hover {background: #ddf;} ul li:hover ul { left: 10em; top: 2px; } ul a:hover {text-decoration: underline;} /* \*/ /*/ ul li ul {position: static;} /* */ XHTML: PHP Code: <div class="wrapper"> <div class="navholder"> <div class="leftcontent" id="nav"> <img alt="bg image" src="img/left_bg_top.gif" /> <ul> <li id="active"><a href="index.html">Home</a></li> <li><a href="about_us.html">About Us</a></li> <li><a href="our_team.html">The Team</a></li> <li style="z-index: 10;"><a href="adoption_process.html">Adoption Process</a> <ul> <li><a href="our_dogs.html">Our Dogs</a></li> <li><a href="special_needs_dogs.html">Special Needs Dogs</a></li> </ul> </li> <li style="z-index: 9;"><a href="how_to_help.html">How To Help Us</a> <ul> <li><a href="how_to_help_volunteer.html">Volunteer</a></li> <li><a href="how_to_help_foster.html">Foster</a></li> <li><a href="how_to_help_other.html">Other Ways To Help</a></li> </ul> </li> <li><a href="helpful_information.html">Helpful Information</a></li> <li><a href="contact_us.html">Contact Us</a></li> </ul> I have screenshots I may be able to post later, in case I am not explaining the problem correctly or so you can see what it looks like on my computer. I am new so I am restricted until 5 posts. I am not sure if you can look on my homepage in my profile (which is the same one I am talking about here). It is test.html and doctors_office.css Any help would be great. If someone knows and easier way of do this would (if I took the long/hard way), that would be great, also. Thanks in advance from someone new at this. I am trying to build a menu that will load content either on the right of it or the left. I have looked for a tutorial on how to do this but am having no luck with the search engines. Here is a picture of what I would like to do. If anyone can assist me with this it would be very helpful. Or maybe even point me in the direction of a source. Thank you! Hi Folks This is my first post here, hopefully I'll keep to etiquette I'm always ready to be corrected if I step out of line. Anyway, I have an unusual problem I can't seem to solve. I am making a menu with drop downs using lists, I have it working in my HTML editor (CoffeeCup). When I try to view it in Firefox or IE7 the sub lists show and push the tabs I made to the side. Here is the CSS I'm trying to use, some I've taken from tutorials, some of my own (which is where the problem possibly lies) Code: /*1. Taken from http://www.sohtanaka.com/web-design/liquid-color-adjustable-css-buttons/ with thanks */
.btn {
float: left;
background: url(images/btn_left.png) no-repeat;
margin: 5px 0;
}
.btn a{
float: left;
height: 40px;
width:100px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
color: #fff;
font-size: 1em;
text-decoration: none;
padding-bottom:25px;
padding-left:10px;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
float: left;
width: 10px;
height: 40px;
}
.btn_home { background-color: #575757;padding-left:10px; }
.btn_e1 { background-color: #575757;padding-left:10px; }
.btn_e2 { background-color: #575757;padding-left:10px; }
.btn_e3 { background-color: #575757;padding-left:10px; }
.btn_e4 { background-color: #575757;padding-left:10px; }
.btn_e5 { background-color: #575757;padding-left:10px; }
.btn_home:hover { background-color: #DC134C; }
.btn_e1:hover { background-color: #DC134C; }
.btn_e2:hover { background-color: #FF00FF; }
.btn_e3:hover { background-color: #DC134C; }
.btn_e4:hover { background-color: #DC134C; }
.btn_e5:hover { background-color: #DC134C; }
/*End of 1*/
/*My random scrawlings*/
#navigation {
height:35px;
width:787px;
position:relative;
margin:0 auto 0 auto;
z-index:100;
}
#navmenu, #navmenu ul {
padding:0;
margin:0;
list-style-type:none;
}
#navmenu {
margin:0;
}
#navmenu li {
float:left;
position:relative;
text-align:center;
}
#navmenu li a, #navmenu li a:visited {
width:101px;
font-size:1em;
font-family:Arial;
height:16px;
text-decoration:none;
}
#navmenu li li a, #navmenu li li a:visited {
display:block;
width:122px;
color:#fff;
height:15px;
text-decoration:none;
z-index:100;
margin-left:-1px;
}
#navmenu li:hover > a {
background-color:;
color:#fff;
text-decoration:underline;
}
#navmenu li li:hover > a {
background-color:#DC134C;
color:#fff;
text-decoration:underline;
}
#navmenu li ul {
display: none;
}
#navmenu li:hover > ul {
display: block;
position: absolute;
top:0;
left:203px;
}
#navmenu > li:hover > ul {
left:0;
top:35px;
}
/*End of my random scrawling*/
And here is the HTML I'm using the create my lists Code: <div id="navigation">
<ul id="navmenu">
<li class="btn btn_home"><a>Home</a><span></span></li>
<li class="btn btn_e1"><a>Element 1</a><span></span></li>
<ul>
<li><a>Sub 1</a></li>
<li><a>Sub 2</a></li>
<li><a>Sub 3</a></li>
<li><a>Sub 4</a></li>
</ul>
<li class="btn btn_e2"><a>Element 2</a><span></span></li>
<ul>
<li><a>Sub 5</a></li>
<li><a>Sub 6</a></li>
<li><a>Sub 7</a></li>
<li><a>Sub 8</a></li>
<li><a>Sub 9</a></li>
</ul>
<li class="btn btn_e3"><a>Element 3</a><span></span></li>
<li class="btn btn_e4"><a>Element 4</a><span></span></li>
<li class="btn btn_e5"><a>Element 5</a><span></span></li>
</ul>
</div>
Any help in where I've been going wrong would be greatly appreciated. Thanks Dave Hi all, I have a problem with a site I am developing. I am using CSS and all was well until I placed a Flash Movie on the homepage. The general layout is as follows: Code: <div id="wrapper"> <div id="banner"></div> <div id="nav">links etc</div> <div id="content">Content text etc</div> <div id="flashMovie">Flash movie here</div> <div id="footer"></div> </div> The 'nav' div uses a ProjectSeven popmenu which works fine. It's Z-index is something like 2000. The dropdown menu hides behind the 'flashMovie' layer every time, but appears in front of the content layer??? I have tried messing with the z-index of the 'flashMovie' div but to no avail. I have tried absolute positioning, floats, everything I can think of but with no success. Any advice on what the problem could be would be greatly appreciated. I apologise for not having the actual site online, but Its under development on my other machine. Thanks in advance, Duncan I'm having problems with a javascript rotating picture overlapping my drop down menu! I've fiddled around the the z-index but cant seem to get the drop down menu to drop ABOVE the picture. Everything is contained inside my <div id="wrapper"> and my layout scheme works like: Banner = top image ("Why won't my drop menu's show up") the image extends all the way down to the menu, and then the navigation is just words that go on top of the menu texture i've made. The only gif im using in the #nav is for the small yellow triangle for the roll over effect on the menu's. I get the white and menu bar on the sides because i just made the background a 40px height by 10px width image the sample and had it repeat in x only and then set background colour to that grey. My images are all inside the .main_view div id. Any help is appreciated! you can see my problem he htmltest2.weebly.com What do i need to do to fix this?! I use centered css layout on my site. There is a problem with IE on one page. Sometimes main layer content comes hidden but only text content. Like this: http://img351.imageshack.us/img351/5152/hidden1zu.jpg When on mouse over to the table cells text comes. Like this: http://img351.imageshack.us/img351/1853/nothidden2pe.jpg No problem with Firefox or Opera. The page url is: http://www.limk.com/sonyorumz.php Can you help me about finding the solution? Have some (for me) a mysterious problem when mousing over an image inside a div. I use javascript to change the class of a div when either onMouseOver or onClick of the div. If I use onMouseOver to change the class of the div then the mousing over the image inside div is working fine. If I use onClick to change the class of the div then the mousing over the image inside div is NOT working fine. Why is that? Is there a way to make it work as I want? 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">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="Keywords" content="div, bug, onmouseover, onclick, image, ">
<meta name="Title" content="DIV onmouseover bug">
<meta name="Description" content="onmouseover over image inside DIV causes div onmouseout event to fire">
<title>onClick event of DIV causes mouseover of image in second example to make DIV hidden</title>
<style type="text/css">
body { margin:0; padding:0; }
.esmall { display:block; z-index:2; position:absolute; cursor:pointer; height:20px; width:300px; border:0; background-color:#a44; font-family:arial,sans-serif; font-size:12px; color:#fff; overflow:hidden; }
.elarge { display:block; z-index:3; position:absolute; cursor:pointer; height:auto; width:300px; border:1px solid black; background-color:#fff; font-family:arial,sans-serif; font-size:12px; color:#000; overflow:hidden; }
</style>
</head>
<body>
<div id="div1" class="esmall" onmouseover="this.className='elarge'" onmouseout="this.className='esmall'" style="left:10px; top:50px;">
<div style="display:block; margin:2px;">
MouseOver this div.<br><br>Then try to mouse over the image or the square below. Here it should work fine<br><br>
<img src="event-edit.gif" alt="Edit" onclick="alert('Run som function here')" title="" border="1" height="15px" width="15px" style="background-color:red"><br><br>
</div>
</div>
<div id="div2" class="esmall" onclick="this.className='elarge'" onmouseout="this.className='esmall'" style="left:320px; top:50px;">
<div style="display:block; margin:2px;">
Click here. Then try to mouseover image inside DIV<br><br>Then try to mouse over the image or the square below.<br><br> You will see that mousing over image causes the DIV to get its original size, as if you moved the mouse outside the div.<br><br>
The only difference between the two divs a First DIV uses onMouseOver and second uses onClick<br><br>
I would like this one to work but without the div dissapearing when I mouseover/mouseout of the image below.<br>How do I make it work?<br><br>
<img src="event-edit.gif" alt="Edit" onclick="alert('Run som function here')" title="Try to click me if you can" border="1" height="15px" width="15px" style="background-color:red;"><br><br>
Tested in: FF, IE, OP NE<br><br>
I use the nested divs to cope with some differences in padding behaviour between the browsers. It does not affect what I'm trying to do.
</div>
</div>
</body>
</html>
Hi there. I'm developing a website using Wordpress as the major CMS, it uses a navigation plugin called NAVT which makes dynamic navigation menus and allows you to nest some links under other links. Click here to see how it outputs the HTML. Basically it's a series of unordered lists inside other unordered lists, cluttered with various classes (none of them used by the plugin itself). So basically I want to turn that into a pure CSS only flyout/dropdown menus, I've seen code flying around but with all those classes that NAVT applies I'm struggling to adapt it. Has anyone done something similar to this? Cheers, Hello, after a few hours I managed to identify the CSS element responsible for this problem. However so far I have no solution on how I could solve this problem. Basically the problem is very minor but still frustrating. I am using the following command to set a DIV element with transparent background; Code: filter: progid:DXImageTransform.Microsoft.gradient (gradientype=0,startColorstr='#60ff0000', endColorstr='#60ff0000'); The DIV element becomes transparent. However the parent element - which is set with the CSS attribute overflow:hidden - is always displaying an extra pixel on the right of the container. This might not be clear at first, which is why I attached the following screen shot. (the light red line is the extra 1px I am referring to) If I remove the transparency CSS attribute for IE8 then this extra 1px will disappear. However that means loosing the wanted transparency. I have also developed the following example of the problem; Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {
margin: 0px;
padding: 0px;
/*
* IE hack to center .content div (part1).
*/
*text-align: center;
}
div.content {
width:600px;
margin: 0px auto;
/*
* IE hack to center .content div (part2).
*/
*text-align: left;
}
div#a {
border-bottom: 1px solid grey;
border-top: 1px solid grey;
padding-bottom: 5px;
padding-top: 5px;
}
div#a div#b {
overflow: hidden;
height: 280px;
position:relative;
}
div#a div#b div#c {
position: absolute;
}
div#a div#b div#c img {
border: none;
display: block;
}
div#a div#b div#e {
background-color: red;
color: #fff;
position:absolute;
padding: 20px 10px;
width:260px;
height: 240px;
margin-left: 500px;
/* IE8 hack for background colour with alpha value */
filter: progid:DXImageTransform.Microsoft.gradient
(gradientype=0,startColorstr='#60ff0000', endColorstr='#60ff0000');
}
</style>
</head>
<body>
<h1>Test 5</h1>
<div id="a" class="content">
<div id="b">
<div id="c">
<img src="pic.png" />
</div>
<div id="e">
hello
</div>
</div>
</div>
</body>
</html>
Does anyone know what's causing the problem and how I can solve it. It is true that 1px might not sound much. But it still frustrates me knowing that it is there and the fact that on Firefox all works great. Hi there i have a small problem and i think it lies in my nav menu, basically i want my menu to float right which it does but i'm left with this large white area on the right side of my webpage. please could someone take a look and help me my website being webbid.co.uk and the code :- Code: ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul#nav {
float: right;
position: relative;
z-index: 597;
}
ul.dropdown li {
float: right;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 598;
cursor: default;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 599;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 100%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
Thanks in advance. Hi I used an online css menu generator. After tweaking it to my liking, I decided to take a look in IE7, the box that contains the menu is shifted out from the left of the page. It works fine in FF and Opera. Here is the code: Code: <ul class="menu"> <li><a href="#" class="active"><span>Home</span></a></li> <li><a href="#"><span>Trainer</span></a></li> <li><a href="#"><span>Studio</span></a></li> <li><a href="#"><span>Services</span></a></li> <li><a href="#"><span>Contact</span></a></li> </ul> CSS Code:
.menu{
padding:0;
width:175px;
list-style:none;
margin-top: 10;
margin-right: 10;
margin-bottom: 10;
background-color: rgb(16,33,72);
background-position: left;
}
}
.menu li{padding:0; margin:0 0 1px 0; height:40px; display:block; }
.menu li a{
text-align:left;
height:40px;
font:16px Verdana, Arial, Helvetica, sans-serif;
color:rgb(255,255,255);
display:block;
background:url('verMenuImages.png') 0px 0px no-repeat;
text-decoration:none;
padding-top: 0px;
padding-right: 50px;
padding-bottom: 0px;
padding-left: 50px;
}
.menu li a:hover{background:url('verMenuImages.png') 0px -40px no-repeat; color:rgb(255,255,255);}
.menu li a.active, .menu li a.active:hover{background:url('verMenuImages.png') 0px -80px no-repeat; color:rgb(255,255,255);}
.menu li a span{line-height:40px;}
I have tried putting it in a frame, another div. Moving it lower down the page. But it still does the same thing. I cant figure out what attribute is causing it. Thanks for looking Here is the page I am working on. Here is the tabs.css: Code:
#tabBox {
border: 1px solid #000099;
clear: both;
padding-top: 5px;
background: #000099;
}
#contents {
padding: 1.5em;
background: #FFFFFF;
min-height: 100px;
}
#info {
position: relative;
width: 100%;
height: 3em;
}
#info ul#tabs {
margin: 0;
padding: 0;
position: absolute;
bottom: -1px;
}
#info ul#tabs li {
display: inline;
list-style: none;
}
#info ul#tabs a, #info ul#tabs span, #info ul#tabs a.current {
display: block;
float: left;
padding: 4px 5px;
margin: 1px 3px 0 0;
text-align: center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
}
#info ul#tabs span, #info ul#tabs a.current, #info ul#tabs a.current:hover {
border: 1px solid #000099;
border-bottom: none;
background: #000099;
padding-bottom: 5px;
margin-top: 0;
}
#info ul#tabs a {
background: #FFFFFF;
border: 1px solid #000099;
color: #000099;
}
#info ul#tabs a:hover {
margin-top: 0;
border-color: #000099;
background: #3399FF;
padding-bottom: 4px;
}
Here is the html: Code:
<div id="product">
<h1>Compact Product Page</h1>
</div>
<!--Start tabs-->
<div id="info">
<ul id="tabs">
<li><span>Overview</span></li>
<li><a href="compact_td.html">Technical Data</a></li>
<li><a href="compact_rp.html">Related Products</a></li>
<li><a href="compact_img.html">More Images</a></li>
<li><a href="compact_ms.html">Maintenance & Support</a></li>
</ul>
</div>
<!--end tabs-->
<div id="tabBox">
<div id="contents"></div>
</div>
Ignore the problems with the top navigation - I have another post already going trying to fix that problem. in FF the #tabBox and #contents are at the bottom of the page and not right beneath the #tabs. I borrowed and edited the css/html to do this and have looked over it several times and I cannot figure out why it is doing this. Hello, I have a css menu (no ie) that I am almost finished with. you can view it and the source code here : http://www.ryanfarrell.org/newindex.php I have offset the second tier to the left by 10px so that I and you could see the problem. As you can see I put a red border around the nav div. I have a second div that will go under the whole menu system but right now the red border doesn't go around the whole menu, only the first tier. I could just increase the margin of the bottom div so that its not hidden by the second tier of the menu but when the user increases the text size, it gets swallowed up again. I hope you understand the problem. Any ideas? See anything wrong with the code? Thanks |
|||||||