|
CSS - Floating Menu Not Working In Ie
Hi All,
I have a site PHP Code: hopevalleycamp.com which features a three box floating menu over a single background image. The menu "works" in Firefox and Safari, but not in IE8. I'm not sure if there is a"fix" I can apply for IE or not. The code for the menu css can be viewed here... PHP Code: * { font-family: Arial,Helvetica,sans-serif; } .yuimenubar { position: static; visibility: visible; } .yuimenu .yuimenu, .yuimenubar .yuimenu { left: -10000px; position: absolute; top: -10000px; visibility: hidden; } .yui-menu-shadow { position: absolute; visibility: hidden; z-index: -1; } .yuimenubar ul, .yuimenu ul { list-style-type: none; } .yuimenubar ul, .yuimenu ul, .yuimenubar li, .yuimenu li, .yuimenu h6, .yuimenubar h6 { margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; } #productsandservices { overflow-x: hidden; overflow-y: hidden; padding-left: 0; position: relative; z-index: 1; } .yuimenuitemlabel, .yuimenubaritemlabel { white-space: nowrap; } .hide-scrollbars * { overflow-x: hidden; overflow-y: hidden; } .hide-scrollbars select { display: none; } .yuimenu.show-scrollbars { overflow-x: visible; overflow-y: visible; } .yui-skin-sam .yuimenubar > .bd > ul:after { clear: both; content: "."; display: block; height: 0; line-height: 0; visibility: hidden; } .yui-skin-sam .yuimenubaritem { float: left; } .yui-skin-sam .yuimenubarnav .yuimenubaritem { line-height: 1.42em; margin-right: 11px; } .yui-skin-sam .yuimenubaritemlabel { background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: none; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto auto; color: #FFFFFF; display: block; line-height: 1.42em; text-align: center; text-decoration: none; text-transform: uppercase; } .yui-skin-sam .yuimenubaritemlabel-selected, .yui-skin-sam .yuimenubaritem a.active, .yui-skin-sam .yuimenubaritem-hassubmenu-selected { color: #FFFFFF; } .yui-skin-sam .yuimenubarnav .yuimenubaritemlabel { font-size: 34px !important; font-weight: bold; line-height: 1.42em; } .yui-skin-sam .yuimenu .bd { left: 0; overflow-x: hidden; overflow-y: hidden; top: 0; width: 151px; } .yui-skin-sam .yuimenu ul { padding-bottom: 10px; padding-left: 19px; padding-right: 19px; padding-top: 10px; } .yui-skin-sam li.first-of-type a.active, .yui-skin-sam li.first-of-type a.yuimenubaritemlabel-selected { } .yui-skin-sam .yuimenuitemlabel { color: #FFFFFF; font-size: 14px; font-weight: bold; line-height: 25px; padding-left: 12px; text-decoration: none; text-transform: uppercase; } .yui-skin-sam .yuimenuitemlabel-selected, .yui-skin-sam .bd .yuimenuitem a.active { background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: url("images/drop-hover.png"); background-origin: padding-box; background-position: 0 0; background-repeat: no-repeat; background-size: auto auto; color: #AF4B3E; display: block; overflow-x: hidden; overflow-y: hidden; } #yui-gen0 { background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: url("images/bg-li.png"); background-origin: padding-box; background-position: 0 0; background-repeat: no-repeat; background-size: auto auto; width: 210px; } #yui-gen0 a.yuimenubaritemlabel { height: 115px; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 95px; } #yui-gen0 .bd { background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: url("images/bg-li-drop.png"); background-origin: padding-box; background-position: 0 bottom; background-repeat: no-repeat; background-size: auto auto; margin-top: -12px; width: 210px; } #yui-gen0 .yuimenuitemlabel-selected, #yui-gen0 .bd .yuimenuitem a.active { color: #95D4B5; } #yui-gen1 { background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: url("images/bg-li2.png"); background-origin: padding-box; background-position: 0 0; background-repeat: no-repeat; background-size: auto auto; width: 210px; } #yui-gen1 a.yuimenubaritemlabel { height: 115px; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 95px; } #yui-gen1 .bd { background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: url("images/bg-li2-drop.png"); background-origin: padding-box; background-position: 0 bottom; background-repeat: no-repeat; background-size: auto auto; margin-top: -12px; width: 210px; } #yui-gen1 .yuimenuitemlabel-selected, #yui-gen1 .bd .yuimenuitem a.active { color: #F7C609; } #yui-gen2 { background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: url("images/bg-li3.png"); background-origin: padding-box; background-position: 0 0; background-repeat: no-repeat; background-size: auto auto; margin-right: 0; width: 210px; } #yui-gen2 a.yuimenubaritemlabel { height: 115px; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 95px; } #yui-gen2 .bd { background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: url("images/bg-li3-drop.png"); background-origin: padding-box; background-position: 0 bottom; background-repeat: no-repeat; background-size: auto auto; margin-top: -12px; width: 210px; } #yui-gen2 .yuimenuitemlabel-selected, #yui-gen2 .bd .yuimenuitem a.active { color: #C01349; } .first-of-type a, .first-of-type li a.active, a.yuimenubaritemlabel { color: #FFFFFF; font-size: 34px; text-transform: uppercase; } All help appreciated in advance! Similar TutorialsI saw this appealing menu from a css contest page and i've studied the code over and over again but i can't seem to get the same effect as this person has done. He has created a menu that just floats while the screen is able to scroll up and down. the site is : http://contest.prestontalk.com/index/FluidFixed/0/4/1/ if anyone knows how this effect is done, let me know. thanks! hey I am trying to get this sub menu floating on the rollover of a list item. Here's my HTML: Code: <body> <div id="banner"> </div> <div id="leftmenu"> <ul> <li>List 1</li> <li><a href="">List 2</a></li> <li><a href="">List 3</a> <ul> <li><a href="">List 3.1</a></li> <li><a href="">List 3.2</a></li> <li><a href="">List 3.3</a></li> <li><a href="">List 3.4</a></li> </ul> </li> <li><a href="">List 4</a></li> <li><a href="">List 5</a></li> <li><a href="">List 6</a></li> <li><a href="">List 7</a></li> <li><a href="">List 8</a></li> <li><a href="">List 9</a></li> </ul> </div> <div id="maincontent"> CONTENT </div> </body> and this CSS: Code:
#leftmenu {
position: absolute;
margin: 0px;
top: 120px;
left: 0px;
width: 147px;
height: 800px;
background-color: #cccc66;
font-size: 10px;
font-weight: bold;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
ul li {
color: #FFFFFF;
display: block;
background-color: #FF0000;
margin-bottom: 1px;
text-align: right;
font-weight: bold;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
}
ul li a:hover {
color: #000000;
}
ul li ul {
display: none;
position: absolute;
top: 200px;
left: 100px;
}
#maincontent {
position: absolute;
z-index: 0;
left: 147px;
top: 120px;
height: 381px;
width: 100%;
padding-top: 10px;
padding-left: 10px;
margin-top: 0px;
margin-left: 0px;
background-color: #FFFFFF;
font-family: Arial;
font-size: 13px;
}
so yeah, I am struggling at this point, I have looked at a reference that someone gave me last time I brought up the issue, but can't get it working, if you can spot why, help would be appreciated, not having much luck, thinking maybe a syntax thing(?), not sure...HELP!! kr. I want to create a menu that will float on the side of my page and stay in the same position on the screen as the user scrolls down. Is this done with CSS, Javascipt, or a little bit of both? thanks. I have seen this done but can't find any examples at the moment, but what I am looking to emmulate is have a page that required vertical scrolling. On either the left or right hand side is (for example) a square image and directly below it is a menu. When the user scrolls down the page the image goes off the top but the menu sticks to the top so is always visable. When the user scrolls back up as soon as the image starts to appear it pushes the menu back down so it is sat below the image. If i used position:fixed I can keep the menu in the same place when scrolling but I would like it to rise to the top of the browser when space is availble when scrolling. Make sense? I've used divs before and got them to work just fine. I've read previous posts and can't find the answer I'm looking for because it seems so basic. But here is my problem. I simply can't get the divisions to float left or right. They just sit on top of one another. Here is my style sheet code: Code: #container
{
margin: 0px;
padding: 0px;
width: 800px;
}
#header
{
margin: 0px;
padding: 0px;
background-color: Blue;
}
#menu
{
background-color: Gray;
float: left;
margin: 0px;
padding: 0px;
width: 140px;
}
#content
{
float: right;
margin: 0px;
padding: 0px;
width: 650px;
}
#footer
{
margin: 0px;
padding: 0px;
width: 800px;
}
and my HTML: Code: <div id="container">
<div id="header" align="center">
<!-- #INCLUDE VIRTUAL="includes/example_header.aspx" -->
</div>
<div id="midsection" align="center">
<div id="menu">
<!-- #INCLUDE VIRTUAL="includes/example_menu.aspx" -->
</div>
<div id="content">
<!-- #INCLUDE VIRTUAL="includes/example_common_content.aspx" -->
<p>
Garbage.
</p>
</div>
</div>
<div id="footer" align="center">
<!-- #INCLUDE VIRTUAL="includes/example_footer.aspx" -->
</div>
</div>
Thanks in advance for your help. See the image at http://i187.photobucket.com/albums/x205/vitainf/IEhelp.png - having trouble to get it showing the image with the bbcodes :S As you can see the menu to the right, which is known as '.sidebar' in the css followed below, is sort of pushing the main content, which is known as .content in the css below, down. Anyone has any idea how to fix this? Style Sheets Code: body
{
text-align: center;
background: #800000;
color: #fff;
}
* {
padding: 0;
margin: 0;
}
div#container
{
margin-left: auto;
margin-right: auto;
width: 700px;
text-align: left;
}
#spacer {
height: 50px;
}
#header {
height: 100px;
width: 100%;
background: url(ctfiles/logo.png) no-repeat top center #000;
}
#container {
background: #fff;
padding: 10px;
}
#main {
background: #000;
color: #fff;
width: 700px;
}
.sidebar {
float: right;
text-align: right;
background: #000;
color: #fff;
width: 30%;
padding-left: 8px
padding-right: 12px
}
.content {
color: #fff;
background: #000;
width: 70%;
margin-left: 2px;
margin-right: 2px
}
HTML/Template/PHP w/e Note: It's a template for the MODx CMS, which explains some of the calls like [(site_name)]. The lorum ipsum is in the [*content*] call, the menu in the [[wayfinder...]] one. PHP 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> <title>[(site_name)] | [*pagetitle*]</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="[(base_url)]chinatown.css" type="text/css" media="screen" /> <base href="[(site_url)]" /> <!--[if lte IE 6]> <style type="text/css" media="screen, tv, projection"> body { behavior: url(assets/js/csshover.htc); } /* hover:anything support */ #content { margin-left: 22px; } /* to avoid the BMH */ a, a:link { border-bottom-style: solid } /* becuase IE just doesn't dot */ </style> <script type="text/javascript" src="assets/js/sleight.js"></script> <![endif]--> </head> <body> <div id="page"> <div id="spacer"> </div> <div id="container"> <div id="header"> </div> <div id="main"> <div class="sidebar"> [[Wayfinder? &startId=`0`]] </div> <div class="content"> <h4>[*longtitle*]</h4> [*#content*] </div> </div> <div id="footer"> [(site_name)] is powered by <a href="http://modxcms.com/" title="Powered by MODx"><strong>MOD</strong>x Content Management System</a> <br /><a href="[~11~]" title="Link to our Blog RSS Feeds">Blog Entries (RSS)</a><br /> MySQL: [^qt^], [^q^] request(s), PHP: [^p^], total: [^t^], document retrieved from [^s^]. </div> </div> </div> </body> </html> http://cyclingforpositivity.com/blog/ check this in IE 8 check the tab 'Expedition' it has a drop down. It is working fine firefox, chrome and IE6 but not in IE 8. hi there, I have a website design which is all fine and I'm happy with although when I view the website in ie6 the menu becomes unusable. Any advice on how to hack at the markup etc will be greatly appreciated :-D The domain name is psweb.co.uk also any feedback on the website is welcome :-) Thanks, Paul Hello, and thanks so much in advance for any assistance you could offer. Let me start by stating that I have limited computer knowledge. I'm having problems with a drop-down menu, but if you really don't think the drop-down menu is good (I got it from somewhere else and then tweaked it through guess-and-check work), then I'll listen if you can recommend me a better one. But I'm afraid to spend the high amount of hours it would take me to switch to a different type of drop-down menu, only for someone else to tell me the new one isn't good, so please don't suggest an alternative unless you're positive it's much better. The problem with my drop-down menu is that it doesn't work well in IE9. Note that it's designed to work when you hover over an image, as opposed to over text, and I'd like to keep it this way. The problem is that only the first item on the first drop-down level appears in IE9. Or, if you're in compatibility view, everything works except the margin or padding seems to throw off the background-color highlight when you hover over with your cursor, instead of highlighting the whole item it just gives a bar of highlight at the top of the item. I'm not overly concerned about the highlighting issue, but I realize many people won't have compatibility mode on in their browsers, so it won't work for them at all. Here is the CSS code for the drop-down menu, followed by an example of it in use: Code: ul#css3menu,ul#css3menu ul{
list-style:none;border-width:0px;}
ul#css3menu ul{
display:none;position:absolute;98%;right:1px;-moz-box-shadow:0.7px 1px 1px #777777;-webkit-box-shadow:0.7px 1px 1px #777777;box-shadow:0.7px 1px 1px #777777;background-color:#FDFCDC;padding:0px 0px 0px 0px;border:1px solid #0D0D0D;}
ul#css3menu li:hover>*{
display:block;}
ul#css3menu li:hover{
position:relative;background-color:transparent;}
ul#css3menu ul ul{
position:absolute;top:-2px;right:100%;}
ul#css3menu{
display:block;font-size:0;float:left;}
ul#css3menu li{
display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
margin:0;}
ul#css3menu ul>li{
margin:0;}
ul#css3menu a:active, ul#css3menu a:focus{
outline-style:none;}
ul#css3menu a{
display:block;text-align:right;font:bold 15px "arial narrow";color:#FF0000;background-color:#0D0D0D;border-width:0px;border-style:none;}
ul#css3menu ul li{
float:none;margin:0;}
ul#css3menu ul a{
text-align:right;padding:3px 0px 3px 0px;background-color:#0D0D0D;border-width:0px;border-style:none;font:bold 15px "arial narrow";color:#FF0000;padding-right:6px;padding-left:6px;}
ul#css3menu li:hover>a{
background-color:#FFFF99;border-style:none;font:bold 15px "arial narrow";color:#FF0000;}
ul#css3menu span{
display:block;overflow:visible;}
ul#css3menu ul li:hover>a{
background-color:#FFFF99;border-style:none;font:bold 15px "arial narrow";color:#FF0000;}
ul#css3menu._>li>a{
padding:0;}
So here is an example of the drop-down menu. This is only part of it, as the whole thing is very long. I think you can understand how it works like a tree, but let me know if you want more details. Code: <div style="position:absolute; top:53px; right:130px; z-index:6;">
<span class="menu"><ul id="css3menu">
<li class="toplast"><span><a class="noyellow" href="http://www.themetaldiscourser.com/aggregator/index.php"><img src="http://www.themetaldiscourser.com/images/menulink-aggregator-2.png" style="filter:alpha(opacity=90); opacity:0.90; width:123px; height:18px;"></a></span>
<ul>
<li><a href="#"><span><a href="http://www.themetaldiscourser.com/aggregator/business-career-and-technology-index.php">Business, career & technology</a></span></a>
<ul>
<li><a href="#"><span><a href="/aggregator/accolades.php">Accolades</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/charity.php">Charity</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/instructional.php">Instructional</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/legal-controversy.php">Legal controversy</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/miscellaneous-business-and-career.php">Miscellaneous business and career</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/live-performance.php">Live performance</a></span></a>
<ul>
<li><a href="#"><span><a href="/aggregator/incidents.php">Incidents</a></span></a></li>
</ul>
</li>
<li><a href="#"><span><a href="/aggregator/marketing.php">Marketing</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/popularity.php">Popularity</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/technology.php">Technology</a></span></a>
<ul>
<li><a href="#"><span><a href="/aggregator/instrumentation.php">Instrumentation</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/internet.php">Internet</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/production.php">Production</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/radio.php">Radio</a></span></a>
<ul>
<li><a href="#"><span><a href="/aggregator/internet-radio-stations.php">Internet radio stations</a></span></a></li>
</ul>
<li><a href="#"><span><a href="/aggregator/video.php">Video</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/video-games.php">Video games</a></span></a></li>
</ul>
</li>
<li><a href="#"><span><a href="/aggregator/stores.php">Stores</a></span></a>
<ul>
<li><a href="#"><span><a href="/aggregator/store-reviews.php">Store reviews</a></span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><span><a href="http://www.themetaldiscourser.com/aggregator/genre-qualification-and-discourse-index.php">Genre qualification & discourse</a></span></a>
<ul>
<li><a href="#"><span><a href="/aggregator/academia.php">Academia</a></span></a>
I then bring in this drop-down menu on every page with: Code: <?php include("header.html"); ?>
I'm really so grateful for any suggestions. I recall the drop-down menu had problems in earlier versions of IE, which I managed to fix thanks to the help of others, so I though the problems were settled. I definitely don't have enough knowledge to fix this on my own, but if you truly believe I should switch to a new type of drop-down menu then I'm very willing to take your advice about that and put in the work. Ideally I already have a good drop-down menu that just needs to be tweaked, but hey, who knows. PS - I do have this at the top of my page, which in similar situations I see is often cited as being the problem if it's missing: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Hi, I'm totally new to css so all help appreciated First, here's my site: www. hornet .edu .hk /dev As you can probably see, I'm trying to edit a template for joomla. The drop down menu for 'Test 1' is split up, so once I hover beyond 'Sub Test 1' the menu disappears. I want my submenu items to stick together so that it'll work, but I don't know where to start. can anyone help? thanks! templace.css: /*****************************/ /*** Core html setup stuff ***/ /*****************************/ html { height: 100%; margin-bottom: 1px; } form { display:inline; } body { margin: 0px 0px 0px 0px; width: 100%; display: table; background:url(../images/bg_page.png) #DDDDDD top repeat-y; } body, td{ font-family: "Trebuchet MS"; font-size: 13px; color: #000; line-height: 1.3em; } a:link, a:visited { text-decoration: none; font-weight: normal; } a:hover { text-decoration: underline; font-weight: normal; } input.button { cursor: pointer; } input.inputbox{ background:#FFF; font-size: 11px; color: #000; border: 1px solid #DBDBDB; height: 17px; padding:2px; -webkit-border-radius: 4px; -moz-border-radius: 4px; } p { margin-top: 0; margin-bottom: 5px; } img { border: 0 none; margin:0px; } /*****************************************/ /*** Template specific layout elements ***/ /*****************************************/ #page_bg { padding: 0px; margin: 0px; } div#top_menu{ height:54px; margin:0px auto; width: 980px; } #topnav{ height: 54px; width:980px; margin: 0px; padding:0px; margin-top:8px; font-weight: bold; text-transform:uppercase; } #topnav ul { margin: 0px; padding: 0px 20px; width: auto; float: left; list-style-type:none; } #topnav ul li{ margin: 0px; padding: 0px; height: 42px; float: left; position: relative; margin-top:7px; margin-left:7px; } #topnav ul li a{ color: #000; font-weight: bold; text-decoration: none; padding: 0px 12px 0px 12px; height:42px; line-height:35px; display: block; float: left; -webkit-border-radius-topright: 8px; -webkit-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-topleft: 8px; } #topnav ul li a:hover{ background-color: #444444; text-decoration: none; font-weight: bold; color: #fff; } #topnav ul li ul ul { margin: -50px 0 0 297px; z-index: 100; } #topnav ul li li { width:auto; height: 30px; margin-left:0px; -webkit-border-radius: 8px; -moz-border-radius: 8px;} #topnav ul li li a { color: #FFFFFF; text-transform: none; display: block; background: none; width: 277px; border-left: 0px; padding: 0px 10px 0px 10px; height:30px; line-height:30px; -webkit-border-radius: 8px; -moz-border-radius: 8px; } #topnav ul li li a:hover{ background: none; background-color: #FFFFFF; left: 0; width: 277px; padding: 0px 10px 0px 10px; height:30px; } #topnav ul li ul { left: -999em; top: 26px; left: 0; display: block; height: 36px; width: 277px; position: absolute; z-index: 99; left: -999em; clear: left; margin-top: 0px; margin-left: 0px; padding-left:0px; } #topnav ul li:hover ul ul, #topnav ul li:hover ul ul ul { left: -999em; } #topnav ul li:hover ul, #topnav ul li li:hover ul, #topnav ul li li li:hover ul { left: auto; } #topnav ul.menu li{ background-image:none; } div#main_bg{ margin:0px auto; width: 980px; text-align:left; } div#h_area{ margin:0px auto; width: 980px; height:559px; text-align:left; padding-top:10px; } div#h_area img{ margin-left:14px; } .logo{ display: block; float:left; padding-top:5px; margin-bottom:10px; margin-left:10px; width:520px; } a.logo,a.logo:link,a.logo:hover, a.logo:visited{ font-size:37px; line-height: 58px; color:#000; text-decoration:none; font-weight:normal; font-family: "Trebuchet MS"; } div#position0{ float:right; text-align:left; margin-right: 20px; margin-top: 10px; } div#position0 div.search{ width: 222px; height:46px; text-align:left; background: url(../images/search_bg.gif) top left no-repeat; } div#position0 div.search .inputbox { background:#FFF; width: 156px; height: 17px; font-size: 11px; color: #000; margin:10px 0px 0px 50px; border: 1px solid #DBDBDB; padding:5px 2px 2px 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; } div#position0 label{ display:none; /* joomla 1.6 update */ } #leftcolumn{ margin-left:9px; padding:0px; width:205px; float:left; } #rightcolumn{ margin-right:9px; padding:0px; width:205px; float:right; } #maincolumn{ width:520px; float:left; margin:0px 10px 0px 10px; padding:0px; overflow:hidden; } #maincolumn_middle{ width: 730px; float:left; margin:0px 10px 0px 10px; padding:0px; overflow:hidden; } #maincolumn_big{ width: 957px; float:left; margin:0px 10px 0px 10px; padding:0px; overflow:hidden; } div.path{ margin:10px 0 0 0px; padding: 5px; padding-left:30px; background:url(../images/breadcrumbs_bg.png) top left no-repeat; } div.nopad { float:left; padding:0 0px 15px 0px; } div.nopad ul { clear: both; } /*joomla 1.6 update start */ .item-separator { height:10px; line-height:10px; } .items-more { border:1px solid #0F0; } table.category{ border:1px solid #CCC; width:100%; text-align:center; } table.category th,table.category td{ padding:2px 6px; } table.category thead{ background:#EEE; } .jcat-children ul,.jcat-children li{ margin:0; list-style:none; } .jcat-children li a{ background:url(../images/bullet_green_arrow.png) no-repeat 0 12px; display:block; padding:5px 5px 5px 15px; font-size:0.9em; } .image-left { float:left; margin:0 15px 5px 0; } /*joomla 1.6 update end */ #leftcolumn div.moduletable_menu, #leftcolumn div.moduletable_menu, #leftcolumn div.moduletable, /* joomla 1.6 update */ #leftcolumn div.module_menu, #leftcolumn div.module{ margin: 10px 0px 0px 0px; padding:0px; width: 205px; } .article_column { padding-right:10px; } #rightcolumn div.moduletable_menu, #rightcolumn div.moduletable, #rightcolumn div.moduletable_text{ margin: 10px 0px 0px 0px; padding: 0px 0px 3px 0px; width: 205px; } div.bannergroup_text { margin:0px 13px 15px 13px; } .bannerheader { font-weight:bold; margin-bottom:10px; } .banneritem_text { margin-bottom:10px; } .bannerfooter_text { margin-bottom:10px; } #leftcolumn div.module_menu, #rightcolumn div.module_menu, /* joomla 1.6 update */ #leftcolumn div.moduletable, #rightcolumn div.moduletable, /* joomla 1.6 update */ #leftcolumn div.moduletable_menu, #rightcolumn div.moduletable_menu, /* joomla 1.6 update */ #leftcolumn div.module_menu div div div, #leftcolumn div.module div div div, #rightcolumn div.moduletable_menu, #rightcolumn div.moduletable, #rightcolumn div.moduletable_text{ background: url(../images/rub_bottom.png) center bottom no-repeat; } #leftcolumn div.module_menu div div div, #leftcolumn div.module div div{ margin: 0px; padding: 0px; padding-bottom:5px; width: 205px; height:auto; } #leftcolumn div.module_menu div div div div, #leftcolumn div.module div div div div{ background: none; padding:4px 8px; } #leftcolumn h3, #rightcolumn h3{ text-align: left; padding-left:15px; height: 42px; width: 190px; line-height: 40px; color:#FFFFFF; font-size:19px; margin:0px; font-weight:normal; text-shadow: #1F1616 1px 1px 1px; } table.poll thead td { text-align: left; padding-left:10px; } table.poll td { text-align: left; } #leftcolumn ul.menu li ul{ list-style: none; } .pollstableborder { margin: 5px 0px 10px 0px; } .poll td div{ display:inline; } /* forms #leftcolumn .moduletable ul, #rightcolumn .moduletable ul { margin: 6px 0; list-style: none; } #leftcolumn .moduletable ul li, #rightcolumn .moduletable ul li { margin: 0; padding: 0 2px; } .moduletable ul { padding:5px 10px 5px 12px; margin:0px; } .moduletable ul li { padding:0px 10px 5px 15px; margin:0px; line-height:18px; }*/ #leftcolumn ul.menu li#current ul li, #rightcolumn ul.menu li#current ul li { margin: 0px; padding: 0px; } ul.menu { padding:5px 10px 5px 12px; margin:0px; } ul.menu li{ padding:0px 10px 5px 15px; margin:0px; } ul.menu li ul { padding:0px 0px 5px 0px; margin:0px; } ul.menu li ul li{ padding:0px 0px 0px 15px; border:none; } ul.menu li#current ul li a{ margin-left:15px; text-decoration:none; } ul.mostread { padding:5px 10px 5px 12px; margin:0px; } ul.mostread li{ padding:0px 10px 5px 15px; margin:0px; line-height:18px; } ul.latestnews, ul.weblinks { padding:5px 10px 5px 12px; margin:0px; } ul.latestnews li, ul.weblinks li{ padding:0px 10px 5px 15px; margin:0px; line-height:18px; } div.componentheading{ font-size:16px; font-size:19px; margin:7px auto; } td.contentheading{ font-weight:normal; vertical-align:top; font-size:19px; height:30px; color:#363636; background: url(../images/contentheading_ico.png) left top no-repeat; } table.contentpaneopen td.contentheading{ padding-left:34px; } table.contentpaneopen{ border-collapse: collapse; margin-left:5px; } td.buttonheading{ padding:0px 2px 0px 2px; } table.contentpaneopen td{ padding:0px; } .contentpaneopen p{ line-height:22px; } span.small, td.createdate, td.modifydate{ font-size:11px; color:#999999; } span.pagination span, span.pagination a{ padding:5px; } form#login-form { /* joomla 1.6 update */ padding: 0px; margin: 0px; } fieldset.userdata { /* joomla 1.6 update */ border: none; margin: 0px; padding:10px 10px 10px 20px; } form#login-form ul { /* joomla 1.6 update */ margin:0px 0px 20px 0px; width:120px; } form#login-form ul li{ /* joomla 1.6 update */ padding: 0px; margin: 0px; list-style: disc; background-image:none; } form#login-form ul li a { /* joomla 1.6 update */ text-align: left; font-size: 10px; color: #858585; } #login-form #modlgn-username, #login-form #modlgn-passwd{ width:150px; } div#bottom { width:100%; margin:0px auto; background:#000000; float:left; } div#f_area{ background:#757575; margin:0px auto; width: 960px; text-align:left; margin-bottom:3px; } #f_area div.newsflash { color:#FFF; padding:5px 10px; } #f_area div.moduletable, #f_area div.moduletable_menu{ float: left; margin:10px 5px 10px 5px; width: 309px; } #f_area h3{ text-align: left; vertical-align:bottom; height: 35px; width: 294px; color:#FFFFFF; font-size:21px; font-family:"Trebuchet MS", Tahoma, Verdana; font-weight:normal; margin:0px; padding-left: 10px; padding-top:15px; } /* joomla 1.6 update start */ /* pagenav */ #main ul.pagenav { list-style-type:none; padding:0; overflow:hidden } ul.pagenav li { display:inline-block; padding:0px; margin:0; } #main ul.pagenav li { line-height:2em } ul.pagenav li a { border: 1px solid #ccc; display:inline; background:#eee; padding:2px; text-decoration:none } ul.pagenav li.pagenav-prev { float:left } ul.pagenav li.pagenav-next { float:right } .article-info { margin:10px 0 10px 0px; font-size:0.9em; } .article-info-term { display:none } /* ++++++++++++++ icons ++++++++++++++ */ ul.actions { text-align:right; padding:0 ; width:100%; margin:0 } ul.actions li { display:inline } ul.actions a { text-decoration:none } /* ++++++++++++++ items more ++++++++++++++ */ .items-more { padding-top:10px; } .items-more h3 { font-weight:normal; margin:0; padding:5px 5px 5px 5px; font-size:1.4em } .items-more ol { line-height:1.3em; list-style-type:none; margin:0; padding:10px 0 10px 2px; } .items-more ol li { padding:2px; } .items-more ol li a { display:inline; margin:0; font-weight:normal; padding:5px 5px 5px 20px; } .items-more ol li a:hover, .items-more ol li a:active, .items-more ol li a:focus { font-weight:normal; padding:5px 5px 5px 20px; text-decoration:none } /* ++++++++++++++ pagination ++++++++++++++ */ #main .pagination { margin:10px 0 ; padding:10px 0 10px 0px; } #main .pagination ul { list-style-type:none; margin:0; padding:0; text-align:left; } #main .pagination li { display:inline; padding:2px 5px; text-align:left; border:solid 0px #eee; margin:0 2px } .pagenav {padding:2px} #main .pagination li.pagination-start, #main .pagination li.pagination-next, #main .pagination li.pagination-end, #main .pagination li.pagination-prev {border:0} #main .pagination li.pagination-start , #main .pagination li.pagination-start span { padding:0 } p.counter { font-weight:bold; } /* ++++++++++++++ blog ++++++++++++++ */ .cols-1 { display: block; float: none !important; margin: 0 !important; } .cols-2 .column-1 { width:46%; float:left; } .cols-2 .column-2 { width:46%; float:right; margin:0 } .cols-3 .column-1 { float:left; width:46%; padding:0px 5px; margin-right:4% } .cols-3 .column-2 { float:right; width:46%; margin-left:0; padding:0px 5px } .cols-3 .column-3 { float:left; width:100%; padding:0px 5px } .items-row { overflow:hidden; margin-bottom:10px !important; } .column-1, .column-2, .column-3 { padding:10px 5px } .column-2 { width:55%; margin-left:40%; } .column-3 { width:30% } .blog-more { padding:10px 5px } /* ++++++++++++++ readmore ++++++++++++++ */ .readmore a:link,.readmore a:visited,a.readmo link,a.readmo visited { color: #ccc; background: #222; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: none; padding:4px 8px; margin-top:10px; } .readmore a:hover,.readmore a:active,.readmore a:focus,a.readmore a:hover,a.readmore a:active,a.readmore a:focus { background: #333; color: #fff; } a.readmo hover,a.readmo active,a.readmo focus { background: #333; color: #fff; } /* joomla 1.6 update end */ /* System Standard Messages */ #system-message { margin-bottom: 20px; } #system-message dd.message ul { background: #C3D2E5 url(../../system/images/notice-info.png) 4px center no-repeat;} /* System Error Messages */ #system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;} /* System Notice Messages */ #system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E;} #syndicate{ float:left; padding-left: 25px; } /* --- slider --- */ #slider{ width: 960px; height:415px; margin-top:5px; margin-left:10px; background:url(../images/loading.gif) no-repeat 50% 50%; } #slider img { position:absolute; top:0px; left:0px; display:none; } #slider a { border:0; display:block; } .nivo-controlNav { position:absolute; left:860px; bottom:10px; } .nivo-controlNav a { display:block; width:22px; height:22px; background:url(../images/bullets.png) no-repeat; text-indent:-9999px; border:0; margin-right:3px; float:left; } .nivo-controlNav a.active { background-position:0 -22px; } .nivo-directionNav a { display:block; width:30px; height:30px; background:url(../images/arrows.png) no-repeat; text-indent:-9999px; border:0; } a.nivo-nextNav { background-position:-30px 0; right:15px; } a.nivo-prevNav { left:15px; } .nivo-caption { text-shadow:none; font-family: Helvetica, Arial, sans-serif; } .nivo-caption a { color:#efe9d1; text-decoration:underline; } /* --- end slider --- */ I have a pure css menu that I like but it does not work with IE. works exactly as I want in firefox. in IE when I hover over the menu bar the list do not become visible any one know what I need to do to make it work? Thanks BadIdea The page code is Code: <html> <head> <meta name="author" content="Jeffrey Bourque"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="cache-control" content="no-cache"> <link rel="stylesheet" type="text/css" href="menuCss.css" /> <title>Operations Control</title> </head> <body> <div class="mainheader"> <table> <tr><td><img src="img/sitelogo.png" width="135" height="59"/></td><td><h1>Operations Control</h1></td></tr> <tr><td colspan="2"><?php echo "Welcome! $useid "; ?> -- <a href="../logout.php" class="nh"> Log Out</a></td></tr> </table> </div> <div id="navMenu"> <ul> <li><a href="#">Home</a> <ul> <li><a href="#">My Evaluations</a></li> <li><a href="#">My Approvals</a></li> <li><a href="#">My Actions</a></li> <li><a href="#">Phone List</a></li> <li><a href="#">Training</a></li> <li><a href="#">Change Password</a></li> </ul> <!-- end inner ul --> </li> <!-- end main li --> </ul> <!-- end main ul --> <ul> <li><a href="#">Manufacturing</a> <ul> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> </ul> <!-- end inner ul --> </li> <!-- end main li --> </ul> <!-- end main ul --> <ul> <li><a href="#">Quality</a> <ul> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> </ul> <!-- end inner ul --> </li> <!-- end main li --> </ul> <!-- end main ul --> <ul> <li><a href="#">Engineering</a> <ul> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> </ul> <!-- end inner ul --> </li> <!-- end main li --> </ul> <!-- end main ul --> <ul> <li><a href="#">Planning</a> <ul> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">My Actions</a></li> <li><a href="#">Phone List</a></li> <li><a href="#">Change Password</a></li> </ul> <!-- end inner ul --> </li> <!-- end main li --> </ul> <!-- end main ul --> <ul> <li><a href="#">Accounting</a> <ul> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> </ul> <!-- end inner ul --> </li> <!-- end main li --> </ul> <!-- end main ul --> <ul> <li><a href="#">Materials</a> <ul> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> </ul> <!-- end inner ul --> </li> <!-- end main li --> </ul> <!-- end main ul --> <ul> <li><a href="#">Engineering</a> <ul> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> </ul> <!-- end inner ul --> </li> <!-- end main li --> </ul> <!-- end main ul --> <br class="clearFloat" /> </div> <!-- end navMenu --> </body> </html> The Css is Code: body
{
margin:0;
padding:0;
background:#D0E2DD;
}
.mainheader
{
background:#F2F2F2;
margin:0;
padding-left:30px;
padding-top:20px;
padding-bottom:5px;
padding-right:10px;
}
.mainheader h1
{
color:#000000;
font-size:36px;
}
.navBar
{
background:#7777BB;
color:#2554C7;
line-height:30px;
}
.endBar
{
clear:both;
background:#FFFFFF;
padding:0px 10px;
border-bottom:1px solid #808080;
}
.floatR
{
float:right;
}
#navMenu
{
margin:0;
padding:0;
}
#navMenu ul
{
margin:0;
padding:0;
line-height:30px;
}
#navMenu li
{
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#7777BB;
}
#navMenu ul li a
{
text-align:center;
font-family:"Comic Sans MS", cursive;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#ffffff;
border:1px solid #ffffff;
text-shadow:1px 1px 1px #000000;
}
#navMenu ul ul
{
position:absolute;
visibility:hidden;
top:32px;
}
#navMenu ul li:hover ul
{
visibility:visible;
}
#navMenu li:hover
{
background:#aaaaaa;
}
#navMenu ul li:hover ul li a:hover
{
background:#F2F2F2;
color:#000;
}
#navMenu a:hover
{
color:#0088ff;
}
.clearFloat
{
clear:both;
margin:0;
padding:0;
}
dawuster.com/test/index2.htm I can't figure out why my "Manufacturers" css drop menu on the left side doesn't work. It works it its own .htm document when i was developing it but once I stick it in to a pre-existing page, it won't function. Thanks in advance! Greetings, I sure would appreciate some help integrating a css dropdown menu into a site. If you visit www.mts-diesel.com in FF, the drop down works find, If you open it in IE9 the dropdown does not work, BUT if you open this page www.mts-diesel.com/menu.html in IE9 the dropdown works. This leads me to think that it might be some type of z-index issue perhaps but I cant put my finger on it. Thanks for any help. Tom Built a dropdown menu (which I use on all my websites fine) and for some reason it's not working at all in IE (Using 8.0.7600), I've literally no idea why. Here's the CSS for the navigation: Code:
#subnav {
display: block;
margin: 25px 0 0 0;
padding:0 0 0 0;
width: 196px;
}
#subnav ul {
width: 196px;
margin: 0;
padding: 0;
list-style: none;
font: 11px "Verdana", "Arial", "Helvetica", "sans-serif";
}
#subnav ul ul {
margin: 0;
padding: 0;
list-style: none;
}
#subnav ul li {
float: left;
width: 196px;
display: block;
height: auto;
margin: 0;
padding: 0;
font-weight: bold;
}
#subnav ul li a {
color: #017490;
display: block;
width: 100%;
height: auto;
padding: 10px 0 10px 23px;
text-decoration: none;
text-shadow: 0px 1px 1px #fff;
}
#subnav ul li li {
padding: 0;
margin: 0px 0 0 0;
}
#subnav ul li li a {
padding: 10px 0 10px 5px;
line-height: normal;
text-shadow: 0px 1px 1px #000;
}
#subnav ul a.first-level {
background: #047691 url(../images/arrow.gif) top right no-repeat;
}
#subnav ul a.sub-level {
background: #047691 url(../images/arrow.gif) 200px 6px no-repeat;
}
#subnav ul li a:hover, #subnav ul li a:active, #subnav ul li:hover a, #subnav ul li.sfhover a {
/*color: #c7bb98;*/
text-decoration: none;
background: url(../images/nav-bg-over.jpg) 0 2px no-repeat;
}
#subnav ul ul li:hover, #subnav ul ul li.sfhover {
color: #FFF;
}
#subnav ul li li:hover a, #subnav ul li li.sfhover a, #subnav ul li li:hover li:hover a, #subnav ul li li.sfhover li.sfhover a, #subnav ul li li:hover li:hover li:hover a, #subnav ul li li.sfhover li.sfhover li.sfhover a {
color: #FFF
}
/* This line cancels the highlight effect for all sub-level buttons */
body.nav-1 #subnav ul li#subnav ul-1 li a, body.nav-1 #subnav ul li#subnav ul-1 li li a, #subnav ul li li a, #subnav ul li li li a {
background-image: none
}
body.nav-1 #subnav ul li#subnav ul-1 a, body.nav-2 #subnav ul li#subnav ul-2 a {
color: #048451;
}
#subnav ul li ul { /* second-level lists */
position : absolute;
left: -999em;
z-index: 9999;
margin-left : 215px;
margin-top : -32px;
padding: 5px 5px 5px 0px;
background-color:#047691;
text-transform: none!important;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-box-shadow: 0px 2px 2px #033f4d;
-webkit-box-shadow: 0px 2px 2px #033f4d;
box-shadow: 0px 2px 2px #033f4d;
}
#subnav ul li ul ul { /* third-and-above-level lists */
left: -999em;
}
/* Normal color */
#subnav ul li li a:link, #subnav ul li li a:visited, #subnav ul li:hover li a, #subnav ul li.sfhover li a, #subnav ul ul li.sfhover li a,
#subnav ul li:hover li:hover li a, #subnav ul li.sfhover li.sfhover li a,
#subnav ul li:hover li:hover li:hover li a, #subnav ul li.sfhover li.sfhover li.sfhover li a {
color : #FFF;
background: #047691;
}
/* Hover color */
#subnav ul li li a:hover, #subnav ul li li a:active,
#subnav ul ul li:hover a, #subnav ul ul li:hover li:hover a,
#subnav ul li.sfhover li.sfhover a, #subnav ul li.sfhover li.sfhover li.sfhover a, #subnav ul li.sfhover li a:hover,
#subnav ul li.sfhover li li a:hover, #subnav ul li.sfhover li.sfhover li.sfhover li.sfhover a:hover,
#subnav ul li:hover li:hover a, #subnav ul li:hover li:hover li:hover a, #subnav ul li:hover li a:hover,
#subnav ul li:hover li li a:hover, #subnav ul li:hover li:hover li:hover li:hover a:hover
{
color : #FFF;
background-color: #045669}
#subnav ul li:hover ul ul, #subnav ul li:hover ul ul ul, #subnav ul li.sfhover ul ul, #subnav ul li.sfhover ul ul ul {
left: -999em;
}
#subnav ul li:hover ul, #subnav ul li li:hover ul, #subnav ul li li li:hover ul, #subnav ul li.sfhover ul, #subnav ul li li.sfhover ul, #subnav ul li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
The live site is demo2 . abcguide .com (Sorry if I'm not supposed to link that.. I'll take it down.. ?) Hi, While testing our webpage, we found that in all browsers the CSS menu works fine except in Safari, on browsing the child nodes of the menu. The menu just closes on the second or third select. I would greatly appreciate any help to fix this bug. The CSS code is below. Regards, Sharon. Code : <style type="text/css" media="screen"> /**************** menu coding *****************/ #menu { width: 100%; background: #eee; float: left; } #menu ul { list-style: none; margin: 0; padding: 0; width: 12em; float: left; } #menu a, #menu h2 { font: bold 11px/16px arial, helvetica, sans-serif; display: block; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0; padding: 2px 3px; } #menu h2 { color: #fff; background: #000; text-transform: uppercase; } #menu a { color: #000; background: #efefef; text-decoration: none; } #menu a:hover { color: #a00; background: #fff; } #menu li {position: relative;} #menu ul ul { position: absolute; z-index: 500; } #menu ul ul ul { position: absolute; top: 0; left: 100%; } 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;} </style> <!--[if IE]> <style type="text/css" media="screen"> #menu ul li {float: left; width: 100%;} </style> <![endif]--> <!--[if lt IE 7]> <style type="text/css" media="screen"> body { behavior: url(csshover.htc); font-size: 100%; } #menu ul li a {height: 1%;} #menu a, #menu h2 { font: bold 0.7em/1.4em arial, helvetica, sans-serif; } </style> <![endif]--> I dont understand what I am missing, the menu is suppose to be a drop down menu (and suppose to be horizontal, but i havent got that far yet) but its not dropping, its displaying everything? I would appreciate any help on making it work correctly, thanks much! -Sean nav_style.css file: Code: body {
font-family: Arial, Helvetica, sans-serif;
}
#nav {
width: 200px;
font-family: Arial, Helvetica, Sans-serif;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
border-bottom: 1px solid #ed9f9f;
}
#nav li a:link, #nav li a:visited {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #b51031;
color: #ffffff;
text-decoration: none;
}
#nav li a:hover {
background-color: #711515;
color: #ffffff;
}
#nav ul ul {
margin-left; 12px;
}
#nav ul ul li {
border-bottom: 1px solid #711515;
color: #ffffff;
}
#nav ul ul a:link, #nav ul ul a:visited {
background-color: #ed9f9f;
color: #711515;
}
#nav ul ul a:hover {
background-color: #711515;
color: #ffffff;
}
and here is the head_nav.php file: Code: <?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?> <!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> <title>?</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="css_inc/nav_style.css" /> </head> <body> <div id="nav"> <ul> <li><a href="#">Services</a> <ul> <li><a href="#">Cinematography</a></li> <li><a href="#">Photography</a></li> </ul> </li> <li><a href="#">Video</a> <ul> <li><a href="#">Demo Reel</a></li> <li><a href="#">Music Video</a></li> <li><a href="#">Commercial</a></li> </ul> </li> <li><a href="#">Photo Gallery</a></li> <li><a href="#">About Valliant</a> <ul> <li><a href="#">Biography</a></li> <li><a href="#">Resume</a></li> <li><a href="#">Contact</a></li> </ul> </li> <li><a href="#">Links</a></li> <li><a href="#">Home</a></li> </ul> </div> </body> </html> This is driving me crazy! I'm experimenting with the "MyGosu" menu (the drop-down menu at the top of the page) inside of the default Mambo template. See my efforts he http://www.mediamogulsweb.com/client/Mambo/ The menu works fine in Mozilla/Firefox, but is failing in IE6 and IE7... In IE, the pop-out submenus don;t appear...But I'm thinking that they actually do appear, but are being obscured by the header image (or something else?)....So I adjusted the z-index of the header image div to "1", but that didn;t do the trick... What is going on here? Any ideas are appreciated... Hi, I was about to put my new website online when I noticed that our CSS drop-down menu no longer works in Internet Explorer. The site is built off some software that we bought (a billing system called AWBS). When I got our template up and running on it, the menu worked fine in IE. Today I did some upgrades to the software, which included changing some of the templates around. I was careful to not disturb much in my template files, however it seems that I have, and I have no idea what. You can see the site at http://www.estyles.com.au/awbs/testpage.php . The menu works fine in FireFox, and previously worked fine in IE before I upgraded. All the CSS for the menu can be found at http://www.estyles.com.au/awbs/temp...es/css/menu.css . The code for the menu is: Code: <ul id="nav">
<li><a href="http://www.estyles.com.au/awbs/index.php">HOME</a>
</li>
<li><a href="#">WEBHOSTING</a>
<ul>
<li><a href="http://www.estyles.com.au/awbs/hostingoverview.php" class="menuitem">Overview</a></li>
<li><a href="http://www.estyles.com.au/awbs/hosting.php?spt=1" class="menuitem">Shared Hosting</a></li>
<li><a href="http://www.estyles.com.au/awbs/hosting.php?pt=r" class="menuitem">Reseller Hosting</a></li>
<li><a href="http://www.estyles.com.au/awbs/specials.php" class="menuitem">Specials</a></li>
</ul>
</li>
<li><a href="#">DOMAINS</a>
<ul>
<li><a href="http://www.estyles.com.au/awbs/check.php" class="menuitem">Register Domain</a></li>
<li><a href="pricing.php" target="_blank" onClick='window.open("http://www.estyles.com.au/awbs/pricing.php","pricing","width=700,height=300,status=yes,scrollbars=1,resizable=1");return false;' class="menuitem">Domain Prices</a></li>
<li><a href="http://www.estyles.com.au/awbs/transcheck.php" class="menuitem">Transfer Domain</a></li>
<li><a href="http://www.estyles.com.au/awbs/whois.php" class="menuitem">Whois Lookup</a></li>
</ul>
</li>
<li><a href="#">SERVICES</a>
<ul>
<li><a href="http://www.estyles.com.au/awbs/webdesign.php" class="menuitem">Web Design</a></li>
</ul>
</li>
<li><a href="#">ACCOUNT</a>
<ul>
<li><a href="http://www.estyles.com.au/awbs/cart.php" class="menuitem">My Cart</a></li>
<li><a href="http://www.estyles.com.au/awbs/welcome.php" class="menuitem">My Account</a></li>
<li><a href="http://www.estyles.com.au/awbs/helpdesk.php?search=open" class="menuitem">Support System</a></li>
<li><a href="http://www.estyles.com.au/awbs/tos.php" class="menuitem">Terms of Service</a></li>
<li><a href="http://www.estyles.com.au/awbs/LogOut.php" class="menuitem">Log Out</a></li>
<li><a href="http://www.estyles.com.au/awbs/admin/adminwelcome.php" class="menuitem" target="_blank">Admin</a></li>
</ul>
</li>
</ul>
The HTML is messy and I have no idea where to start looking for the problem. The header and footer on the page both changed during the upgrade but the main content (everything inside the body tags) did not, so I suspect that the problem does not lie within the main content area. If someone could at least point me in the right direction then I would greatly appreciate it, thanks Hi, I am trying to make a dropdown menu by using only CSS and no Javascript. Here is my HTML Code:
<ul id="nav">
<li>
<a href="/family-flowers.html"><span>Family Flowers</span></a>
<ul>
<li>
<a href="/family-flowers/anniversary-flowers.html"><span>Anniversary Flowers</span></a>
</li>
<li>
<a href="/family-flowers/birthday-flowers.html"><span>Birthday Flowers</span></a>
</li>
<li>
<a href="/family-flowers/christmas-bouquets.html"><span>Christmas Bouquets</span></a>
</li>
<li>
<a href="/family-flowers/new-baby.html"><span>New baby</span></a>
</li>
</ul></li>
<li class="level item-2 nav-congratulation">
<a href="/congratulation.html"><span>Congratulation</span></a>
</li>
<li class="level item-3 nav-corporate">
<a href="/corporate.html"><span>Corporate</span></a>
</li>
<li class="level item-4 nav-get-well">
<a href="/get-well.html"><span>Get Well</span></a>
</li>
<li class="level item-5 nav-love">
<a href="/love.html"><span>Love Bouquets</span></a>
</li>
<li class="level item-6 nav-mixed">
<a href="/mixed.html"><span>Mixed</span></a>
</li>
<li class="level item-7 nav-monthly">
<a href="/monthly.html"><span>Monthly</span></a>
</li>
<li class="level item-8 nav-funeral">
<a href="/funeral.html"><span>Funeral</span></a>
</li>
<li class="level item-9 nav-window">
<a href="/window.html"><span>Window plants</span></a>
</li>
</ul>
and this is my CSS Code:
#nav { list-style:none; margin:0; padding:0; width:150px; }
#nav li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
#nav li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
#nav li:hover ul { display: block; }
everything is fine, only on my hovering, the sub UL is not displaying even i made it to display as BLOCK on hover. can anybody help with this please? thank you very much [edit] in fact it is working in FF but not in IE [/edit] Am I missing something? I am using the following code and it works if I put it in the head, but doesn't work if I put it in an external style sheet. I know I am sleep deprived but am I missing something simple? .m_isabel { display: block; width: 175px; height: 20px; background: url("jpg/m_isabel.jpg") no-repeat 0 0; } .m_isabel:hover { background-position: 0 -20px; } .m_isabel span { display: none; } In body: <a href="#" class="m_isabel" title="Isabel"><span>F. Isabel </span></a> |
|||||||