|
CSS - Please Help!! Z Index Will Not Work!
hey there... so im having problems placing a div over a div using z-index but in order to explain that i need to explain whats in the div itself. to put it in a nutshell im trying to make images change when i hover over them and use them as links, but to do this however (or at least everywhere ive looked) this would require me to change the actual tables and coding itself for the other divs i have already made (if that didnt make sense im sorry youll have to bear with me cuz im relatively new at this) so to do this and make a separate navigation bar on top of my banner div i made another div to be placed over that, i assumed you could just make the navigation div rest on top of the banner div using z index but when i type it into the code and hit submit i get ".." when i try to figure out whats wrong the next time i look at the code.
the myspace page is here myspace.com/mikeyeffinpowelltest and the place where i want to put the nav bar is in between the 2 brown lines just above the music player this is for a myspace band page. where the problems occur are as fallows. Code: div.navigation {position: absolute; ..; top: 0; left: 50%; margin-top:1000px; margin-left: -428px; width 860px; height: 43px;}
the whole code for the profile is he i know its long but please take a look Code: <style> body table {margin-top:918px;} body td table, body div table {margin-top: 0;} div.topbanner {position: absolute; top: 0; left: 50%; margin-top:0px; margin-left: -428px; width: 860px; height:1125px;} div.navigation {position: absolute; top: 0; left: 50%; margin-top:1000px; margin-left: -428px; width 860px; height: 43px;} div.sidebar {position: absolute; top: 0; left: 50%; margin-top:1125px; margin-left: -398px; width: 340px; height:243px;} div.upcomingshows {position: absolute; top: 0; left: 50%; margin-top:1490px; margin-left: -7px; width: 320px; height:56px;} .contactTable {display: none;}.orangetext15{ display:none; visibility:hidden;} table, tr, td { background-color:transparent; border:none; border-width:0;} body { background-color:000000; background-image: url(http://img262.imageshack.us/img262/3389/braverbackground.png); background-attachment: fixed; background-position:center; background-repeat:no-repeat; } table, tr, td, li, p, div { font-family:arial; color:6a583a; font-size:10px; } .btext { font-family:arial; color:6a583a; font-size:10px; font-weight:bold; } .blacktext10 { font-family:arial; color:6a583a; font-size:10px; font-weight:bold; } .whitetext12 {color: 6a583a; background-color: 000000; background-image:; font-size: 12px; margin: 0px 0px 0px 0px; padding: 13px 10px 10px 10px; text-align: center; display: block; text-transform: uppercase; font-family: Helvetica, Arial; font-weight: bold;} .blacktext12 {color: 6a583a; font-size: 12px; background-color: 000000; font-family: Helvetica, Arial, sans-serif; font-weight: normal; display: block; margin-top: 14px; text-transform: uppercase;} .lightbluetext8 { font-family:arial; color:6a583a; font-size:10px; font-weight:bold; } .orangetext15 { font-family:arial; color:6a583a; font-size:10px; font-weight:bold; } .redtext { font-family:arial; color:6a583a; font-size:10px; font-weight:bold; } .redbtext { font-family:arial; color:6a583a; font-size:10px; font-weight:bold; } .text { font-family:arial; color:6a583a; font-size:10px; font-weight:bold; } a:active, a:visited, a:link { font-family:arial; color:6a583a; font-size:10px; font-weight:bold; } a:hover { font-family:arial; color:6a583a; font-size:10px; } a.navbar:active, a.navbar:visited, a.navbar:link { color:6a583a; } a.navbar:hover { font-family:arial; color:6a583a; font-size:10px; } a.redlink:active, a.redlink:visited, a.redlink:link { font-family:arial; color:6a583a; font-size:12px; font-weight:bold; } a.redlink:hover { font-family:arial; color:6a583a; font-size:10px; } .nametext { background:;background-repeat:no-repeat; background-position:bottom; display:block; width:300px; height:124px; font-family:helvetica,arial; color: ; font-size:-0px; } div table tr td font {visibility:hidden;} div table table tr td font {visibility:visible;} tr {background:transparent;} body table div font a, body table div div {visbility:hidden;} body table table div font a, body table table div div {visibility:visible;} html body.bodyContent table tbody tr td table.friendsComments{ width: 770px !important; margin: 0 !important; padding: 0 !important; margin-top: 20px !important; overflow: hidden !important; background-color: transparent !important; margin-left: -1px !important; _width: 770px !important; _margin-left: -2px !important; } html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table{ width: 100% !important; border-collapse: separate !important; border-spacing: 0px 0px !important; background-color: transparent !important; height: auto !important; } table.friendsComments tbody tr td.text table tbody tr td{ background-color: transparent !important; height: auto !important; } html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td b{ display: block; position: absolute; z-index: 9; width: 758px; height: 15px; line-height: 15px; overflow: hidden; margin: -48px 0 0 8px; text-align: right; padding-right: 12px !important; color: ; font-weight: normal; font-size: 12px; _margin: -53px 0 0 8px; _font-size: 11px !important; _color: 333333; } html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td b span.redtext{ font-weight: bold; color: e2f6a6; padding: 0px 2px; } html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td b a{ color: FFFFFF !important; font-size: 10px !important; text-transform: Uppercase; margin: 0 -7px 0 -8px !important; padding: 0 9px 0 9px !important; background-color: !important; position: relative !important; display: inline !important; z-index: 9; border: none !important; letter-spacing: 0px !important; _font-size: 11px !important; _margin: 0 !important; _padding: 0 !important; } html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td{ background-color: !important; background-image:; text-align: left; vertical-align: top; overflow: hidden !important; font-size: 10px !important; line-height: 12px !important; text-transform: none !important; letter-spacing: 0px; color: FFFFFF !important; margin: 0 !important; padding: 12px 0px 12px 0px; border-bottom: 1px dotted !important; border-color: 222222 !important; _line-height: 16px !important; } html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td span.blacktext10{ color: !important; text-transform: Uppercase !important; margin: 0px !important; padding: 0px important; display: block !important; font-size: 9px; font-family: verdana !important; font-weight: normal; letter-spacing: 1px; text-align: right; margin: 12px 12px -15px 0px !important; width: 622px; border-top: 1px solid black; _margin: 12px 0px -.5em 0px !important; _width: 634px; } html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td a{ display: block !important; color: !important; margin: 0px !important; padding: 12px 12px 0px 12px !important; text-transform: none !important; margin-bottom: -15px !important; font-size: 10px !important; line-height: 11px !important; border: none !important; letter-spacing: 0px !important; text-align: center !important; width: 110px !important; overflow: hidden !important; font-weight: normal; _width: 124px !important; _margin-bottom: -15px !important; } html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td a img{ visibility: visible !important; border: 1px solid dimgrey !important; border-color: !important; padding: 0px !important; margin: 0px !important; margin-top: -12px !important; width: auto !important; _margin-left: -4px; } html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td img.ImgOnlineNow{ display: block; position: relative; margin: 15px 0 -20px 26px !important; border: none !important; _margin: 15px 0 -20px 21px !important; } html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td img{ max-width: 100%; margin: 0px !important; margin: 0px 0px 12px 0px !important; } </style> <div class="topbanner"> <img src="http://img683.imageshack.us/img683/259/bannerbraver.png" border="0" /></a></div> <div class="navigation"> <style> a.youtubelink { width: 108px; background: url(http://img24.imageshack.us/img24/4421/youtubelink.png) top left no-repeat; } a.youtubelink:hover { background: url(http://img9.imageshack.us/img9/5259/youtubelinkhover.png) top left no-repeat; } a.facebooklink { width: 122px; background: url(http://img693.imageshack.us/img693/6725/facebooklinkt.png) top left no-repeat; } a.facebooklink:hover { background: url(http://img24.imageshack.us/img24/4872/facebooklinkhover.png) top left no-repeat; } a.twitterlink { width: 121px; background: url(http://img9.imageshack.us/img9/6989/twitterlinkq.png) top left no-repeat; } a.twitterlink:hover { background: url(http://img693.imageshack.us/img693/357/twitterlinkhover.png) top left no-repeat; } a.purevolumelink { width: 162px; background: url(http://img24.imageshack.us/img24/7692/purevolumelinko.png) top left no-repeat; } a.purevolumelink:hover { background: url(http://img24.imageshack.us/img24/175/purevolumelinkhover.png) top left no-repeat; } a.buzznetlink { width: 171px; background: urlhttp://img697.imageshack.us/img697/9417/buzznetlink.png) top left no-repeat; } a.buzznetlink:hover { background: url(http://img24.imageshack.us/img24/484/buzznetlinkhover.png) top left no-repeat; } </style> <img src="http://img691.imageshack.us/img691/1678/spacer1.png" /> <a href="http://www.msplinks.com/MDFodHRwOi8veW91dHViZS5jb20=" class="youtubelink"> <a href="http://www.msplinks.com/MDFodHRwOi8vZmFjZWJvb2suY29t" class="facebooklink"> <a href="http://www.msplinks.com/MDFodHRwOi8vdHdpdHRlci5jb20=" class="twitterlink"> <a href="http://www.msplinks.com/MDFodHRwOi8vcHVyZXZvbHVtZS5jb20=" class="purevolumelink"> <a href="http://www.msplinks.com/MDFodHRwOi8vYnV6em5ldC5jb20=" class="buzznetlink"> <img src="http://img268.imageshack.us/img268/3645/spacer2.png" /> </div> <div class="sidebar"><a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=68142598"><img src="http://img94.imageshack.us/img94/6189/minipic.png" border="0" /><a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=68142598"><img src="http://img22.imageshack.us/img22/1886/viewpictures.png" border="0" /><a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVzc2FnZVYyJmZyaWVuZElE PTY4MTQyNTk4Jk15VG9rZW49MTkzZGMzMDYtMDRiOC00ZjExLTljNWItYmFhNmM5NmY2Nzc2"><img src="http://img694.imageshack.us/img694/1944/contacttheband.png" border="0" /><a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJRD02ODE0MjU5OA=="><img src="http://img693.imageshack.us/img693/181/addtofriends.png" border="0" /><a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwuZm9yd2FyZFYyJmZyaWVuZElE PTY4MTQyNTk4JmY9Zm9yd2FyZHByb2ZpbGU="><img src="http://img262.imageshack.us/img262/1180/addtogroup.png" border="0" /><a href="http://www.msplinks.com/MDFodHRwOi8vcHJvZmlsZWVkaXQubXlzcGFjZS5jb20vaW5kZXguY2ZtP2Z1c2VhY3Rpb249dXNlci5hZGRUb0Zhdm9yaXRlJmZy aWVuZElEPTY4MTQyNTk4JnB1YmxpYz0w"><img src="http://img267.imageshack.us/img267/5912/addtofavs.png" border="0" /><a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTY4MTQyNTk4Jk15VG9rZW49MTkzZGMzMDYt MDRiOC00ZjExLTljNWItYmFhNmM5NmY2Nzc2"><img src="http://img40.imageshack.us/img40/9331/leavecommento.png" border="0" /><a><img src="http://img63.imageshack.us/img63/2866/memberssection.png" border="0" /></a></div> <div class="upcomingshows"><img src="http://img707.imageshack.us/img707/8907/upcomingshows.png" border="0" /></div> <center> <img src="http://img24.imageshack.us/img24/677/abouttheband.png" /><br /> BRAVER is a five piece metalcore band from Rancho Cucamonga out to make a name for themselves in the Inland Empire music scene. With fast relentless riffs, heavy breakdowns, melodic chorus's, and powerfull growls along with explosive stage performance, BRAVER is sure to be a band and experiance you will NEVER forget. <img src="http://img31.imageshack.us/img31/6683/bandnews.png" /> <style> div.myspace-scrollbox {height:300;width:425;background-color:000000;font-family:Arial;font-size:8pt;color:FFFFFF;text-align:left;border-width:1;border-style:solid;border-color:6a583a;overflow-y: scroll !important; overflow-x: none !important;} </style> <div class="myspace-scrollbox"> APRIL 24, 2009<br /> <br /> HEY EVERYONE!!! look at it and take it all in!<br /> Thats right everyone! new layout and a new song! and might we say it looks quite amazing! So we got alot more big news coming your way too, along with more shows, merch store, and a bunch of other stuff that should be popping off REALLY soon. So with that being said we from BRAVER would all like to take this opportunity to thank everyone who stuck for us during the LOOOOONG wait, so thank you all very much. You guys are what makes this happen and without you we would be nothing. So please sit back and enjoy the new layout and the new song!<br /><br /> -BRAVER </div><p style="font-family:verdana,arial,sans-serif;font-size:10px;"> <img src="http://img31.imageshack.us/img31/4323/videosiy.png" border="0" /></center> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="344" width="425"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/v/Kh1r-jFNMcY&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6" /> <param name="wmode" value="transparent" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/Kh1r-jFNMcY&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6" height="344" width="425" wmode="transparent" /> </object> <br /> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="344" width="425"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/v/H7fOK0rU0yI&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6" /> <param name="wmode" value="transparent" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/H7fOK0rU0yI&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6" height="344" width="425" wmode="transparent" /> </object> <br /> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="344" width="425"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/v/4AsM83MquwM&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6" /> <param name="wmode" value="transparent" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/4AsM83MquwM&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6" height="344" width="425" wmode="transparent" /> </object> <center> <img src="http://img51.imageshack.us/img51/5927/supportus.png" /><br /> <img src="http://img51.imageshack.us/img51/5662/merchx.png" /><br /> ALL MERCH IS AVAILABLE AT BRAVER SHOWS!!<br /> ONLINE MERCH STORE COMING SOON!!<br /><br /> <img src="http://img2.imageshack.us/img2/332/skullshirt.png" /><br /> BRAVER SKULL T (skull print on front)<br /> AVAILABLE IN:<br /><br /> youth large<br /> small<br /> medium<br /> large<br /> xlarge<br /> xxlarge<br /><br /> ONLY 10$!!<br /> <img src="http://img11.imageshack.us/img11/8876/chantshirt.png" /><br /> CHANT T (BRAVER print on front, chant print on back)<br /> ALSO AVAILABLE IN BLACK FONT ON WHITE!!<br /> AVAILABLE IN:<br /><br /> youth large<br /> small<br /> medium<br /> large<br /> xlarge<br /> xxlarge<br /><br /> ONLY 10$!!<br /> </center> </center> <br /> <br /> <br />
Similar TutorialsI was told awhile back that z-index would fix the issue i am having. the issue i am having is that my css popdown menus are hiding behind my flash embed!! EXAMPLE HERE Just scroll over the navigation at the top and you will see what i mean. Code:
ul.dash li:before{ content:"-"; position:relative; left:-15px;}
ul.dash li.ind.before{ text-indent:-15px; }
Code: <ul> <li class="ind" style="list-style: none; text-decoration: underline;">title</li> <li class="ind" style="list-style: none;">- blah blah. blah blah blah blah</li> <li class="ind" style="list-style: none;">- blah blah. blah blah blah blah.</li> <li class="ind" style="list-style: none;">- blah blah. blah blah blah blah.</li> <li class="ind" style="list-style: none;">- blah blah. blah blah blah blah.</li> </ul> how do i get it so it looks like... title - blah blah blah blah blah blah blah blah blah blah blah blah blah - blah blah blah blah blah blah blah blah blah blah blah - blah blah blah blah blah blah blah blah blah blah blah but not so much indented. but so the whole block is indented. I'm going mad with this, I tested the CSS a:hover function over FF 1.0.7 and IE6, and the style file is simple: PHP Code: h3 { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } p { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } a { text-decoration: none; } a:hover { color:#636500; } a:visited { color:#cecf9c; } a:link { color:#cecf9c; } searched through the forum but seems nobody has got this problem... I just want the link to change color, I imported the css file to my html and it worked for the first time. I clicked on the link and then use brower's "Back" button to test it again, but the hover feature is not working anymore. I think it may be affected by the a:visited style, but how do I make a:hover work all the time? Thanks for helping. Having an issue with a drop down menu in firefox. I have a nav bar with drop down menus. Just below that is an embedded video. Everything works fine except for the drop down menu is behind the video on firefox. Looks fine in IE. I adjusted the z-index properties to make sure that the nav bar sits on top, but it still sits behind. ??? Is it a glitch of some sort? 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. 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>
Hi everyone, I'm currently busy on a website which is viewable here The problem is the 'Top' image on the right side. It's supposed to be below the #shadow div (look at my source code) I tried changing the z-indexes to different levels but the top div keeps staying on top. If I turn it into a negative z-index, the mouseover doesn't work anymore.. Hope anyone can help Wouter I have an object on my page with the following settings: Code:
#myEmail {
position:absolute;
left:400px;
top:50px;
z-index:2;
display:none;
}
and i have a video player in my form that looks like this: Code:
<object id="Player" height="400" style="border:solid 1px black; z-index:1;" width="500" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="URL" value="<% =GetPlayerUrl() %>" />
<param name="autoPlay" value="true" />
</object>
Problem is, when the video starts to play, it moves to the top layer. What am i doing wrong? 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 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 hi, i've been reading extensively about the z-index issue that IE 7 suffers from (when using the "position" property) but i cannot for the life of me fix my problem. Basically i have a #menu that is positioned relative to a #wrapper. The dropdown menu works fine in all browsers except that in IE 7, the grey shadow that should appear behind the dropdown menu itself appears on top of the actual dropdown menu. If you view the same page using Firefox, the dropdown menu appears above the grey shadow as it should do. This is the EXACT behaviour i need. I need the dropdown menu and its shadow to appear above the "#content .box" below it, but i also need the shadow to appear behind the dropdown menu. I just need to replicate this exact behaviour you see in Firefox in IE 7. I need to keep the IE7 compatibility mode and the DOCTYPE as they are otherwise the other styles on my site will be affected. Please find the attached folder with all necessary code contained in it. Ignore the jquery.js file as its merely used for effects and is not causing the issue. BTW: its essential that the #menu is positioned relative to the #wrapper as i want it to appear further down in the HTML code for SEO purposes. Thanks in advance 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? [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? An old site, http://www.naausa.org, doesn't work properly in IE7 as the hover links don't go over the changing image. It seems to be because of the IE bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html The site and code is ugly (inline CSS, tables, etc.), but I don't want to reinvent the wheel; I just want to solve the problem and get it over with. I've tried several things with no luck. Can anyone take a gander at the source code and give me a hint? Thanks, Jeremy 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'm wanting to put three items together with different z-indexes. The first div contains another div and a paragraph, all are positioned absolutely. I want the 2nd div to be higher than the p. The html is as follows: Code: <div id="sticker"> <div></div> <p>Text</p> The css is as follows: Code:
div#sticker {width:146px; height:140px; background:url("stickerbase.png") no-repeat top left; position:absolute; top:20px; left:20px; z-index:10;}
div#sticker div {width:115px; height:67px; background:url("stickerflap.png") no-repeat top left; z-index:20;}
div#sticker p {position:absolute; top:40px; left:20px; z-index:15; background-color:#06c;}
An example is at www.wattersisere.co.uk/devshed I want the text with the blue background to be behind the flap of the sticker! I even tried it out with an online z-index checker and couldn't get their code to do it. Thanks, Watters I worked it out, I had missed the position:absolute off the 2nd div. Does IE not support z-index attributes? I set some z-indexes and it seems to have fixed my issues in firefox, but not in IE. I'm desperate for help. In the below code the select lists cover the menu items when the user hovers over the menu. The text fields seem to be fine.Why is this happening. Please help. Tracy Code: <STYLE>
#mainContainer{
width:700px;
margin:0 auto;
text-align:left;
background-color: #FFFFFF;
padding-left:0px;
padding-right:0px;
padding-bottom:15px;
}
#dhtmlgoodies_menu img{
border:0px;
}
/* End general styles for this example page */
/* General configuration CSS */
#dhtmlgoodies_menu ul li ul{
display:none; /* Needed to display ok in Opera */
}
#dhtmlgoodies_menu{
visibility:hidden;
}
#dhtmlgoodies_menu ul{
margin:0px; /* No indent */
padding:0px; /* No indent */
}
#dhtmlgoodies_menu li{
list-style-type:none; /* No bullets */
}
#dhtmlgoodies_menu a{
z-index:100;
margin:0px;
padding:0px;
}
/* End general configuration CSS */
/* Cosmetic */
/***********************************************************************
CSS - MENU BLOCKS
General rules for all menu blocks (group of sub items)
***********************************************************************/
#dhtmlgoodies_menu ul{
border:1px solid #000;
background-color:#FFF;
padding:1px;
}
#dhtmlgoodies_menu ul.menuBlock1{ /* Menu bar - main menu items */
border:0px;
padding:1px;
border:0px solid #606060;
background-color:#FFFFFF;
overflow:visible;
}
#dhtmlgoodies_menu ul.menuBlock2{ /* Menu bar - main menu items */
border:0px;
padding:1px;
border:1px solid #555;
}
/***********************************************************************
CSS - MENU ITEMS
Here, you could assign rules to the menu items at different depths.
***********************************************************************/
/* General rules for all menu items */
#dhtmlgoodies_menu a{
color: #000;
text-decoration:none;
padding-left:2px;
padding-right:2px;
z-index:100;
}
/*
Main menu items
*/
#dhtmlgoodies_menu .currentDepth1{
padding-left:5px;
padding-right:5px;
border:0px solid #FFFFFF;
}
#dhtmlgoodies_menu .currentDepth1over{
padding-left:5px;
padding-right:5px;
background-color:#FFFFFF;
border:0px solid #000;
}
#dhtmlgoodies_menu .currentDepth1 a{
font-weight:bold;
}
#dhtmlgoodies_menu .currentDepth1over a{ /* Text rules */
color:BLACK;
font-weight:bold;
}
/* Sub menu depth 1 */
#dhtmlgoodies_menu .currentDepth2{
padding-right:2px;
border:1px solid #FFF;
}
#dhtmlgoodies_menu .currentDepth2over{
padding-right:2px;
background-color:#E2EBED;
border:1px solid #000;
}
#dhtmlgoodies_menu .currentDepth2over a{ /* Text rules */
color:#000;
}
/* Sub menu depth 2 */
#dhtmlgoodies_menu .currentDepth3{
padding-right:2px;
border:1px solid #FFF;
}
#dhtmlgoodies_menu .currentDepth3over{
padding-right:2px;
background-color:#EDE3EB;
border:1px solid #000;
}
/* Sub menu depth 3 */
#dhtmlgoodies_menu .currentDepth4{
padding-right:2px;
border:1px solid #FFF;
}
#dhtmlgoodies_menu .currentDepth4over{
padding-right:2px;
background-color:#EBEDE3;
border:1px solid #000;
}
</STYLE>
<SCRIPT>
var dhtmlgoodies_menuObj; // Reference to the menu div
var currentZIndex = 1000;
var liIndex = 0;
var visibleMenus = new Array();
var activeMenuItem = false;
var timeBeforeAutoHide = 1200; // Microseconds from mouse leaves menu to auto hide.
var dhtmlgoodies_menu_arrow = 'images/arrow.gif';
var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
var navigatorVersion = navigator.appVersion.replace(/.*?MSIE ([0-9]\.[0-9]).*/g,'$1')/1;
var menuBlockArray = new Array();
var menuParentOffsetLeft = false;
function getTopPos(inputObj)
{
var returnValue = inputObj.offsetTop;
if(inputObj.tagName=='LI' && inputObj.parentNode.className=='menuBlock1'){
var aTag = inputObj.getElementsByTagName('A')[0];
if(aTag)returnValue += aTag.parentNode.offsetHeight;
}
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetTop;
return returnValue;
}
function getLeftPos(inputObj)
{
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
return returnValue;
}
function showHideSub()
{
var attr = this.parentNode.getAttribute('currentDepth');
if(navigator.userAgent.indexOf('Opera')>=0){
attr = this.parentNode.currentDepth;
}
this.className = 'currentDepth' + attr + 'over';
if(activeMenuItem && activeMenuItem!=this){
activeMenuItem.className=activeMenuItem.className.replace(/over/,'');
}
activeMenuItem = this;
var numericIdThis = this.id.replace(/[^0-9]/g,'');
var exceptionArray = new Array();
// Showing sub item of this LI
var sub = document.getElementById('subOf' + numericIdThis);
if(sub){
visibleMenus.push(sub);
sub.style.display='';
sub.parentNode.className = sub.parentNode.className + 'over';
exceptionArray[sub.id] = true;
}
// Showing parent items of this one
var parent = this.parentNode;
while(parent && parent.id && parent.tagName=='UL'){
visibleMenus.push(parent);
exceptionArray[parent.id] = true;
parent.style.display='';
var li = document.getElementById('dhtmlgoodies_listItem' + parent.id.replace(/[^0-9]/g,''));
if(li.className.indexOf('over')<0)li.className = li.className + 'over';
parent = li.parentNode;
}
hideMenuItems(exceptionArray);
}
function hideMenuItems(exceptionArray)
{
/*
Hiding visible menu items
*/
var newVisibleMenuArray = new Array();
for(var no=0;no<visibleMenus.length;no++){
if(visibleMenus[no].className!='menuBlock1' && visibleMenus[no].id){
if(!exceptionArray[visibleMenus[no].id]){
var el = visibleMenus[no].getElementsByTagName('A')[0];
visibleMenus[no].style.display = 'none';
var li = document.getElementById('dhtmlgoodies_listItem' + visibleMenus[no].id.replace(/[^0-9]/g,''));
if(li.className.indexOf('over')>0)li.className = li.className.replace(/over/,'');
}else{
newVisibleMenuArray.push(visibleMenus[no]);
}
}
}
visibleMenus = newVisibleMenuArray;
}
var menuActive = true;
var hideTimer = 0;
function mouseOverMenu()
{
menuActive = true;
}
function mouseOutMenu()
{
menuActive = false;
timerAutoHide();
}
function timerAutoHide()
{
if(menuActive){
hideTimer = 0;
return;
}
if(hideTimer<timeBeforeAutoHide){
hideTimer+=100;
setTimeout('timerAutoHide()',99);
}else{
hideTimer = 0;
autohideMenuItems();
}
}
function autohideMenuItems()
{
if(!menuActive){
hideMenuItems(new Array());
if(activeMenuItem)activeMenuItem.className=activeMenuItem.className.replace(/over/,'');
}
}
function initSubMenus(inputObj,initOffsetLeft,currentDepth)
{
var subUl = inputObj.getElementsByTagName('UL');
if(subUl.length>0){
var ul = subUl[0];
ul.id = 'subOf' + inputObj.id.replace(/[^0-9]/g,'');
ul.setAttribute('currentDepth' ,currentDepth);
ul.currentDepth = currentDepth;
ul.className='menuBlock' + currentDepth;
ul.onmouseover = mouseOverMenu;
ul.onmouseout = mouseOutMenu;
currentZIndex+=1;
ul.style.zIndex = currentZIndex;
menuBlockArray.push(ul);
var topPos = getTopPos(inputObj);
var leftPos = getLeftPos(inputObj)/1 + initOffsetLeft/1;
ul = dhtmlgoodies_menuObj.appendChild(ul);
ul.style.position = 'absolute';
ul.style.left = leftPos + 'px';
ul.style.top = topPos + 'px';
var li = ul.getElementsByTagName('LI')[0];
while(li){
if(li.tagName=='LI'){
li.className='currentDepth' + currentDepth;
li.id = 'dhtmlgoodies_listItem' + liIndex;
liIndex++;
var uls = li.getElementsByTagName('UL');
li.onmouseover = showHideSub;
if(uls.length>0){
var offsetToFunction = li.getElementsByTagName('A')[0].offsetWidth+2;
if(navigatorVersion<6 && MSIE)offsetToFunction+=15; // MSIE 5.x fix
initSubMenus(li,offsetToFunction,(currentDepth+1));
}
if(MSIE){
var a = li.getElementsByTagName('A')[0];
a.style.width=li.offsetWidth+'px';
a.style.display='block';
}
}
li = li.nextSibling;
}
ul.style.display = 'none';
if(!document.all){
//dhtmlgoodies_menuObj.appendChild(ul);
}
}
}
function resizeMenu()
{
var offsetParent = getLeftPos(dhtmlgoodies_menuObj);
for(var no=0;no<menuBlockArray.length;no++){
var leftPos = menuBlockArray[no].style.left.replace('px','')/1;
menuBlockArray[no].style.left = leftPos + offsetParent - menuParentOffsetLeft + 'px';
}
menuParentOffsetLeft = offsetParent;
}
/*
Initializing menu
*/
function initDhtmlGoodiesMenu()
{
dhtmlgoodies_menuObj = document.getElementById('dhtmlgoodies_menu');
var aTags = dhtmlgoodies_menuObj.getElementsByTagName('A');
for(var no=0;no<aTags.length;no++){
var subUl = aTags[no].parentNode.getElementsByTagName('UL');
if(subUl.length>0 && aTags[no].parentNode.parentNode.parentNode.id != 'dhtmlgoodies_menu'){
var img = document.createElement('IMG');
img.src = dhtmlgoodies_menu_arrow;
aTags[no].appendChild(img);
}
}
var mainMenu = dhtmlgoodies_menuObj.getElementsByTagName('UL')[0];
mainMenu.className='menuBlock1';
mainMenu.style.zIndex = currentZIndex;
mainMenu.setAttribute('currentDepth' ,1);
mainMenu.currentDepth = '1';
mainMenu.onmouseover = mouseOverMenu;
mainMenu.onmouseout = mouseOutMenu;
var mainMenuItemsArray = new Array();
var mainMenuItem = mainMenu.getElementsByTagName('LI')[0];
mainMenu.style.height = mainMenuItem.offsetHeight + 2 + 'px';
while(mainMenuItem){
mainMenuItem.className='currentDepth1';
mainMenuItem.id = 'dhtmlgoodies_listItem' + liIndex;
mainMenuItem.onmouseover = showHideSub;
liIndex++;
if(mainMenuItem.tagName=='LI'){
mainMenuItem.style.cssText = 'float:left;';
mainMenuItem.style.styleFloat = 'left';
mainMenuItemsArray[mainMenuItemsArray.length] = mainMenuItem;
initSubMenus(mainMenuItem,0,2);
}
mainMenuItem = mainMenuItem.nextSibling;
}
for(var no=0;no<mainMenuItemsArray.length;no++){
initSubMenus(mainMenuItemsArray[no],0,2);
}
menuParentOffsetLeft = getLeftPos(dhtmlgoodies_menuObj);
window.onresize = resizeMenu;
dhtmlgoodies_menuObj.style.visibility = 'visible';
}
window.onload = initDhtmlGoodiesMenu;
</SCRIPT>
<div class="noPrint">
<div id="mainContainer">
<div id="dhtmlgoodies_menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="functions.php">Functions</a>
<ul>
<li><a href="#">Repair Parts</a>
<ul>
<li><a href="#">Create Ticket</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
</ul>
</li>
<li><a href="#">Cars</a>
<ul>
<li><a href="#">Check In</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
</ul>
</li>
<li><a href="#">Sub Function</a>
<ul>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
</ul>
</li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
</ul>
</li>
<li><a href="#">Reports</a>
<ul> <li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Trucks</a>
<ul>
<li><a href="#">Year 2007</a>
<ul>
<li><a href="#">Approved</a></li>
<li><a href="#">Pending</a></li>
<li><a href="#">Declined</a></li>
</ul>
</li>
<li><a href="#">Year 2008</a>
<ul>
<li><a href="#">Approved</a></li>
<li><a href="#">Pending</a></li>
<li><a href="#">Declined</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Administration</a>
<ul>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
</ul>
</li>
<li><a href="#" onclick="allPrint()";>Print</a></li>
<li><a href="/logout.php">Exit</a></li>
</ul>
</div>
</div>
</div>
<form method="POST" action="--WEBBOT-SELF--">
<input type="text" name="T1" size="20" value="THIS IS A TEST"><select size="1" name="D2">
<option>this is a test</option>
</select><select size="1" name="D3">
<option>THIS IS A TEST</option>
</select></p>
<p> </p>
<p><input type="reset" value="Reset" name="B2"><input type="submit" value="Submit" name="B1"></p>
</form>
I'm aware of what z-index does and that it can only work on positioned elements. My question is this: for z-index to work properly does a position also need to be set for the element that will be below the element with a higher z-index? http://turkeybot.info/flash/play.php?id=121 When you go below the game eand hover where it says to, the instructions for the game come up. Problem is, the z-index I set for it isn't working, and it's letting the form below it override it. What's the problem? |
|||||||