|
CSS - Z-index Issue
I know there's a thread just before me on the same topic - but I've already tried the suggested solution there and still can't get this one to work.
The problem is I have is at: www dot whitespire dot net/index2 dot php When you re-size the page the ripple (called drop in css) should appear UNDER the main content/text box. Any suggestions would make my evening MUCH easier! Mercy buckets. G Similar TutorialsHi I've got a popout menu that I've gotten quite close to where I want it. http://www.gamengai.com/main_beta_inv.php The main problem is that if I offset it too much, the navigation gets tricky. I can set it to where the popup looks like an extention of the original menu, but often the hover is deactivated -- a real pain. If I move it up a bit by fidgeting w/ the "top" element, it works, although there's some overlapping. My idea was to put the popout under the main menu to allevaite this a bit, but for the love of me cannot do it. This is the css sheet: http://www.gamengai.com/inv.css I've set top-level menu definitions w/ a z-index of 10, and the 2nd level w/ 1. But, the popout is still on top. Hi folks I'm having a problem displaying a CSS navigation menu within a website in IE8. It displays OK in Firefox and Chrome, but as I say, not in IE8. I haven't tried any other versions of IE. The story is that I got the code from mycssmenu.com, and have tweaked it here and there to make it appear as desired. I can't remember if I touched the z-index values or not at that time. I understand that the problem lies with IE's interpretation of z-index and I have tried to fix this problem by randomly changing the z-index values, but that didn't get me anywhere. I accept that my ignorance CSS code is ultimately to blame. The code in question is as follows: Code: <style type="text/css">
.qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:
solid;position:relative;z-index:1;}.qmmc .qmdividery{float:left;width:0px;}
.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:
relative;z-index:1;}.qmclear {font-size:1px;height
:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}
.qmmc {position:relative;right:-473px;zoom:1;z-index:10;}.qmmc a, .qmmc li {float:left;display:
block;white-space:nowrap;position:relative;z-index:
1;}.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}
.qmsh div a {float:left;}.qmmc div{visibility:hidden;position:absolute;}
.qmmc li {z-index:auto;}.qmmc ul {left:-10000px;position:absolute;z-index:10;}
.qmmc, .qmmc ul {list-style:none;padding:0px;margin:
0px;}.qmmc li a {float:none}.qmmc li:hover>ul{left:auto
;}#qm0 ul {top:100%;}#qm0 ul li:hover>
ul{top:0px;left:100%;}
#qm0
{
margin:0px;
background-color:#FFFFFF;
border-width:1px 0px;
border-style:solid;
border-color:#FFFFFF;
}
#qm0 a
{
padding:3px 10px 3px 8px;
background-color:transparent;
color:#444444;
font-family:Arial;
font-size:11px;
text-decoration:none;
border-width:0px 0px 0px 1px;
border-style:solid;
border-color:#BABABA;
}
#qm0 a:hover
{
background-color:#EFF4FA;
color:#000000;
text-decoration:underline;
}
#qm0 .qmparent
{
background-repeat:no-repeat;
background-position:92% 50%;
}
body #qm0 .qmactive, body #qm0 .qmactive:hover
{
background-color:#EFF4FA;
background-image:url("images/item_bg.gif");
color:#000000;
text-decoration:underline;
}
#qm0 div, #qm0 ul
{
padding:5px;
background-color:#FFFFFF;
border-width:1px;
border-style:solid;
border-color:#333333;
}
#qm0 div a, #qm0 ul a
{
padding:3px 20px 3px 5px;
color:#333333;
font-size:11px;
border-width:0px 0px 0px 4px;
border-style:solid;
border-color:#FFFFFF;
}
#qm0 div a:hover, #qm0 ul a:hover
{
text-decoration:none;
border-color:#75B1C2;
}
body #qm0 div .qmactive, body #qm0 div .qmactive:hover
{
text-decoration:underline;
border-color:#75B1C2;
}
</style>
Can anyone see where the issue lies? Thanks very much. hi, Ive got a mixture of CSS and tables (not ideal i know) the problem is the image to the top right. ive added the image within the container and then the rest of the site content is within a table just below the container line within the index page. How do i get the image over the tabled data? URL: http://www.primaryictsupport.co.uk/clients/swinnow/ Thanks for any help... Mike Hi everyone, I'm a noob to most of this so take it easy on me. I'm developing a page with a vertically aligned tabber (eventually) full of info. The code I've used was for a horizontally aligned tabber so I read up and changed the CSS to make the thing vertical. I've managed to get it in FF (and chrome and safari) so that the tabbed info div is appearing behind the navigation (which I like and want to keep) but in IE it doesn't stack at all. It re-aligns below the navigation if it's set to any more than pixel wider than the space it's got. If you look at my page in FF and IE http://king-asia.co.uk/test/about.html you'll see what I mean. I figured it should be a z-index trick but nothing I've tried seems to layer the content div and the nav div in IE. I've pasted in my code below. Can anyone spot the error(s)? CSS: Code: .tabberlive .tabbertabhide {
display:none;
border:1px solid #aaa;
width:538px;
height:400px;
position:relative;
float:right;
}
.tabber {
position:relative;
}
.tabberlive {
}
ul.tabbernav
{
margin:0;
padding: 0em;
font: bold 12px Verdana, sans-serif;
position:fixed;
float:left;
z-index:1;
}
ul.tabbernav li
{
list-style: none;
margin-left: 0;
display: block;
position:relative;
text-align:left;
}
ul.tabbernav li a
{
padding: 0.25em;
margin-top: 15px;
text-decoration: none;
display:block;
background: #DDE;
border: 1px solid #778;
}
ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }
ul.tabbernav li a:hover
{
color: #448;
background: #AAE;
text-decoration:none;
}
ul.tabbernav li.tabberactive a
{
text-decoration:none;
background-color: #fff;
border-right: 1px solid white;
margin-top:15px;
}
ul.tabbernav li.tabberactive a:hover
{
color: #448;
text-decoration:none;
}
.tabberlive .tabbertab {
border:1px solid #aaa;
width:540px;
height:400px;
position:relative;
float:right;
z-index:0;
}
.tabberlive .tabbertab h1 {
display:none;
}
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}
Tabber: Code:
<div class="style18" style="background-color:#FFF;">
<div class="tabber" style="background-color:#FFF;">
<!-- History -->
<div class="tabbertab" title="History">
<div class="style18" style="padding:1em; text-align:left;"><h3>History</h3>This is the bit about our company's history. This is the bit about our company's history. This is the bit about our company's history. This is the bit about our company's history.
</div>
</div>
<!-- What We Do -->
<div class="tabbertab" title="What We Do">
<div class="style18" style="padding:1em; text-align:left;"><h3>What We Do</h3><table class="style18" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>passion for good food. This is the bit more about ourrrent projects. This is the bit more about our current projects. passion for good food. This is the bit more about ourrrent projects. This is the bit more about our current projects. passion for good food. This is the bit more about ourrrent projects. This is the bit more about our current projects. </td>
</tr>
</table>
</div>
</div>
<!-- Business Philosophy -->
<div class="tabbertab" title="Business Philosophy">
<div class="style18" style="padding:1em; text-align:left;"><h3>Business Philosophy</h3>This is the bit more about our passion for good food. This is the bit more about our passion for good food. This is the bit more about our passion for good food. This is the bit more about our passion for good food.
</div>
</div>
<!-- Quality Driven -->
<div class="tabbertab" title="Quality Assurance">
<div class="style18" style="padding:1em; text-align:left;"><h3>Quality Assurance</h3>This is the bit more about what we do. This is the bit more about what we do. This is the bit more about what we do. This is the bit more about what we do.
</div>
</div>
</div>
</div>
This is really starting to frustrate after I've spent 2 days solid on it and but cannot get round the problem. Help wold be greatly appreciated. Please look at this page - http://casadelsol.tmhdesign.com/about.asp I have a div with an id of "header". In that div I placed this code Code: <div style="width:200px;height:200px;background-color:yellow;margin:0 0 -50px 400px;z-index:10000"> </div> As you can see it goes under the absolutely positioned div element with an id of top_header. I want to put a drop-down menu in the top header area but it slides under the top_header element. Can you help? Thanks Hello all, I am having a problem I can't seem to figure out. The site is: http://www.ciccotticenter.org/test_site/ When you view the site in IE6, the logo in the top left corner disappears. I have tried everything I can think of. Interestingly when I add * { border: 1px solid red; } it works. But I can't figure out what thats doing to make it work. Any ideas? Thanks, Ryan WHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE? w w w. jaywayproductions . c o m/portfolio/work_history.html It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated! Hello I am having difficulties with a site I am working on. First, if you look at it in IE and roll your mouse to the right of the site the whole thing shifts to the left. No idea why it does this. Second: In Firefox it looks like a disaster! Help! http://www.tombraiders.net/katie/shelly/index.html User: letme Pass: in Thank you! Hi everyone, For years I've been using tables solely to position elements on web pages but it's come to my attention that this is now "frowned" upon in the web community so I figured if I'm going to start doing things the more common way (with DIVs) I might as well start now. I'm not a professional website developer (C programmer here...eek! haha), but I do part time web work for some important clients of mine. So I have a very simple layout done with DIVs/CSS to start (code at the bottom). The problem is when you render it you'll see a large gap between the bottom of the layout and bottom of the page. My hypothesis is that this is due to where the "DIVs" would normally have been, except I moved them around. It sounds very similar to the problem encountered he http://forums.devshed.com/css-help-116/how-to-remove-blank-space-at-bottom-554773.html but I don't see what he did to solve it. Note that ultimately what I want is only the "header" and "footer" to have a fixed width/height. The leftcol and content should have fixed widths, but height grow with what ever is in them. And it should be centered in the page the way it is now. I tried various "text-wrap" and "height: 100%" and a few different codes but no luck. I really don't want to have to give up on DIV's but I am finding them a tad frustrating . I've altered the code from here (http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/3/). I tried "floating" them but that didn't seem to help either or is messes up my centering, plus I don't want it expanding to different resolutions. Thanks in advance if you can give a DIV newbie a heads up. Code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>TWO-COLUM FIXED LAYOUT
WITH FIXED BOXES</title>
<style type="text/css">
<!--
#header {
background: #0f0;
position: relative;
z-index: 1;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: relative;
z-index: 2;
top: 0px;
left: -325px;
width: 150px;
height: 600px;
}
#content {
background: #ff0;
position: relative;
z-index: 3;
top: -600px;
left: 75px;
width: 650px;
height: 600px;
}
#footer {
background: #0f0;
position: relative;
z-index: 4;
top: -600px;
left: 0px;
width: 800px;
height: 100px;
}
-->
</style>
</head>
<body style="margin: 0pt;">
<div align="center">
<div id="header">Header
Section</div>
<div id="leftcol">Left
Section
<p align="left">
Test
</p>
</div>
<div id="content">Content
Section</div>
<div id="footer">Footer
Section</div>
</div>
</body>
</html>
Hello Guys, I am trying to get the the css to work but having a hard time with it and need some help.. Here is the content lined up in fire fox. http://content.screencast.com/users/dank2009/folders/Jing/media/4198ca5c-6c75-4196-a2e7-ba1c423caca7/2011-08-22_1550.png Ad this is what it looks like in IE (See my issue) http://content.screencast.com/users/dank2009/folders/Jing/media/c9f0dcd6-19c9-48f6-83f8-9c55d7417fcc/2011-08-22_1551.png Here is the code Code: echo '<div class="listing"><img src="'.$listing_photo.'"><span class="listlink"><a href="index.php?content=subcats&id='. $listing_id.'">'.$listing_title2.'</a></span><br><span class="listbody">'.$listing_body2.'<span class="readmore"><a href="index.php?content=subcats&id='. $listing_id.'"> Read more</a></span>>>></div>'; Here is the CSS Code: .listing {
width:560px;
height:auto !important;
margin: 0 auto;
text-align: left
}
.listlink {
float:left;
margin-left: 10px;
margin-top: 20px;
position: absolute;
text-decoration:underline;
}
.listbody {
float: left;
margin-left: 110px;
margin-top: -30px;
width:440px
}
.listingdiv{
border-bottom: 2px dotted #9EABB5;
color:#FFF;
}
Please advise how to fix this.. Thanks for your help in advance.. Dan 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. 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 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? 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. 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 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 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? 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. 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. |
|||||||