|
CSS - Z-index Image Issue...
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 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. 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 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 This is the look I am trying to achieve, the cocktail glass and green need a drop shadow. This is my html: <!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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="logo"></div> <div id="headerbar"></div> <div id="masthead"></div> <p>this is a test</p> </body> </html> This is my .css: /* CSS Document */ body { background-image:url(../images/background.jpg); font-family: Arial, Helvetica, sans-serif; font-size: 76%; } p { font-size: 1.0em;line-height: 120%;color:#333333; margin-right:1em; } div#wrapper { width: 682px; margin: auto; background:#fff; border-color:#333; border: solid; border-width:1px;} #headerbar { position:relative; top:15px; left:7px; width: 668px; height: 46px; background: url(../images/headerbar.jpg) no-repeat; z-index:1;} #masthead { position:relative; top:15px; width: 668px; height: 204px; margin:auto; margin-top:5px; background: url(../images/masthead.jpg) no-repeat ;z-index:1;} #logo { position:relative; top:0px; left:0px; background-image: url(../images/glassandgreen.jpg) no-repeat; z-index:2;} #contentwrapper{ width: 668px; margin: auto; padding:.7em 0 .7em 0; background:#fff; border-color:#333333; border: solid; border-width:1px; } I have multiple document icons (images) on my page placed using absolute positioning <div> over a large background image. On hover over those document images a text box pops up with more information and links. However, if my text box overlaps with other document icon on the page, the icon obscures the link or text in the pop up balloon. I tried to use z-index, but that didn't work.. I would be grateful if someone could suggest a fix and or web page with info that could help me. best, Mitchell A I am trying but failing to get this to work. I have used a slider (bxslider)and made some changes to it so that I have my other slides visible. Then I have added a background png so that the right and left images are covered with a transparent png with around 80% opacity. Now the problem I am having is that because I have applied this image to the div it is now stopping the links being active. Can anyone help me get this right, I need the transparent png to be over the main viewport so the right and left images are not fully shown. If you view this url you will see what i mean: http://www.barryzimmerman.co.uk/new/ When you see the text for each slide, it should be an active link to the website, but because of the png it is stopping this. I really want to achieve this, so any help much appreciated. The css files are he http://www.barryzimmerman.co.uk/new/css/design.css http://www.barryzimmerman.co.uk/new/css/content.css Please help Look at this page http://hometown.tmhdesign.com See the right hand column, top element labeled "Quick Connections"? The icons are a bg on the containing div element that is holding an ul. I have that bg exactly where I want it in FF, but in IE7 is higher than it should be by about 5-10 pixels. Nevermind, folks over at codingforums helped me. I need to have numerous images overlap exactly on top of one another at the upper left corner of a frame cell. When I use absolute positioning, the image is not where it is supposed to be in relation to the table cell. Relative works, but I cannot seem to overlay the images, as adding images via relative layers just acts as if the images are not in layers at all (i.e. they take up the same space that they would in a normal flowing page) Is there any way I can make the images be placed relative to the corner of the table cell? I'm somewhat new to layers, so any help would be greatly appreciated. Here is example code <TABLE WIDTH=500 HEIGHT=500 BORDER=0> <TR> <TD width=300 height=100> Need image1 to go in this cell, as well as image2, image3, and image4. All need to overlap perfectly in relation to the constraints of this table cell. Here is the code I use in the cell for the first 2 layers which just flow one under the other- yet I need them to overlap. <div id="Layer1" style="position:relative; width:518px; height:322px; z-index:1; visibility: visible;"><img src="images/Map2.gif" usemap="#Map" border=0></div> <div id="Layer2" style="position:relative; width:518px; height:322px; z-index:2; visibility: hidden;"><img src="images/iloverlay.gif" usemap="#Map" border=0></div> </TD> <TD></TD> </TR> <TR> <TD></TD> <TD></TD> </TR> <table> I am using eclipse ide to develop a html page. It has a preview function where I can see the background image correctly. However when I run this in a an external browser (IE/Firefox) the background image does not appear. I can go to the location of the image in the browser and see it, also I can view source in browser and it is as below. Also the image is in the same directory as the html page. Any help at all on this would be very much appreciated. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style>
body {margin-left: 0px;margin-right: 0px;background:url(bg-gray.gif) repeat center left;color: #000000;}
</style>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<title>Login</title>
</head>
<body >
</body>
</html>
for some reason i cant figure out, i cant get a background image to show up at all in my document. ive tryed validating both CSS and HTML, ive tryed different approaches to adding a background image in CSS and even removing individual styles to try to find the source of the issue. I am new to this forum and this is my first post. if anyone can tell me why this isnt working i would greatly appriciate it. here is the code: Code: <html>
<head>
<title>Home</title>
<style type="text/css">
body
{
background:#3D1400;
}
/******modual positioning******/
div#container
{
width:48em;
height:41em;
margin-right:auto;
margin-left:auto;
margin-top:auto;
margin-bottom:0em;
padding:1em;
padding-top:0em;
background:#00BFBF;
}
/******* this is where im trying to put a background image*/
div#headding
{
background:url("") purple repeat-x;
width:48em;
height:4em;
padding:1em;
margin-bottom:3.5em;
margin-left:-1em;
}
img.bd
{
position:relative;
width:50em;
height:0.5em;
left:-1em;
top:-0.5em;
}
nav
{
margin-top:-1em;
margin-left:0em;
margin-bottom:3em;
width:48em;
height:1.5em;
background:#ffffff;
padding-left:0em;
border-radius:0.2em;
}
/*side bar*/
div#side_left
{
width:10em;
height:29em;
float:left;
background:#4CD2D2;
}
#contests, #featured_blog, #featured_discussion, #featured_poll
{
width:10em;
margin:0.8em;
color:#0D1A8C;
font-weight:900;
font-size:0.8em;
background:#79DDDD;
padding:0.5em;
}
hr.side
{
border:0.1em solid #0D1A8C;
width:10em;
}
/*side bar end*/
div#featured_photo
{
float:left;
margin-left:1em;
width:20em;
height:20em;
background:#000000;
overflow:hidden;
border-radius:1em;
}
div#top_rated_photos
{
float:right;
width:16em;
height:20em;
background:#111111;
}
footer
{
position:relative;
height:4em;
width:58.6em;
margin-right:auto;
margin-left:auto;
background:#000000;
text-align:center;
padding:2em;
font-size:0.8em;
}
a.f
{
color:#ffffff;
text-decoration:none;
border-right:.1em solid #ffffff;
padding-right:1em;
margin-right:0.3em;
padding-left:0.3em;
margin-left:0.3em;
}
/**********Photo Gallery**********/
a.tr_img img.top_r
{
height:3.9em;
width:3.9em;
float:left;
border:0.1em solid #000000;
}
a.tr_img img.top_r:hover
{
margin:0em;
border:.1em solid #ff0000;
}
/******text styles******/
h1
{
font-size:2em;
text-transform:capitalize;
border-bottom:0.2em solid #8C8CE8;
color:#8C8CE8;
}
span#fp
{
color:#999999;
float:right;
margin-right:1em;
font-weight:bold;
display:block;
}
/***************************************NAVIGATION BAR***************************/
/*top level styles*/
ul.top_link li
{
float:left;
background:#ffffff;
position:relative;
display:inline;
border-right:0.1em solid #00BFBF;
border-left:0.1em solid #00BFBF;
}
ul.top_link a
{
display:block;
position:relative;
font-size:1.3em;
color:#000000;
text-decoration:none;
padding-left:1em;
padding-right:1em;
}
/* style the top level hover incase images fail *//* dropdown ul styles */
ul.top_link li.sub_link a
{
padding-right:0.5em;
padding-left:0.5em;
width:8em;
}
ul.top_link >li:hover
{
background:#000080;
}
ul.top_link >li>a:hover
{
color:#ffffff;
}
ul.top_link li:hover.sub_link, ul.top_link li.sub_link a:hover, ul.top_link li.sub_link a.mn_active
{
background:#000080;
color:#ffffff;
}
/********* dropdown sytles *********/
ul.top_link li ul
{
position:absolute;
top:2em;
left:0;
z-index:1;
visibility:hidden;
}
ul.top_link li > ul
{
top:auto;
left:auto;
}
ul.top_link li:hover ul, ul.top_link, ul.top_link a:hover ul
{
visibility:visible;
}
ul.top_link ul li
{
border:none;
height:auto;
float:left;
width:8em;
top:0.15em;
left:-2.6em;
padding:0em;
text-align:left;
background:#ffffff;
}
ul.top_link ul li a
{
float:left;
font-size:0.8em;
text-decoration:none;
display:block;
height:2em;
line-height:2em;
text-align:left;
}
/************************** ~DROPDOWN STYLES~ *************************/
.top_link li.sub_link ul
{
background:#ffffff;
padding-left:0em;
}
.top_link li.sub_link ul li a
{
width:8em;
}
.top_link li.sub_link ul li a:hover
{
background:#000080;
color:#6385A6;
} </style>
<base href="index.html" />
</head>
<body>
<div id="container">
<div id="headding">
<h1>Welcome to purple panda bear ♥</h1>
<img src="" class="bd" />
<img src="" class="bd" />
<img src="" class="bd" />
</div>
<nav>
<ul class="top_link">
<li class="top_link">
<a href="index">home</a>
<ul>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
</ul>
</li>
<li class="top_link">
<a href="index">blog</a>
<ul>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
</ul>
</li>
<li class="top_link">
<a href="index">forum</a>
<ul>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
</ul>
</li>
<li class="top_link">
<a href="">forum</a>
<ul>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
</ul>
</li>
<li class="top_link">
<a href="index">gallery</a>
<ul>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
</ul>
</li>
<li class="top_link">
<a href="index">anime</a>
<ul>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
</ul>
</li>
<li class="top_link">
<a href="index">login</a>
<ul>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
</ul>
</li>
</ul>
</nav>
<div id="side_left">
<div id="contests">
Featured Contests
<hr class="side" />
<a href="">Bunnys vs. Pandas</a>
<a href="">Dianoaurs vs. Elefants</a>
<a href="">Pickles vs. Ice Cream</a>
</div>
<div id="featured_blog">
Featured Blogs
<hr class="side" />
<a href="">blog 1</a> by,
user 1<br />
<a href="">blog 2</a> by,
user 2<br />
<a href="">blog 3</a> by,
user 3<br />
</div>
<div id="featured_discussion">
Featured Forums
<hr class="side" />
<a href="">Anime discussion</a>
<a href="">Panda discussion</a>
<a href="">Epicness </a>
</div>
<div id="featured_poll">
Featured Poll
<hr class="side" />
What is your favorate fuzy animal?<br />
<input type="radio" value="bunnys" />Bunnies<br />
<input type="radio" value="pandas" />Pandas<br />
<input type="radio" value="kittys" />Kittys
</div>
</div>
</div>
<footer>
<a href="" class="f">footer link</a>
<a href="" class="f">footer link</a>
<a href="" class="f">footer link</a>
<a href="" class="f">footer link</a>
<a href="" class="f">footer link</a>
<a href="" class="f">footer link</a>
</footer>
</body>
</html>
I'm having another link issue. I have images in a <ul> that are links. (It's a gallery using Slimbox + Mootools). Everything looks fine in FF. However, in IE, I get these little maybe 2 or 3 pixel (width) link lines that are blue and then purple when visited. They are not on every image. In fact, my <ul> has 4 lines of six images, and the little extra pixel lines fall in the margin after the first image of every line. Here's my CSS: Code: a img {
border: 0 none;
margin: 4px 4px 10px 4px;
text-decoration: none;
}
a:hover img {
border: 1px solid #e5cb43;
margin: 3px 3px 9px 3px;
}
ul.photog {
list-style-position: outside;
padding: 0px; margin: 0px;
border: none;
background-color: #979089;
width: 850px;
text-align: center;
margin-right: auto;
margin-left: auto;
}
li.photog {
margin: 0px;
padding: 0px;
list-style-type:none;
}
Strange thing is that I have another <ul> that uses identical code to that one and doesn't have the problem I am experiencing with this one. Any help would be greatly appreciated. Thanks in advance! Hi to all, I have a problem to show full image on background.The css which i am using is good if the screen size is 17 inches or less but above 17 inches background image does not expand to full width and height. One thing i want to clear that we can't repeat that image . any solution to this problem will be appreciated. thanks hey all, k, i'm using an image replacement method that I have successfully used before, but the image will not show up in IE. It seems to have something to do with the .replace class, but i can't figure it out. here's the css; Code:
.replace {
position:relative;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden; /*
*/
}
.replace span {
display:block;
position:absolute;
top:0;
left:0;
z-index:1; /*for Opera 5 and 6*/
}
#homeh1, #homeh1 span {
background:url(images/h1_home.gif) no-repeat left;
height:60px;
width:312px;
}
and the html; Code: <h1 id="homeh1" class="replace">home<span></span></h1> And here's the offending page. any help'd be greatly appreciated. thanks. Hi, I need to create a object like in the attached image (worldmap.gif). The image itself in not hot, just the text;s above it. When the user hovers over the text, two things should happen: 1- The corresponding image should swap with a darker version (Attached: img_continent_africa.gif etc) 2- and a dropdown menu should appear as shown in worldmap.gif. My question is: How should I approach this from a css layout perespective. How do I position the over-state images. thanks, Zain I have a page setup like this.... <table height="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr><td valign="top" class="lt_bar"><img src="template/blue_234/images/lt_shd.jpg" /></td> <td valign="top"></td> <td valign="top" class="rt_bar"><img src="template/blue_234/images/rt_shd.jpg" /></td> </tr> </table> and: .lt_bar { width: 27px; background-image: url("images/lt_shd.jpg"); background-repeat: repeat-y; float: left } .rt_bar { width: 27px; background-image: url("images/rt_shd.jpg"); background-repeat: repeat-y; float: right; } In IE all is fine, in FireFox the right side shows, the left side does not. any clues... |
|||||||