|
CSS - Z-index Half Way Working In Ff
I have 3 div's in a container, all with the same top and left coordinates width and hieght vary according to content,
z-index's 1 & 2 show and hide as designed at the proper coordinates, z-index 3 shows below and out side of the container? I have attached a doc with screen shots layer definitions: Code:
#projects{
position:absolute;
top: 400;
left: 600;
margin-left:400px;
margin-top:30px;
padding-top:30px;
padding: 10px;
height: auto;
width: 300px;
z-index: 1;
visibility: visible;
}
#DBApps{
position:absoute;
top: 400;
left: 300;
margin-left:400px;
margin-top:30px;
padding-top:30px;
padding: 10px;
height: auto;
width: 400px;
z-index: 2;
visibility: hidden;
}
#resources{
position: absolute;
top: -200;
left: 300;
margin-left:400px;
margin-top:30px;
padding-top:30px;
padding: 10px;
height: auto;
width: 300px;
z-index:3;
visibility: hidden;
}
Any and all suggestions would be greatly appreciated. Similar Tutorialshttp://www.concrete-creative.com/test/recipe.html When you hover over PRINT RECIPE, the text of the link below shows through the popup menu... I have tried everything I can think of in terms of adding z-index to different elements and I just can't get it working on IE6 (works fine elsewhere) What am I missing? The HTML is he Code:
<div id="navig2"><table width="150" border="0" cellspacing="0">
<tr>
<td>
<ul id="pop-out-nav2">
<li><a href="#">PRINT RECIPE</a>
<ul>
<li><a href="javascript:openAWindowRecipe3x5('print_recipe3x5.html','newWin1',420,700,1)"><img src="images/spacer.gif" alt="" width="40" height="1" border="0">print 3x5</a></li>
<li><a href="javascript:openAWindowRecipe4x6('print_recipe4x6.html','newWin1',493,700,1)"><img src="images/spacer.gif" alt="" width="40" height="1" border="0">print 4x6</a></li>
<li class="last"><a href="javascript:openAWindowRecipeFull('print_recipefull.html','newWin1',650,700,1)"><img src="images/spacer.gif" alt="" width="30" height="1" border="0">print full page</a></li>
</ul>
</li>
<li><a href="recipecomments.html">VIEW COMMENTS (0)</a></li>
<li><a href="javascript:openAWindowEmails('add_comment.html','newWin1',420,220,1)">ADD A COMMENT</a></li>
<li><a href="javascript:openAWindowEmails('add_personalnote.html','newWin1',420,220,1)">ADD A PERSONAL NOTE</a></li><!-- would say EDIT PERSONAL NOTE if you already have one there -->
<li><a href="#">FLAG RECIPE</a>
<ul>
<li><a href="#" class="radio"><input type="radio" name="flag" value="red" selected><img src="images/icon_flag-red_sm.jpg" alt="" width="13" height="13" border="0"><input type="radio" name="flag" value="green"><img src="images/icon_flag-green_sm.jpg" alt="" width="13" height="13" border="0"><input type="radio" name="flag" value="yellow"><img src="images/icon_flag-yellow_sm.jpg" alt="" width="13" height="13" border="0"><br><input type="radio" name="flag" value="none"><img src="images/no-flag.gif" alt="" width="30" height="13" border="0"></a></li>
<li class="last"><a href="javascript:openAWindowHelp('help_flag.html','newWin1',430,380,1)"><img src="images/spacer.gif" alt="" width="45" height="1" border="0">help?</a></li>
</ul>
</li>
</li>
</ul>
</td>
</tr>
</table>
</div>
And the CSS code: Code:
/* RIGHT HAND NAV BOX */
#navig2 {
float: right;
display: block;
width: 150px;
/* height: 32px; */
border : 2px dashed #b0b080;
background-color : #d1d9d1;
z-index : 0;
}
#pop-out-nav2 {
z-index : 3;
}
#navig2 ul {
float: left;
margin: 0 0 0 0;
padding: 0;
list-style: none;
font: 9px verdana, arial, sans-serif;
font-weight: bold;
}
#navig2 ul li {
float: left;
position: relative;
text-decoration: none;
margin: 0;
padding: 0;
border-bottom: 0;
}
#navig2 ul li a {
display: block;
text-decoration: none;
font-weight: bold;
padding: 8px;
color: #666633;
}
#navig2 ul li a:hover {
text-decoration: underline;
font-weight: bold;
padding: 8px;
color: #666633;
}
#navig2 ul li.active {
padding: 8px;
background-color : #d1d9d1;
font-weight: bold;
color: #666633;
}
#navig2 li ul {
position: absolute;
float: right;
left: 0;
display: none;
width: 110px;
z-index:100;
}
/* subnav padding & size */
#navig2 li ul li a {
position: relative;
width: 120px;
padding: 3px;
}
#navig2 li:hover ul, #navig2 li.over ul {
display: block;
left: 50;
top : 20;
}
/* topnav color when dropdown is showing */
#navig2 li:hover a, #navig2 li.over a, #navig2 li ul li:hover a, #navig2 li ul li.over a {
background-color : #d1d9d1;
color: #666633;
}
/* subnav default link */
#navig2 li:hover ul a, #navig2 li.over ul a {
font-family: verdana, arial, sans-serif;
font-size: 9px;
padding: 3px;
font-weight: normal;
background-color: #FFFFFF;
color: #666633;
border-top : 1px solid #b0b080;
border-left : 1px solid #b0b080;
border-right : 1px solid #b0b080;
text-align : left;
}
#navig2 ul li ul li.last a {
border-bottom : 1px solid #b0b080;
}
/* subnav default link under active */
#navig2 li.active:hover ul a, #navig2 li.active ul a {
background-color: #FFFFFF;
color: #666633;
padding: 3px;
font-weight: normal;
text-decoration: none;
}
/* subnav hover link */
#navig2 li:hover ul li:hover a, #navig2 li ul li a:hover {
/* background-image: url(images/nav_bg_transp.png); */
padding: 3px;
background-color: #FFFFFF;
color: #666633;
font-weight: normal;
text-decoration: underline;
}
/* subnav hover link under active */
#navig2 li.active:hover ul li:hover a, #navig2 li.active ul li a:hover {
/* background-image: url(images/nav_bg_transp.png); */
padding: 3px;
background-color: #FFFFFF;
color: #666633;
font-weight: normal;
text-decoration: underline;
}
In safari and IE it works perfect. You can see the two gifs behind the quote text, but in netscape and firefox you cannot. I tried many things and still cannot get this to work. Can anyone help? edit: i guess i'm not allowed to post urls but the site is at nscadesign . ca / iidf2007 / buckley Hi, I have a site where the main navigation is supposed to stay above the body in a static position. The body should scroll beneath the navigation, when the page is scrolled. In the body, I have a flash video that is embedded with swf object code. The video unfortunately appears above the main navigation when the page is scrolled. You can see an examplehere My code looks like this for the <div> that holds the video: Code: <div id="header_w_flash" style="margin-top:132px; z-index:2;">
<div>
<object id="header_w_flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="970" height="160">
<param name="movie" value="flash/UC_header1.swf" />
<!--#include file = "includes/uc.inc"-->
</object>
</div>
<!-- end #header_w_flash --></div>
And my CSS for the static header, which holds the navigation, looks like this: Code: #header_static{
z-index:999;
position:fixed;
top:0;
height:121px;
width:980px;
background:#ffffff;
}
How can I get the embedded flash video to appear below the header? I'm a bit puzzled as to how to resolve this. thanks Ok i have a header and it has a SWF file on it. WHat i want to do is put the links on the same SWF file to the side but to the top of it i.e. using Z-index? but i cant get it to work? CSS Code:
#header {
position:relative;
z-index:-1;
float:left;
width:100%;
clear:both;
}
#links {
border:1px solid black;
position:absolute;
z-index:100;
top:10px;
right:20px;
}
HTML Code:
<div id="header">
<object width="550" height="400">
<param name="movie" value="/resourcebank/images/Final_banner.swf">
<embed src="/resourcebank/images/Final_banner.swf" width="100% height="20%">
</embed>
</object>
<span id="links">
random links
</span>
</div>
So I came up with this lovely design for the company I'm working for, because they're website now is just utter crap. I figured instead of coding my usual way (a mess and unvalidated) I'd start off making it as clean and css-friendly as possible. I've run into some major issues, some common and some not. If any of you could help me, I would be extremely grateful. My main problem is my issue with internet explorer. I've positioned everything to match up perfectly in Firefox, the site looks great and is aligned fairly well. However, when the site hits IE, everything shifts a couple pixels and throws everything off. Anyone know why this is happening? There is also a gap at the top of the page in IE, which isn't present in firefox. I also can't figure out how to pus the footer to the bottom. I wanted another footer that stretched the whole page at the bottom (similar to the top), with a sort of 'prefooter' on top of it. I can't figure out how to just push a regular footer to the bottom, and I've tried all the fixes I can find online. Any idea why? Here is the site: Code: http://www.chromaticstudios.net/AVT/ I'm trying to achieve the effect of flipping an element down. I can get it to flip down but I want to add perspective in order to have a 3D effect. I can get perspective to work but the second half of the transformation is what I want to happen from the start, not just half way through. A lot of things I'm trying makes it go up and then down and that's not what I'm after. Code:
.flip {
-webkit-animation: flipDown 5000ms 1 linear;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: bottom center;
}
@-webkit-keyframes flipDown {
0% {
-webkit-transform: rotateX(0deg);
}
50% {
-webkit-transform: rotateX(45deg);
}
100% {
-webkit-transform: rotateX(90deg) perspective(900);
}
}
So I know that the perspective is only being transformed in the frames between the 50% and 100% marks but if I add an initial or perspective the the other keyframes it'll either jump up and then go down or just go straight down as if I didn't have perspective in there. Any help? Hi. Ive been working on a theme I have a navbar with links on it and a background image. When you hover, you get a different background image on that section of the navbar. Im trying to style it like this: This is what it is currently like: This is my current css: Code: #nav li {
float: left;
border-right: 0px solid #d5d5d5;
text-align: center;
}
#nav li.over a, #nav a:hover, #nav a:active, #nav a:focus, #nav a.over {
color: #FFFFFF;
border-color: #2F2F2F;
background: url(../images/grad_d1.gif) repeat-x top #0088CC;
text-align: center;
}
#nav li.active a {
color: #FFFFFF;
font-style:bold;
background: url(../images/grad_d1.gif) repeat-x top #0088CC;
text-align: center;
align: center;
}
This is a link: http://toyota.identityprojects.co.uk Everything Ive tried seems to give bad results. Initally I tried putting width 75% and height 30px, centrally and vertically aligning the red gradient, but this seemed to break the whole menu and im sure its a bad way of doing it. Can anyone help me out with this, ive wasted ages on this! I'm having some trouble with a CSS page that works perfectly fine in IE Mac/PC, Safari, and Netscape on Mac, but goes wonky on Netscape 6 and 7.1 for PC. Basically the top navigation, consisting of three images, gets chopped in half - only the bottom half of the images is displayed. The top half is simply blank. There's enough space for the rest of the image in the navbar. If I put a background-color: definition on the DIV that handles the tab, it stops where the image stops, cut off halfway up. If I RESIZE the image, using either CSS or HTML, it displays fine (but, of course, at the wrong size!) This leads me to suspect that it's some kind of refresh bug in Netscape... but I haven't found anyone else with the same problem, so maybe it's just somethin' I did. Here's the HTML that handles this part of the page: Code:
<div id="nav2">
<div id="nav-secondary-title"><img src="images/title-subpage.gif" width="127" height="20" /></div>
<div id="nav-secondary">
<div class="tab"><a href="#"><img src="images/studentstab.gif" width="77" height="27" class="navimage" /></a></div>
<div class="tab"><a href="#"><img src="images/fullartstab.gif" width="100" height="27" class="navimage" /></a></div>
<div class="tab"><a href="#"><img src="images/studentstab.gif" class="navimage" /></a></div>
</div>
</div>
And here's the relevant CSS: Code:
#nav2 { /* nav bar for secondary pages */
border-top: 1px solid #BD7445;
border-left: 1px solid #BD7445;
border-bottom: 1px solid #2D2A28;
border-right: 1px solid #2D2A28;
height: 27px;
margin:0px; padding:0px;
z-index: 0;
background: #A73600;
}
#nav-secondary-title { /*placement of title on secondary pages */
display: inline;
float: left;
height: 20px;
margin: 0px;
z-index: 1;
padding:2px 10px 0px 10px;
}
#nav-secondary { /* placement of main nav on secondary pages */
float: right;
margin: 0px 10px 0px 10px;
height: 27px;
padding: 0px;
z-index: 1;
}
.tab {
position: relative;
top: 2px;
display: inline;
padding: 0px;
margin: 0px;
}
img.navimage {
border: 0px; margin: 0px; padding:0px 6px 0px 6px;
}
Thanks - any help would be much appreciated! Hi All I used Joomla to design a really simple website for someone. I currently have the problem where my text, with <h2> tag, in IE, the bottom bit of the text is cut off. For instance, a 'g' will not have its bottom 'loop'. So the text is cut off horizontally, not vertically. Works fine in Firefox. Using IE 's web development toolbar, I narrowed it down to the H2 tag, which is on a CSS file in Joomla, there are more tags nested within the <h2> tag, but they seem ok, as they are only font tags. Here is the css code of the Joomla template. Code: h2, .contentheading {
padding: 0;
font-family: Verdana, Geneva;
font-size: 1.3em;
font-weight: bold;
vertical-align: text-top;
color: #333;
text-align: left;
width: 100%; }
Any idea how to fix such a problem? Looks fine in all other browsers (of course). http://sports.theedgenews.com For some strange reason the last half of the blog blows up in IE6 and IE7. It simply does not show up. Why we don't know. When looking at the source code, it "gets" the whole page, it's just the last half is not rendered. A copy of the css is here. http://sports.theedgenews.com/css.css If anyone has any ideas at all on what to do, it would be greatly appreciated. Btw this is a design not made by me. I have become pretty familar w/ it for the blog but I have not written it. Thanks for any help. Hey everyone, I'm having troubles with some DIVs. I'm trying to divide a page into 4 equal sections. If I remove the doctype declaration, it looks right in Firefox 3.5.2 In ie it is all sorts of crazy. 100% height of the inner objects seems to be referencing the window height and not the parent elements height. I'm more concerned about Firefox anyway. I expect IE to require some hacks. If I set an absolute size to the body, in px, everything works fine. But if I have the body set to %, things shrink. I tried creating a wrapper div and setting it's height/width to 50% but that didn't work either. I tried to find a solution on kravvitz and bon rouge's sites but I didn't find anything that was 100% fluid. Any ideas? HTML4Strict Code: Original - HTML4Strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style> body{ width:100%; height:100%; padding:0; margin:0; color:#ffffff; background-color:#000000; } object{ float:left; clear:both; width:80%; height:100%; background-color:#cccccc; } .section{ float:left; clear:none; width:48%; height:48%; margin:1%; background-color:#333333; display:block; position:relative; } .panel{ float:left; clear:none; width: 16%; height:96%; margin:2% 2%; background-color:#cccccc; } #container{ float:left; clear:both; width:100%; height:100%; min-height:100%; background } </style> </head> <body> <div id="container"> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> </div> </body> </html>
I am not sure the best way to colour half a table cell? Basically we have a booking system with a table that shows booked days. On the date a booking starts I want to make the right half of the table cell (actually I would prefer to use a triangle on the top right - a diagonal half) the correct colour, and the same principle applies to a departure date. I was going to just use two 50% divs for the left/right split. But the diagonal split is a bit trickier. Should I just use 2 100% height/width divs and apply a different graphic to each? I had a problem earlier with my containing DIV pushing too wide which was resolved by adding "overflow:hidden" to my containing DIV. The problem is now that it's cutting off the sides of one of my graphics. At the bottom of my page, I have a link which you can click that will (through the magic of javascript) reveal divs on either side of my main content (the link at the bottom of the page says "reveal sea creature") When overflow:hidden was NOT on my containing DIV, I had the problem with all the extra space, but these revealing divs worked fine. Now that I add overflow:hidden, the extra space is gone, but the divs are cut off. I've tried pushing everything to the left which seems to make the DIV on the right work fine, but the left is still a problem. I realize this doesn't make sense without code, so here's the site. www . deepwaterchurch . com Thanks so much. This is messed up....it's not the javascript cause i deleted it and it still continued...it's not the includes cause i put everything on one file....it's not the <link> cause i put it in <style> tags and it still continued http://66.195.240.220/~majdkgf/cip/ it works PERFECT in Firefox...not in Internet Explorer [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? 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 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? 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 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 |
|||||||