|
CSS - Z-index + Menu + Ie7 = Nightmare :'(
Have been bashing my head against the wall now for a few hours trying to solve this, as it's "the last piece of the puzzle" at the moment.
Here is the issue: Code: http://img5.imageshack.us/my.php?image=iebugtj3.jpg (Sorry about this, had to put it in code to post the link) As you can see, it works perfectly in "all" other browsers, but... yeah... you know... >.> Nore sure how much of the code is needed to fix this, but here is the most relative code... HTML Code: <style type="text/css" media="screen">
#selectedTab
{
background: url("./images/layout/tabSelected.png") no-repeat;
height: 66px;
width: 129px;
position: relative;
top: -89px;
left: <?PHP echo $tabPos ?>px;
z-index: 5;
}
#selectedTab a
{
position: relative;
/* Special fix for the "ISO-sertifikat" string */
<?php
if ($_GET['nav'] == "isosert")
echo "top: 10px;";
else
echo "top: 15px;";
?>
left: <?PHP echo $tabTxtPos ?>px;
}
</style>
<!-- END CUSTOM MENU STYLE -->
<body>
<div id="pattern">
<!-- START HEADER -->
<div id="bg_layer2_header">
<div id="banner">
<div id="menu">
<div id="subtabs">
<ul class="menuTabText">
<li class="menuNudge"><a href="home.phtml?nav=omoss">Om Oss</a></li>
<li class="menuNudge"><a href="home.phtml?nav=nyheter">Nyheter</a></li>
<li class="menuNudge"><a href="home.phtml?nav=tjenester">Tjenester</a></li>
<li class="menuNudge"><a href="home.phtml?nav=kurs">Kurs</a></li>
<li class="menuNudge"><a href="home.phtml?nav=isosert">ISO-sertifisering</a></li>
<li class="menuNudge"><a href="home.phtml?nav=kunder">Kunder</a></li>
<li class="menuNudge"><a href="home.phtml?nav=forhandlere">Forhandlere</a></li>
<li class="menuNudge"><a href="home.phtml?nav=referanser">Referanser</a></li>
<li><a href="home.phtml?nav=jobb">Jobb</a></li>
</ul>
</div>
<div id="selectedTab"><a href="home.phtml?nav=<?PHP echo $_GET['nav'] ?>"><?PHP echo $linkName ?></a></div>
</div>
</div>
</div>
<!-- END HEADER -->
CSS Code: /**==--__ Global __--==**/
*
{
margin: 0;
padding: 0;
}
/**==--__ Layout __--==**/
body
{
background: #636363 url("../images/layout/bg_layer1.png") repeat-x;
height: 100%;
}
#pattern
{
background: url("../images/layout/bg_pattern.png") repeat;
position: absolute;
top: 0px;
left: 0px;
height: auto;
min-height: 100%;
width: 100%;
z-index: -3;
}
/* START HEADER */
#bg_layer2_header
{
background: url("../images/layout/bg_layer2_header.png") no-repeat;
height: 216px;
width: 980px;
margin: 0 auto;
position: relative;
z-index: -4;
}
#banner
{
background: url("../images/layout/banner.png") no-repeat;
height: 184px;
width: 909px;
margin: 0 auto;
position: relative;
top: 32px;
z-index: -2;
}
#menu
{
background: #000 no-repeat;
height: 25px;
width: 877px;
border-top: 1px solid #cbcbcb;
margin: 0 auto;
position: relative;
top: 158px;
}
#subtabs
{
background: url("../images/layout/bg_subMenu.png") no-repeat;
height: 48px;
width: 812px;
position: relative;
top: -28px;
margin: 0 auto;
z-index: -1;
}
#subtabs .menuTabText li
{
list-style: none;
display: inline;
}
.menuTabText /* Subtab links positioning */
{
position: relative;
top: 5px;
left: 16px;
}
.menuNudge
{
margin-right: 44px;
}
/* END HEADER */
Similar TutorialsDear all, I have the following in a web page: A menu (let's call it Menu1) with several links and by its side another menu (Menu2) with some links also. Menu2 is a drop down menu that drops down on top of Menu1 when you click the Menu2 button. Well, it works for Internet Explorer but not for Firefox. The problem: when I try to click on Menu1's links they are not clickeable .............. My divs: #divMenu1 {position:relative; left:701px; top:58px; width:234px; height:485px; z-index:1;} #divMenu2 {position:absolute; width:242px; height:218px; top:76px; left:705px; z-index:2;} Obviously if I do: #divMenu1 {position:relative; left:701px; top:58px; width:234px; height:485px; z-index:2;} #divMenu2 {position:absolute; width:242px; height:218px; top:76px; left:705px; z-index:1;} I cannot click on Menu2's links because the drop down disappears behind Menu1. How can I solve it?? Below, the code. Thanks a lot in advance! Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
<!--
html {background-color:transparent;}
body {
background-color:transparent;
margin-left: 0px;
margin-top: 0px;
}
#Menu1 {position:relative; left:701px; top:58px; width:234px; height:485px; z-index:1; background-color:yellow;}
#Menu2 {position:absolute; width:0px; height:0px; top:76px; left:705px; z-index:2;}
-->
</style>
</head>
<body>
<div id="Menu1">
<a href="http://www.yahoo.es" target="_blank">Can click this link in FF0</a><br>
<a href="http://www.yahoo.it" target="_blank">CANNOT click this link in FF0</a><br>
<a href="http://www.yahoo.fr" target="_blank">CANNOT click this link in FF1</a><br>
<a href="http://www.yahoo.se" target="_blank">CANNOT click this link in FF2</a><br>
<a href="http://www.yahoo.es" target="_blank">CANNOT click this link in FF3</a><br>
<a href="http://www.yahoo.it" target="_blank">CANNOT click this link in FF4</a><br>
<a href="http://www.yahoo.fr" target="_blank">CANNOT click this link in FF5</a><br>
<a href="http://www.yahoo.se" target="_blank">CANNOT click this link in FF6</a><br>
<a href="http://www.yahoo.es" target="_blank">CANNOT click this link in FF7</a><br>
<a href="http://www.yahoo.it" target="_blank">CANNOT click this link in FF8</a><br>
<a href="http://www.yahoo.fr" target="_blank">CANNOT click this link in FF9</a><br>
<a href="http://www.yahoo.se" target="_blank">Can click this link in FF1</a><br>
<a href="http://www.yahoo.es" target="_blank">Can click this link in FF2</a><br>
<a href="http://www.yahoo.it" target="_blank">Can click this link in FF3</a><br>
<a href="http://www.yahoo.fr" target="_blank">Can click this link in FF4</a><br>
<a href="http://www.yahoo.se" target="_blank">Can click this link in FF5</a><br>
<a href="http://www.yahoo.es" target="_blank">Can click this link in FF6</a><br>
<a href="http://www.yahoo.it" target="_blank">Can click this link in FF7</a><br>
<a href="http://www.yahoo.fr" target="_blank">Can click this link in FF8</a><br>
<a href="http://www.yahoo.se" target="_blank">Can click this link in FF9</a><br>
<a href="http://www.yahoo.es" target="_blank">Can click this link in FF10</a><br>
<a href="http://www.yahoo.it" target="_blank">Can click this link in FF11</a><br>
<a href="http://www.yahoo.fr" target="_blank">Can click this link in FF12</a><br>
<a href="http://www.yahoo.se" target="_blank">Can click this link in FF13</a><br>
</div>
<div id="Menu2">
<iframe src="http://www.vlogplaza.com/test/flash/menu.html" id="ifrmenu2" name="ifrmenu2" scrolling="no" width="262px"
height="218px" frameborder="0" allowtransparency="yes">
</iframe>
</div>
</body>
</html>
I'm experimenting with some pure CSS menus and I'm trying to use an icon with them. see http://www.fogcat.co.uk/css/test.html css is http://www.fogcat.co.uk/css/test3.css But the icons are appearing behind other menu items - even though I have the z-index set to 100. What am I not doing? It works fine in Firefox but not IE6. The HTML is Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<LINK REL="stylesheet" TYPE="text/css" HREF="./test3.css" TITLE="bw">
</head>
<body>
<div id="container">
<p>just some text</p>
<div id="menudiv">
<ul>
<li><a href="#" title="Link1"><img src="item.gif" >Home <span class="line1"></span></a></li>
<li><a href="#" title="Link2"><img src="item2.gif">Menu Two <span class="line2"></span></a></li>
<li><a href="#" title="Link3"><img src="item.gif" >Menu Three<span class="line3"></span></a></li>
<li><a href="#" title="Link4"><img src="item2.gif">Menu Four <span class="line4"></span></a></li>
<li><a href="#" title="Link5"><img src="item.gif" >Menu Five <span class="line5"></span></a></li>
<li><a href="#" title="Link6"><img src="item2.gif">Menu Six <span class="line6"></span></a></li>
<li><a href="#" title="Link7"><img src="item.gif" >Menu Seven<span class="line7"></span></a></li>
<li><a href="#" title="Link8"><img src="item2.gif">Menu Eight<span class="line8"></span></a></li>
<li><a href="#" title="Link9"><img src="item.gif" >Menu Nine <span class="line9"></span></a></li>
</ul>
</div>
</div>
</body>
</html>
the CSS is Code: BODY
{
background-color: #F0F0F0;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
}
#container
{
border: 1px solid green;
padding: 20px;
background-color: #FFFFFF;
top: 20px;
left: 20px;
}
#menudiv {
width: 240px;
}
#menudiv ul
{
margin: 0;
padding: 0; /*removes indent IE and Opera*/
list-style-type: none; /*removes indent Mozilla and NN7*/
font-family: Arial, Helvetica, sans-serif; /*turns off display of bullet*/
font-size: 14px;
}
#menudiv li
{
margin: 0px 0px 15px 0px;
background-color: White;
text-align: center;
}
div#menudiv li a
{
display: block;
position: relative;
text-decoration: none;
padding: 5px 0px 5px 0px;
width: 100%;
background-color: #DDDDDD;
color: Black;
}
#menudiv li a:hover
{
background-color: #6B6B6B;
color: White;
}
div#menudiv li a span
{
display:block;
position: relative;
margin: 0px;
padding: 0px;
border-bottom: 3px solid silver;
/* position shouild be border width + gap + padding in <a>*/
top: 9px;
}
div#menudiv li a img
{
position: absolute;
left: 0;
top: 0;
padding: 0;
margin: 0;
border-width: 0;
width: 0;
height: 0;
z-index: 100;
}
div#menudiv li a:hover img
{
width: 60px;
height: 60px;
top: -10px;
left: -12px;
}
div#menudiv li a:hover span.line1 {border-bottom-color:red;}
div#menudiv li a:hover span.line2 {border-bottom-color:orange}
div#menudiv li a:hover span.line3 {border-bottom-color:yellow}
div#menudiv li a:hover span.line4 {border-bottom-color:green}
div#menudiv li a:hover span.line5 {border-bottom-color:blue}
div#menudiv li a:hover span.line6 {border-bottom-color:magenta}
div#menudiv li a:hover span.line7 {border-bottom-color:teal}
div#menudiv li a:hover span.line8 {border-bottom-color:darkgreen}
div#menudiv li a:hover span.line9 {border-bottom-color:cyan}
Hi All, I'm new to the forum and hoping someone can help me. This is the first page I have done using CSS for defining my layout so some patience would be appreciated. I also apologize if this has been discussed somewhere else on the board - I'm not entirely sure what to search for. On the page I have a background set - a nifty little drop shadow effect to frame the main content. Everything works until I try a lower screen resolution - the effect gets cut off depending on the size of the browser window even though the content goes well beyond. I have tried everything I can think of to solve this! Please tell me there is a fix! If not - maybe a fellow web devloper could offer an alternative solution? The website is: iconoclast-band.com/new I've posted a screen of the problem: iconoclast-band.com/new/iconoclast-argh.jpg Stylesheet is at: iconoclast-band.com/new/css/style.css Positioning css is: html, body { min-height: 100%; height: 100%; } body { font: 11px/1.6 Arial, sans-serif; background: url(../images/bg2.png) top center repeat-x !important; background: url(../images/bg2.gif) top center repeat-x; /*stoopid ie*/ padding-left: 1px; margin: 0 auto; overflow: -moz-scrollbars-vertical; } body, h1, h3, p { padding: 0; margin: 0; } #container { background: url(../images/container2.png) top center repeat-y !important; background: url(../images/container2.gif) top center repeat-y; /*stoopid ie*/ width: 791px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; /*stoopid ie*/ } #left { float:left; width: 200px; padding-top: 91px; background: url(images/bg2.png) top center repeat-x !important; background: url(images/bg2.gif) top center repeat-x; /*stoopid ie*/ } #header { background: url(../images/headbg.png) top center no-repeat; background: url(../images/headbg.gif) top center no-repeat; /*stoopid ie*/ height: 91px; width: 361px; padding-left: 30px; margin-bottom: 0 !important; } #content { width: 361px; padding-left: 15px; } #footer { text-align: center; width: 361px; padding-bottom: 20px; } #right { float:left; width:200; margin-top: 81px; } I have a menu bar that is positioned by css. It works exactly as it should on all browsers, except IE7 http://www.firstpokertips.co.uk/ In IE7 the menu is offset up and to the right of where it should be. Can anyone help. I have been trying for many many hours but just cant work out what is wrong. So I'm working on this site. deborahgunn-interiors dot com (new user issue) my problem is that everything works acceptably well in most browsers. IE on the other hand is a freaking nightmare, throwing everything out of position and even things outside of my div container making me scroll considerably just to view the content. If anyone could take a look and give me some pointers that would be great. Alright, here we go again. The page in question... Various screenshots I'm working up a sample for a job I came across. The scenario: He wants a simple layout: top header, left column, mid (main), right column, and bottom header. The width of the body should be no more than 650 pixels and centered. However, he wants the html flow to be in order of: main, top header, left column, bottom header, right column. Obviously is going to require absolute positioning, right? So, using Win XP, I got it to look descent in IE 6, Net 7, and FF 1. Those are the three browser brands he's concerned about; the last two versions of each (didn't specify operating system). Basically, I'm just asking for someone to look at the source code and tell me if there's a simpler way. The way it's set up now, it renders poorly on several different versions of IE, Net, and Moz under other operating systems (which you can view in the screenshots URL above). Plus, the heights are not constant. Meaning that he will always be adding/changing content meaning he'll always have to mess with the positioning. Is this absolutely worthless? Problem is I don't want to give up because it is fun to learn (plus there's two other potential jobs behind it). It's starting to seem, however, that there will be no easy fix and perhaps the answer is unachievable in this situation. Any advice? im using this currently for internet explorer on a mouse over but it doesnt do anything.. the mozilla one works just fine IE Code: filter.progid:DXImageTransform.Microsoft.Alpha(opacity=70); progid:DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310) progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3); Firefox Code: -moz-opacity: 0.7; Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like: Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Now clicking [+] in front of Google.com will look like. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e. Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting. Here is the source for the above: 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" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>
<style type="text/css">
ul li ul {display:none;list-style-type: none;}
#myNav li a:hover {
color: blue;
}
#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}
#myNav { list-style-image: url(page.GIF); }
</style>
<script type="text/javascript">
<!--
function initNav() {
var navObj = document.getElementById('myNav');
var ulCollection = navObj.getElementsByTagName('li');
for (var loop = 0; loop < ulCollection.length; loop++) {
if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
/* we have an LI that contains a UL */
if (ulCollection[loop].getElementsByTagName('span').length > 0) {
/* there is at least one SPAN tag present */
ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
}
}
}
}
window.onload = initNav;
//-->
</script>
</head>
<body>
<ul id="myNav">
<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
<li><span></span><a href="http://www.google.com">Google.com</a>
<ul>
<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
<ul>
<li>*3*</li>
<li>*4*</li>
</ul>
</li>
</ul>
</li>
<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
<ul>
<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
</ul>
</li>
</ul>
</body>
</html>
Any help is really appreciated thanks. EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears. (My drop down is vertically aligned on the left.) (bits of the code that relate to the menu) PHP Code: .btn1 { position: absolute; left: 165px; top: 200px; } .btn2 { position: absolute; left: 165px; top: 240px; } .btn3 { position: absolute; left: 165px; top: 280px; } .btn4 { position: absolute; left: 165px; top: 320px; } .btn5 { position: absolute; left: 165px; top: 360px; } .btn6 { position: absolute; left: 165px; top: 400px; } .btn7 { position: absolute; left: 165px; top: 440px; } .btn8 { position: absolute; left: 165px; top: 480px; } .link1 { position: absolute; left: auto; top: 240px; } .link2 { position: absolute; left: auto; top: 280px; } .link3 { position: absolute; left: auto; top: 320px; } .link4 { position: absolute; left: auto; top: 360px; } .link5 { position: absolute; left: auto; top: 400px; } .link6 { position: absolute; left: auto; top: 440px; } .link7 { position: absolute; left: auto; top: 480px; } .link8 { position: absolute; left: auto; top: 520px; } .link9 { position: absolute; left: auto; top: 560px; } #nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav a { display: block; width: 100px; } #nav li { width: 100px; } #nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; } #nav li:hover ul { display: block; left: 266px; z-index: 3; } #nav li:over ul { display: block; left: 266px; z-index: 3; } PHP Code: <ul id="nav"> <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li> <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a> <ul> <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li> <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li> <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li> <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li> <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li> </ul> </li> <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a> <ul> <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li> <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li> <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li> <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li> </ul> </li> <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a> <ul> <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li> </ul> </li> <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a> <ul> <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li> <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li> <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li> </ul> </li> <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a> <ul> <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li> <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li> </ul> </li> <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li> <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li> </ul> <script type="text/javascript" src="drop_down.js"></script> the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later. link: The Page Hi all, I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear. You can find the page he http://www.perceptes.com/topdog/ The CSS and JS (uses jQuery) can be found he http://www.perceptes.com/topdog/css/screen.css http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment) http://www.perceptes.com/topdog/js/tdps.js http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment) For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look. Thanks very much in advance! I'm helping these fine folks fix a few little issues with their site but this one I can't seem to quite figure out. If you roll over the main menu you will see the sub menu slide down on the left. For the life of me I can't get it to line up under the main nav. I've tried many, many things. Can anyone provide a few hints, tips, suggestions? Thanks so much!!! 98.214.188.71/life at excel.htm Code: /*******************menu starts********************/ #menu{float:left; width:100%; background:#ffffff;} #menu a{font-weight:bold; line-height:16px;} #menu table{float:left; width:100%; background:transparent;} #menu .menu01{width:147px;} #menu .menu01 a{float:left; /*width:149px;*/width:100%; height:26px; background:url(images/menu01.gif) no-repeat right 0; float:left; color:#fff; text-decoration:none; text-align:center; padding:10px 0 0 0} #menu .menu01 a.current{float:left; /*width:149px;*/width:100%; height:26px; background:url(images/menu01.gif) no-repeat right 0; cursor:pointer;} #menu .divider{width:.5%; height:36px; background:url(images/white_divider.gif) repeat-x 0 1px;} #menu .menu02{} #menu .menu02 a{display:block; background:url(images/menu02.gif) repeat-x right 0; padding:10px 0 0; height:26px; color:#fff; text-decoration:none; text-align:center} #menu .menu02 a.current{float:left; width:100%; background:url(images/menu02.gif) no-repeat right bottom; color:#fff; cursor:pointer;} #menu .menu03{} #menu .menu03 a{display:block; background:url(images/menu03.gif) repeat-x right 0; padding:10px 0 0; text-align:center; height:26px; color:#fff; text-decoration:none;} #menu .menu03 a.current{float:left; width:100%; background:url(images/menu03.gif) no-repeat right bottom; height:26px; color:#fff; cursor:pointer;} #menu .menu04{width:152px; } #menu .menu04 a{float:left; /*width:152px;*/width:100%; background:url(images/menu04.gif) no-repeat right 0; padding:10px 0 0; text-align:center; height:26px; color:#fff; text-decoration:none;} #menu .menu04 a.current{float:left; /*width:152px;*/width:100%; background:url(images/menu04.gif) no-repeat right bottom; height:26px; color:#fff; cursor:pointer;} #menu .menu05{width:143px;} #menu .menu05 a{float:left; /*width:143px;*/ width:100%;background:url(images/menu05.gif) no-repeat right 0; padding:10px 0 0; text-align:center; height:26px; color:#fff; text-decoration:none;} #menu .menu05 a.current{float:left; /*width:143px;*/width:100%; background:url(images/menu05.gif) no-repeat right -43px; height:26px; color:#fff; cursor:pointer;} .exp{ display:none; clear:both; text-align:center; background:#BA8747; z-index:4; } #menu DIV.sub-mlinks A { color:#000; background:none; font-weight:bold; padding-top:2px; padding-bottom:0px; display:block; height:auto; } #menu DIV.sub-mlinks A:hover{ color:#FFF; } /*******************menu ends********************/ <div id="menu"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="970"><tbody><tr> <td style="width: 19.6%;" id="item1" class="menu01"><a href="http://www.excelfoundry.net/lifeatexcel/">Home</a></td> <td class="divider"> </td> <td style="width: 19.6%;" id="item2" class="menu02" onmouseover="expand(this.id, 'menu2');" onmouseout="collapse(this.id, 'menu2');" onmouseleave="collapseIE(this.id, 'menu2');"><a href="http://www.excelfoundry.net/lifeatexcel/">Excel Tools</a><div id="menu2" class="exp" onmouseout="collapse('item2', this.id);" onmouseleave="collapseIE('item2', this.id);"><div class="sub-mlinks"><a href="http://www.excelfoundry.net/improvement" target="_new" class="menuitem">Continual Improvement</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/service" target="_new" class="menuitem">Crusher Service (FLSP)</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/xlu" class="menuitem">Excel University</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/crm/data" target="_new" class="menuitem">Excelerator CRM</a></div><div class="sub-mlinks"><a href="http://ezlmwc.adp.com/" target="_new" class="menuitem">EZLabor</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/First%20Article/First%20Article%20Parts.xls" class="menuitem">First Article Parts</a></div><div class="sub-mlinks"><a href="https://login.postini.com/exec/login" class="menuitem">FLS Spam Filter Login</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/ecr/" target="_new" class="menuitem">FLSP ECR</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/forms" class="menuitem">Forms Library</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/iso9001" class="menuitem">ISO 9001 Procedures</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/helpdesk" target="_new" class="menuitem">IT Help Desk</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/machine-info" class="menuitem">Machine Info</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/Manu_Memos/Memos.html" target="_new" class="menuitem">Manufacturing Memos</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/metrics" class="menuitem">Metrics</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/msq" target="_new" class="menuitem">MSQ Editor</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/manuals" class="menuitem">Parts Manuals</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/parts" target="_new" class="menuitem">Parts Search</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/po" target="_new" class="menuitem">PO Tool</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/flows" class="menuitem">Process Flows</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/revSupport" target="_new" class="menuitem">Revision Support</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/routing" class="menuitem">Routing Guide</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/safety" class="menuitem">Safety & Training</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/docs/QRM%20Schedule.xlsx" class="menuitem">QRM Schedule</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/training" class="menuitem">Training Request System</a></div><div class="sub-mlinks"><a href="http://my.concureworkplace.com/default.asp?companyid=excet5jvd2telbgk" target="_new" class="menuitem">Travel Expense (EFM)</a></div><div class="sub-mlinks"><a href="http://my.concureworkplace.com/default.asp?companyid=smid5gr1t0br0czj" target="_new" class="menuitem">Travel Expense (FLSP)</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/xcalibur" target="_new" class="menuitem">Xcalibur</a></div></div></td> <td class="divider"> </td> <td style="width: 19.6%; color: black;" id="item3" class="menu03" onmouseover="expand(this.id, 'menu3');" onmouseout="collapse(this.id, 'menu3');" onmouseleave="collapseIE(this.id, 'menu3');"><a href="http://www.excelfoundry.net/lifeatexcel/">Our People</a><div style="top: 168px; left: 376px; width: 183px; position: static; visibility: hidden; display: none;" id="menu3" class="exp" onmouseout="collapse('item3', this.id);" onmouseleave="collapseIE('item3', this.id);"><div class="sub-mlinks"><a href="https://login.fidelity.com/ftgw/pages/fesco/html/NBParticipantLogout.html" target="_new" class="menuitem">401k Login</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/classifieds" class="menuitem">Classifieds</a></div><div class="sub-mlinks"><a href="http://excelfoundry.net/lifeatexcel/?q=our-people/hr/directory" class="menuitem">Employee Directory</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/eu" class="menuitem">Excel University</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/insite" class="menuitem">FLSmidth Insite</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.com/about-excel/company-history" class="menuitem">History of Excel</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/hr" class="menuitem">Human Resources</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/dates" class="menuitem">Important Dates</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/jobs" class="menuitem">Job Openings</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/mlb" class="menuitem">MLB Standings</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/phone" class="menuitem">Phone Directory</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/380" class="menuitem">Quality and Mission Statement</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/docs/EFM%20HR%20XLU%20Servant%20Leadership%20Academy.pdf" class="menuitem">Servant Leadership Academy Info</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/training" target="_new" class="menuitem">Training Request System</a></div></div></td> <td class="divider"> </td> <td style="width: 19.6%;" id="item4" class="menu04" onmouseover="expand(this.id, 'menu4');" onmouseout="collapse(this.id, 'menu4');" onmouseleave="collapseIE(this.id, 'menu4');"><a href="http://www.excelfoundry.net/lifeatexcel/">Departments</a><div id="menu4" class="exp" onmouseout="collapse('item4', this.id);" onmouseleave="collapseIE('item4', this.id);"><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/accounting" class="menuitem">Accounting & Administration</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/support" class="menuitem">Customer Support</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/engineering" class="menuitem">Design Engineering</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/foundry" class="menuitem">Foundry</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/hr" class="menuitem">Human Resources</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/it" class="menuitem">IT</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/machine" class="menuitem">Machine Shops</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/maintenance" class="menuitem">Maintenance</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/mktg_wo" class="menuitem">Marketing</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/materials" class="menuitem">Materials</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/193" class="menuitem">Manufacturing Engineering</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/192" class="menuitem">Production Control</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/quality" class="menuitem">Quality Engineering</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/187" class="menuitem">Sales</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/toolcrib" class="menuitem">Tool Crib</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/warehouse" class="menuitem">Warehouse</a></div></div></td> <td class="divider"> </td> <td style="width: 19.6%; color: black;" id="item5" class="menu05" onmouseover="expand(this.id, 'menu5');" onmouseout="collapse(this.id, 'menu5');" onmouseleave="collapseIE(this.id, 'menu5');"><a href="http://www.excelfoundry.net/lifeatexcel/">Our Customers</a><div style="top: 168px; left: 752px; width: 183px; position: static; visibility: hidden; display: none;" id="menu5" class="exp" onmouseout="collapse('item5', this.id);" onmouseleave="collapseIE('item5', this.id);"><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-customers/highlights" class="menuitem">Customer Highlights</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-customers/equipment" class="menuitem">Equipment Profiles</a></div></div></td> </tr></tbody></table> </div>
I am a photographer for a website and I know very little about anything other than basic html. With the website lady gone on a trip around the world for a year, I ended up being the person to attempt to modify our side menu to show an additional column of subcategories. I tinkered around with the code we had and I managed to get this to work in Firefox, however in IE7 the contents of the menu shift down a few pixels when you hover over a category. To view my problem, go to scannerparts.biz I've messed around with this for a few days and everything has become a big confusing mess so I have no choice but give in and ask for help. I thank anyone in advance for any assistance you can offer. -Emerson Here is the code: hover.css Code:
<!--
body {
behavior: url(/images/csshover2.htc);
}
div#categorynav ul {margin: 0px; padding: 0px;}
.submenu {
position: relative;
margin: 0px;
padding: 2px 0px;
width: 178px;
}
div#categorynav ul.level1 li a {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level2 li {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level3 li {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level1 ul.level2 a {
background-color: #000000;
color: #fff;
width: 178px;
font-weight:normal;
padding: 4px 4px 4px 14px;
}
div#categorynav ul.level2 ul.level3 a {
background-color: #000000;
color: #fff;
width: 178px;
font-weight:normal;
padding: 4px 4px 4px 14px;
}
html>body div#categorynav ul.level1 ul.level2 a {
width: auto;
padding: 0px;
margin: 0px;
}
html>body div#categorynav ul.level2 ul.level3 a {
width: auto;
padding: 0px;
margin: 0px;
}
div#categorynav>ul a {width:auto; padding: 0px; margin: 0px;}
div#categorynav ul ul {position: absolute; display: none; width: 100px; z-index:900; padding: 0px; margin: 0px;}
div#categorynav ul ul li {padding: 0px; margin: 0px;}
div#categorynav ul.level1 li.submenu:hover ul.level2 {
display: block;
list-style-image: none;
list-style-type: none;
}
div#categorynav ul.level2 li.submenu:hover ul.level3 {
display: block;
list-style-image: none;
list-style-type: none;
}
div#categorynav ul.level2 {
top: 0px;
left: 178px;
margin: 0px;
padding: 0px;
width:160px;
}
div#categorynav ul.level2 li a:hover {
background-color: #000000;
color: red;
}
div#categorynav ul.level3 {
top: 0px;
left: 178px;
margin: 0px;
padding: 0px;
width:160px;
}
div#categorynav ul.level3 li a:hover {
background-color: #000000;
color: red;
}
Abbreviated Header Source (abbreviated for max character requirement, I think I left all the vital stuff there) Code:
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<ss:comment><link href="hover.css" type="text/css" rel="stylesheet" media="screen"/></ss:comment>
<link href="$store.images['hover.css']" type="text/css" rel="stylesheet" media="screen"/>
<style type="text/css">
<!--
/* Style Sheet */
body {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 30px;
margin-left: 1px;
background-image: url(/images/backgroundgray.jpg);
background-repeat: repeat-x;
background-position: center bottom;
}
html { height: 100%; margin-bottom: 1px; }
#outline{
border :0px solid #ffffff;
width :760px;
}
#categories{
background-color:#000000;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 5px 5px 1px 0px;
font-weight :bold;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
#cat1{
background-color:#000000;
color: #ffffff;
text-decoration:none;
text-align: left;
display: block;
font-weight :normal;
font-size: 9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width: 178px;
padding: 0px;
}
#cat1 a{
background-color:#000000;
color: #ffffff;
text-decoration:none;
text-align: left;
display: block;
font-weight: normal;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
#cat1 a:hover{
background-color:#000000;
color:#ff0000;
text-decoration:none;
text-align : left;
display: block;
font-weight: normal;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
.leftnav {
background-color:#000000;
color:#ffffff;
text-decoration:none;
font-weight :bold;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
padding : 2px 5px 1px 0px;
}
.leftnav A:link {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:visited {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:hover {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ff0000;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:active {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
A:link {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:visited {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:hover {text-decoration:none;color:<ss:value source=$font.paragraph.color/>;}
A:active {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
.content {font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}
.title {font-size:10pt;font-weight:bold;font-family:<ss:value source=$font.paragraph.face/>
;color:#ffffff;}
.footer {font-size:9pt;font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}
-->
</style>
</head>
<body>
<center>
<div id="outline">
<table width="760" border="0" cellspacing="0" cellpadding="0">
<!-- banner image -->
<tr valign="top"><td colspan="4"><a href="(URL address blocked: See forum rules)"><ss:image source="$templateSet.images['header.jpg']" border="0"/></a></td></tr>
<tr valign="top">
<!-- left nav -->
<td bgcolor="#000000"> </td>
<td width="175" bgcolor="#000000">
<div class="leftnav">
<!-- store logo -->
</div>
<div class="leftnav">
<div style="border-bottom : 0px solid #666666;"> </div>
<!-- home -->
</div>
<!-- categories -->
<p><font face="Arial,Helvetica,sans-serif" size="2" color="white"><b>Parts and Products:</b></font></p>
<div id="categorynav">
<div id="categories">
<ul class="level1">
<ss:foreach item="category" within="$catalog.categoryList()">
<ss:sortby item="categorypriority" direction="asc"/>
<ss:if test="$category.treeLevel == '1'">
<ss:set name="hasSub" value="0"/>
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:set name="hasSub" value="1"/>
</ss:foreach>
<li class="submenu">
<div id="cat1"><ss:link source="$category"/></div>
<ss:if test="$hasSub == '1'">
<ul class="level2">
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:sortby item="categorypriority" direction="asc"/>
<ss:if test="$category.treeLevel == '2'">
<ss:set name="hasSub" value="1"/>
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:set name="hasSub" value="1"/></ss:foreach></ss:if>
</li>
<li class="submenu">
<div id="cat1"><ss:link source="$subcategory"/></div>
<ss:if test="$hasSub == '1'">
<ul class="level3">
<ss:foreach item="subcategory" within="$subcategory.childrenToDepth(1)">
<li><ss:link source="$subcategory" title="$subcategory.name"/></li>
</ss:foreach>
</ul>
</ss:if>
</ss:foreach>
</ul>
</ss:if></ss:foreach>
</li>
</ss:if></ss:if></ss:foreach>
<br>
</ul>
</div>
</div>
Ok, I know virtually nothing about css, but realized that that a css menu is better for SEO. Anyway I found this vertical menu that works the way I want it. But I also need a horizontal version of it with dropdown submenus. Can someone help with this? I have been trying a bunch of things but it just looks awful and doesn't work right. It has 3 basic componets; Html, Javascript, and css. Here they are below. drop_down.js: Code: // JavaScript Document
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
HTML: 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>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "style2.css";
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
</body>
</html>
Style2.CSS: Code: body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
[sorry for any duplication... I just submitted this to the HTML list but suddenly realized it's really a CSS problem] I have a couple web pages that include relatively long pop-up "help" fields... implemented with the display and index style elements. With Netscape or Safari they look fine, but with IE or Opera, some underlying elements "bleed through"; that is, some elements from a div with a lower z-index, which should be behind, seem to float off the rear document and appear in front of the front document. All of the problem elements seem to be within forms and (probably more importantly) they all seem to be in a DIV other than the DIV containing the pop up. That is each structure looks something like: <div> <div> ... the pop up </div> <div> the rest of this section </div> </div> <div> ... some more stuff </div> the proplems are in the area in which the pop up overlaps later divisons. (not all items so conflict) ... any ideas? Hi all, I've got a little request. Does anybody know how I could solve this issue: I want to have a menu hover on the left, and a menu hover at the top, while visitors can move the google map around in the background. I do this by setting my map div to z-index: -1, and it works good. Except it won't let people click on the map and move it around, even though there isn't a div ontop of it. http://pw.mmogm.com/0.0.5/frame.html The only other way I can think of it set the menu's to z-index: 1, but that would cause them to lag, and they're position would be fixed so when I "toggle" the menu, the top menu won't slide left. It's much nicer the first way, besides the clicking problem. http://pw.mmogm.com/0.0.5/frame2.html I greatly greatly any advice you might be able to shed on this issue. Thanks in advance if you can On a site I'm trying to setup I have a header arrangement with a centrally placed image/logo (it's a png8). 1. It looks a bit decimated in IE6. Anyone know why? 2. The image is supposed to be absolute and on top but in fact the menu bar stays on top. All a problem in IE but not firefox. I'm obviously missing something basic! Help appreciated. I have two elements. One has a z-index of 9999 and the other has 9000. Both elements are positioned. It is a modal popup window. When I open it, the element with a poistion of 9000 is on top of the one with 9999. I even checked to confirm that the z-index properties were the same once the popup completed. What could cause this? Hi, I am trying to position a logo at the foot of http://www.root.lamtha2.co.uk/cssproblem/ If you look at the source it shows, <div id="footer" class="navTextBottom"> <br /> <!-- #BeginLibraryItem "/Library/bottom_nav_bar.lbi" --><a href="index.html">Home</a> | <a href="#">Terms & Conditions</a> | <a href="#">Links</a> | <a href="#">Contact Us</a><!-- #EndLibraryItem --><br /> <span class="copyrightText">Copyright Apex Verhicle Rentals 2006</span><br /> <div id="lamtha2logo"><a href="http://www.lamtha2.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Lamtha2logo','','index_images/designed_by_l2_on.jpg',1)"><img src="index_images/designed_by_l2_off.jpg" alt="Lamtha2 Web Design" name="Lamtha2logo" width="89" height="29" border="0" id="Lamtha2logo" /></a> </div> <!-- end lamtha2logo --> </div> <!-- end footer --> Here is the css #footer { width:760px; font-size:12px; background-image: url(index_images/footer.gif); text-align: center; background-repeat: no-repeat; z-index: -2; } #lamtha2logo { height: 29px; width: 89px; background-repeat: no-repeat; z-index: 2; float: left; padding-left: 10px; margin-bottom: -35px; } Can anyone help me resolve why div #lamtha2logo is beneath div #footer thanks I am not sure why this is not working but I am trying to nest a div and overlay them. Code:
<style>
.txtImg {
posistion: relative;
z-index: 99;
height: 72px;
width: 100%;
background: url(../../images/roycity-gpl-01.png) no-repeat left;
}
.logo {
position: relative;
z-index: 1;
height: 72px;
width: 100%;
background: no-repeat right;
}
</style>
<div id="txt" class="txtImg" align="left">
<div id="bg-img" class="logo" align="right"></div>
</div>
I am making a list of arrangements, and want a div containing further info to pop up, when you click the arrangement. To make sure the info-box is on top of the other DIVs, i have set z-index to 1. But i have a couple of scripts on the page, and they are allways places on top. I there a way to go around this? + Is it possible with a few simple changes to this script: Code: <script type="text/javascript"><!--
function showHide(boxName) {
theBox = document.getElementById(boxName);
if (theBox.className == "boxVisible") {
theBox.className = "boxHidden";
} else {
theBox.className = "boxVisible";
}
}
//-->
</script>
<body>
<a href="news" onclick="showHide('news'); return false;">News</a>
</body>
So the target changes back, when the link is inactive. I've tried this: Code: <body> <a href="news" onmouseover="showHide('news'); return false;">News</a> </body>
But then i have to pass the link again, to close the window again. |
|||||||