|
CSS - Z-index Problem In Ie7 On Multiple Absolute Divs
Similar TutorialsHi, I'm attempting to float a menu (in a table) just to the left of a table I'm centering on my page. The menu, idealy, will be sticking out the left side of the table. Below is the code, firstly, for the menu and secondly, the CSS for the menu. html Code: Original - html Code <!--FLOATING MENU--> <table id="menu" cellspacing="0"> <tr> <td class="mbutton" onmouseover="this.className='obutton';" onmouseout="this.className='mbutton';"> Button </td> </tr> <tr> <td class="mbutton" onmouseover="this.className='obutton';" onmouseout="this.className='mbutton';"> Button </td> </tr> <tr> <td class="mbutton" onmouseover="this.className='obutton';" onmouseout="this.className='mbutton';"> Button </td> </tr> </table> <!--FLOATING MENU--> <table id="menu" cellspacing="0"> <tr> <td class="mbutton" onmouseover="this.className='obutton';" onmouseout="this.className='mbutton';"> Button </td> </tr> <tr> <td class="mbutton" onmouseover="this.className='obutton';" onmouseout="this.className='mbutton';"> Button </td> </tr> <tr> <td class="mbutton" onmouseover="this.className='obutton';" onmouseout="this.className='mbutton';"> Button </td> </tr> </table> css Code: Original - css Code #menu { position: absolute; top: 100px; left: 28%; z-index:0; width:70px; border-left: 2px solid #000; border-right: 0px; border-bottom: 2px solid #000; border-top: 2px solid #000; padding:0px; }
#menu {
Now here's what's going on. As you can see, I'm trying to use a percentage from the left to align the menu - but as the resolution/window size changes, so does the menu's position in relation to the table. I need a stable way to make sure the menu is always in line with the table. Firefox and Mozilla also seem to be rendering the positioning a lot differently. I've thought about relative positioning, but I can't figure out exactly how it works or find a good tutorial on it. If anybody has a link to a tutorial on specifically this area, that would be great - or if you know the answer, I'd very much appreciate it if you could help me out. Thanks in advance - feel free to say so if you'd like more information. 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 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 Hi, Basically I have two divs, and I want to position another div within each div using the absolute property of css. However for some reason, rather then having to absolute divs within my other divs I finish having the two abolute divs one on top of each other. Here is an example I did: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <body> <!-- first box --> <div style="border:1px solid black;"> Hello <br><br><br><br><br><br><br><br> <div style="position:absolute; top:50px; left:50px; border:1px solid red">Helloooo</div> </div> <!-- second box --> <div style="border:1px solid black;"> Hello <br><br><br><br><br><br><br><br> <div style="position:absolute; top:50px; left:50px; border:1px solid red">Helloooo</div> </div> </body> </html> I have done some research and found that this is happening because when I set a div as absolute, this does not remain part of the parent div, and thus the absolute div is not positioned according to the parent div, but according to the whole website. What I want to achieve is to position my absolute divs taking in consideration the parent div, and this in the example above I would have the label 'helloooo' with red border in both parent divs and not one of top of each other!! Is this possible? Regards, Sim085 I have a menu system that I'm triyng to nest in my navbar div. The problem is that the absolute postioning of the nested divs are causing them to bust out of the navbar div. What can I do to remedy the problem. Here is my CSS Code:
#header {
width: 100%;
height:145px;
background-image: url(images/topbackground2.jpg);
background-repeat: repeat;
}
#navbar {
width: 122px;
background-color:#3f79a1;
position: relative;
float: left;
border;
}
#content {
height:100%;
background-color:#3f79a1;
position: relative;
float: right;
}
#footer {
background-image: url(images/gradientsmaller2.gif);
font: 10pt;
background-color: #ccffcc;
width: 100%;
text-align: center;
padding: 0 15%;
clear:both;
}
Here is the html for the navbar div Code:
<div id="navbar">
<div id="p7menu1" style="position:absolute; left:0px; top:15px; width:122px; z-index:106"><a href="javascript:;" onClick="P7_trigMenuMagic1('p7menu1',1);return false" onMouseOver="P7_rollCMenu1(event,'p7menu1',0)" onMouseOut="P7_rollCMenu1(event,'p7menu1',0)" onFocus="if(this.blur)this.blur()"><img src="images/Login.gif" width="122" height="20" name="p7mbut1" border="0" alt="menu 1"></a></div>
<div id="p7menu2" style="position:absolute; left:0px; top:35px; width:122px; z-index:107"><a href="javascript:;" onClick="P7_trigMenuMagic1('p7menu2',1);return false" onMouseOver="P7_rollCMenu1(event,'p7menu2',0)" onMouseOut="P7_rollCMenu1(event,'p7menu2',0)" onFocus="if(this.blur)this.blur()"><img src="images/EditProfile.gif" width="122" height="20" name="p7mbut2" border="0" alt="menu 2"></a></div>
<div id="p7menu3" style="position:absolute; left:0px; top:55px; width:122px; z-index:108"><a href="javascript:;" onClick="P7_trigMenuMagic1('p7menu3',1);return false" onMouseOver="P7_rollCMenu1(event,'p7menu3',0)" onMouseOut="P7_rollCMenu1(event,'p7menu3',0)" onFocus="if(this.blur)this.blur()"><img src="images/InstructorInfo.gif" width="122" height="20" name="p7mbut3" border="0" alt="menu 3"></a></div>
<div id="p7menu4" style="position:absolute; left:0px; top:75px; width:122px; z-index:109"><a href="javascript:;" onClick="P7_trigMenuMagic1('p7menu4',1);return false" onMouseOver="P7_rollCMenu1(event,'p7menu4',0)" onMouseOut="P7_rollCMenu1(event,'p7menu4',0)" onFocus="if(this.blur)this.blur()"><img src="images/MyCourses.gif" width="122" height="20" name="p7mbut4" border="0" alt="menu 4"></a></div>
<div id="p7menu5" style="position:absolute; left:0px; top:95px; width:122px; z-index:110"><a href="javascript:;" onClick="P7_trigMenuMagic1('p7menu5',1);return false" onMouseOver="P7_rollCMenu1(event,'p7menu5',0)" onMouseOut="P7_rollCMenu1(event,'p7menu5',0)" onFocus="if(this.blur)this.blur()"><img src="images/GradeBook.gif" width="122" height="20" name="p7mbut5" border="0" alt="menu 5"></a></div>
<div id="p7submenu1" class="pviimenudiv" style="position:absolute; left:142px; top:35px; width:102px; visibility: hidden; z-index:101">
<table width="108" border="0" cellspacing="6" cellpadding="0">
<tr><td>stuff</td></tr>
</table>
</div>
<div id="p7submenu2" class="pviimenudiv" style="position:absolute; left:142px; top:55px; width:102px; visibility: hidden; z-index:102">
<table width="108" border="0" cellspacing="6" cellpadding="0">
<tr><td>stuff</td></tr>
</table>
</div>
<div id="p7submenu3" class="pviimenudiv" style="position:absolute; left:142px; top:75px; width:102px; visibility: hidden; z-index:103">
<table width="108" border="0" cellspacing="6" cellpadding="0">
<tr><td>stuff</td></tr>
</table>
</div>
<div id="p7menubottom" class="pviimenudiv" style="position:absolute; left:10px; top:115px; width:102px; visibility: visible; z-index:111">
<table width="108" border="0" cellspacing="6" cellpadding="0">
<tr><td>stuff</td></tr>
</table>
</div>
</div>
Sorry for so much code. I'm completely frustrated! I can't seem to get this layout to work at all. I was using frames which was fine but I have to make this work without frames now. Thanks for any help. The objective: Produce page content which behaves as if it were 'tabbed' as seen on many websites and programmes. I have done this many times before, but only with absolute positioning from the document base level. This time, the div containing the information to be tabbed has to appear relative (for re-sizability) and contain the tab divs within it. I am using a short javascript to change the z-index of the divs in order to produce the tab effect. The problem: The whole thing works fine, except for: - If I leave the css height off the divs, IE chops the bottom off, and does not allow a scroll. - If I put a height and auto (or scroll) overflow on the divs they display correctly in IE, but disappear in firefox - Until a table contained within one of the divs becomes larger than the stated height. At which point that div (not any of the others) disappears from IE as well. The question: Is this a known bug? If so, what is the work-around? Have I done something dumb? If so, what? The source: source files are available for download (they are quite large, and I don't want to trim them in case something in the trim is the problem. Plus they need to be large to demonstrate the length issue correctly). Text within these examples is copyrighted by various people and is used without permission, for illustrative purposes only. the xhtml page - click through the tabs to see the effect. Add extra rows to the table in the 'dates & prices' tab to see the disappearing problem. the javascript file - the function is at the bottom, 'layer_z_lift'. the css stylesheet - the styles for the tabs are in the middle, commented as tour details tabs. any questions, post and I shall answer. Jz. I'm working on a pet project on the off chance that I could be hired by a small business referral organization in the city where I live, so this isn't super urgent. I'm also not a web developer by trade, more IT, so if I make any obvious mistakes, feel free to point them out. I've got a simple absolute-positioned two-column layout and a two-color background that I want to tile vertically behind it. The problem seems to be that the browsers ( IE and FF, haven't tried chrome/safari/opera) seem to think that the body ends at the bottom of the logo I set on top, and won't tile it beyond the bottom of the image. HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hub City Business Network | Word-Of-Mouth Business Referrals in Hattiesburg, Mississippi | Home</title> </head> <body> <div id="content"> <div id="logo"><a href="index.htm"><img src="images/hcbnlogo1transparency.png" alt="Hub City Business Network" /></a></div> <div class="left"> <div id="navigation"> <ul> <li><a href="index.htm">Home</a></li> <li><a href="members/index.htm">Members</a></li> <li><a href="contact.htm">Contact Us</a></li> </ul> </div> <div id="leftinfo"> <p>We meet for breakfast every Tuesday,<br /> 7 - 8:30 AM. <br /> at the Neal House at<br /> 1311 East Hardy St.</p> </div> </div> <div class="right"> <p>Hub City Business Network (HCBN), is a Hattiesburg-based business networking group that meets every Tuesday for breakfast at 7:00 till 8:30 A.M. Our membership is composed of some of the finest and best-respected business men and women in Hattiesburg. Our networking model is predicated on the idea that people do business with people they know, trust, and like. Our members know that they can confidently refer business to a member and the referral will be handled in a timely, professional manner. In addition, we encourage members to meet outside of the weekly meetings for one-on-one Strategic Marketing Sessions (SMS). An SMS usually takes the form of a lunch or coffee, and gives members time to discover in a more relaxed environment things about other members that don't surface at the regular weekly meetings. </p> </div> <div id="footer"> <p>Site built by Robert Greenstreet</p> </div> </div> </body> </html> CSS: Code: html
{
width:100%;
}
#logo img
{
margin:10px 0px 0px 20px;
width:400px;
height:100px;
}
img
{
border:0px;
}
a:link
{
color:#29497f;
}
a:visited{
color:#5dd0c0;
}
body
{
width:650px;
margin-left:auto;
margin-right:auto;
background-color:#29497f;
}
#content
{
/*height:500px;*/
width:650px;
background-image:url('../images/bg1.png');
background-repeat:repeat-y;
background-attachment:fixed;
background-position:center;
margin-top:-10px;
}
.left
{
position:absolute;
left:auto;
top:120px;
width:15em;
margin-left:12px;
padding-left:0px;
}
.left ul
{
list-style-type:none;
margin-left:-33px;
font-family:sans-serif;
}
#leftinfo
{
margin-left:10px;
width:9em;
}
.right
{
position:absolute;
left:auto;
top:120px;
width:27em;
margin-left:12em;
font-family:sans-serif;
}
.right p
{
color:#000000;
}
#memberlist ul
{
margin-left:-40px;
}
#memberlist a:visited{
color:#6a92d4;
text-decoration:none;
}
#footer
{
position:absolute;
top:400px;
width:650px;
margin:0 auto;
}
Also, I'm working on getting that footer centered about 30px from the bottom of the page, without running up into whatever content may be above it. I think I might be able to figure that one out on my own, though. Like I said, no rush. This isn't a paid gig I have a Menu thats slides down when a link is clicked. In IE6, when the div slides down, it pushes everything below it, once it's hit the top of that child div. I tried setting my z-index to 9999 for the div that comes down and over the content, and setting the child z-index to 1. But for both of those, it still pushes my #SubPage down. To see what I am talking about, if you can visit: Quidel Univ. use login ID: 2097 Once you get logged in, click on "Events". Once there, hit the "Admin Menu" link on the top-right and you'll see what I'm talking about. This is my menu container code: CSS Code: Original - CSS Code #adminContainer { width: 261px; float: left; position: relative; z-index: 9999; }
#adminContainer { width: 261px; float: left; position: relative; z-index: 9999; }
And this is my #SubPage code: CSS Code: Original - CSS Code #SubPage { float: left; width: 553px; padding: 5px; z-index: 1; }
#SubPage { float: left; width: 553px; padding: 5px; z-index: 1; }
Been playing with the positioning and z-index, but can't seem to get it to my liking.... and as I typed this, I just thought to myself , I haven't even attempted to edit my iestyles.css sheet. DOH! Going to do that, but I'll leave this up in case someone knows my stupid mistake! TIA! Ok. I have coded loads of sites in CSS but have never come across this problem before, and have hit a big bloody brick wall on it! Any help would be greatly appreciated. So.... i have an outer div with a 1px border and other divs inside of this outer div, one of which i want to give a negative margin to so that it sits under the border of the outer div.... I thought i could just give the div i want to sit under the outer div a negative z-index, and this does actually work on FF, however IE6 and Safari 1.3.2 dont like it and it just appears above the border. does that make sense? here's the code so you can see what i'm waffling on about.... Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
#outer {
border:1px dashed green;
width:750px;
position:relative;
z-index:1000;
}
#box1, #box2, #box3 {
width:200px;
height:200px;
position:relative;
}
#box1 {
background:red;
}
#box2 {
background:cyan;
margin-left:-10px;
z-index:-1;
}
#box3 {
background:silver;
}
</style>
</head>
<body>
<div id="outer">
<div id="box1">box 1</div>
<div id="box2">box 2</div>
<div id="box3">box 3</div>
</div>
</body>
</html>
Bear in mind also that this is a simplified version of the page, and there is other stuff below the outer div that flows down as the text size expands.... thanks in advance for any help! graham Can someone tell me how z-index calculated on two elements that are both absolute position I'm having a little problem with centering divs: I have a dynamic page that displays items. Each item has it's own div containing an image and a title. I want these divs to be centered but also to drop onto multiple lines if necessary, for example: There is room for 4 items per row within the container div, so one item would be centered, two items would be centered, and so on, but 5 items would have 4 divs on the top row and one div centered underneath: 1 item: [div] 2 items: [div][div] 4 items: [div][div][div][div] 5 items: [div][div][div][div] [div] 10 items: [div][div][div][div] [div][div][div][div] [div][div] and so on. I can get this to work by using float to automatically drop the next 4 onto the next row, but is there a 'center' attribute or technique I could use to keeps these divs centered? I hope this makes sense to you all!! I'm trying to get multiple DIV tags with an set layout, like [Example 1] to show in this [Example 2] but also scroll along when you click on the arrows now my issue is if I use position "position:absolute" the little colour boxes stay where they are? now if I use "position:relative" I have to put the "top:-500px" and the next box as "top:-1300px" etc. but they are the top line of boxes like aaa and ccc in the first link but I cant see this being the correct way of doing this? I'm completely lost any pointers into how to get this to work would be nice? Hello everyone, Ive been trying to reconstruct a web design from a photoshop design and it has bars going down the side of a center container where the content is, the problem im having is when the text and such in the content 'rule' goes over one line, prior to what i thought would happen, only the content 'rule' scales to the amount of text and the container rule does nothing. Is there a way to make the container scale with the content and have the bars scale with the container...? Heres the css and the html Code:
#container
{
margin-left: auto;
margin-right: auto;
top: 0;
width: 875px;
margin-top: -8px;
padding: 0;
overflow: visible;
background: #FFFFFF;
}
#secondbar
{
margin-left: 102px;
margin-right: auto;
width: 40px;
top: 0;
position: absolute;
background: #4D220F;
}
#bar
{
margin-left: 6px;
margin-right: auto;
width: 96px;
top: 0;
position: absolute;
/*[empty]height:;*/
background: #E3C98E;
}
#thirdbar
{
margin-left: 123px;
margin-right: auto;
width: 21px;
top: 0;
position: absolute;
background: #7F8FA6;
}
#content
{
margin-left: 154px;
margin-right: auto;
top: 0;
width: 709px;
position: absolute;
background: #FFFFFF;
}
Code: <head> <title>Test</title> <link rel="stylesheet" type="text/css" href= "styles.css"> </head> <body bgcolor="f4f1ea"> <div id="container"><div id="bar"> </div><div id="secondbar"> </div><div id="thirdbar"> </div> <div id="content"> </div></div> </body> Thanks for any help, sorry if its a bit confusing Xidus Hi. I am a relative CSS newbie working on a new layout. My intended format is:
A sidebar (a div with no visible border) containing a set of smaller divs.
A main div for the content on the right.
About 35 px of space between the sidebar div and the main div.
Yet, for some reason I am unable to force the sidebar and main div to come together in the center with space between them. Using float: only seems to make them both hug the side of the page. My HTML code is: Code: <div class="sidebar">
<div class="cv">
<font size="3"><b><center>
Current Version Info
</center></b></font>
</div>
<div class="ver">
<center>
Version:
<br/>
<b>0.0.0</b>
</center>
</div>
<div class="rel">
<center>
Released:
<br/>
<b>00/00/00</b>
</center>
</div>
<div class="nav">
</div>
</div>
<div class="main">
<center>
Lorum ipsum
</center>
</div>
The relevant CSS code is: Code: div.sidebar {
width: 202px;
float: left;
border: 0px solid #00CC99;
}
div.cv {
width: 200px;
border: 1px solid #00CC99;
background-color: rgb(33,33,33)
}
div.ver {
width: 99px;
border: 1px solid #00CC99;
float: left;
background-color: rgb(33,33,33)
}
div.rel {
width: 99px;
border: 1px solid #00CC99;
float: right;
background-color: rgb(33,33,33)
}
div.nav {
margin-top: 30px;
width: 200px;
height: 100px;
border: 1px solid #00CC99;
background-color: rgb(33,33,33)
}
div.main {
width: 500px;
border: 1px solid #00CC99;
background-color: rgb(33,33,33);
float: right;
}
In particular, div.main and div.sidebar are the ones giving me trouble. What would you recommend? Edit: And for extra bonus points, can you tell me how to make another div go below everything, no matter how long the sidebar or main div is? Right now anything I add seems to hover behind the main div rather than render below it. Trying to achieve this: I'm having trouble figuring out how to float the right ad space correctly. This is what i've got so far: http://gatehouse.graffetto.com/floating_divs.html Code: Code: <html>
<head>
<style type="text/css">
.mainDiv {margin: 0; border: 1px solid black; padding: 10px; width: 600px; float: left;}
.image {height: 100px; width: 100px; background-color: red; float: left;}
.rightAd {float: right; background-color: blue; height: 250px; width: 300px; clear:right; margin-top: 300px;}
</style>
</head>
<body>
<div class="mainDiv">
<div class="image">test</div>
<div class="rightAd">test</div>
<div class="textDiv">
Text content
</div>
</div>
</body>
</html>
I know this is simple i just can't figure it out for some reason.. thanks for any help. I am working on a site laid out with divs. I am having trouble with one in particular: shopping basket div. If you go to http://www.refinethetaste.com/html/ At the header section you will see a shopping basket right on top of the logo. I want it stand on the navigation section but I want it float to right. I have tried several different things with its positioning, I just cant get it right. Hi css-ers, I wonder if anyone can tell me what I've done wrong. I have an absolutely positioned div that shows up perfectly in all browsers except IE 6 (I haven't tried it in IE7 yet). I have another abs pos div on the page that behaves perfectly. Any suggestions? This is the x/html: Code: <div id="logo"> <a href="index.html"></a> </div> This is the CSS: Code: #logo {
left: 20px;
top: 0px;
position: absolute;
z-index: 5;
margin: 0pt;
border: 1px solid #315185;
}
#logo a {
background: transparent url(../images/logo.jpg) no-repeat scroll 0px 0px;
display: block;
height: 435px;
width: 140px;
}
#logo a:hover {
background: url(../images/logo.jpg) no-repeat scroll 0px -435px;
display: block;
height: 435px;
width: 140px;
}
Thanks for any tips or references. |
|||||||