CSS Forum

**dansgalaxy** · 05-02-2007, 12:25 PM

Hi,

On a site im making i have a CSS menu and when it like floats out on what seems ti be only one page the text float over thetop if that makes sense...

http://calm.dansgalaxy.co.uk/events.php

Im not sure why... Anyone?

Thanks
Dan

**Phaaze** · 05-02-2007, 09:53 PM

I am new to CSS but have you tried giving the sub navigation a z-index?

(Assuming it's the sub-navigation links your talking about...)

**vangogh** · 05-03-2007, 02:42 AM

Dan I'm not sure I'm following. I see you asked this morning though so maybe you solved things.

The menu works for me in IE, though not in Firefox just so you know.

If you haven't figured out the issue you were having just leave some more details and I'll take a look.

**Phaaze** · 05-03-2007, 02:48 AM

Quote:

Originally Posted by vangogh

Dan I'm not sure I'm following. I see you asked this morning though so maybe you solved things.

The menu works for me in IE, though not in Firefox just so you know.

If you haven't figured out the issue you were having just leave some more details and I'll take a look.

I think he's talking about the green text showing on top of the navigation sub menu's... They should be hidden behind the sub menus when the sub menu's are visible.

**dansgalaxy** · 05-03-2007, 09:39 AM

Yup thats the problem...

I checked the site in Firefox the other day and it worked, i will have to re-check when i get home, but it appears my server isnt working at the moment i cant open any of my sites... but can login to cpanel via another site... im gonna have to check it out when i get home,

It covers the other pages contents just not the events.php page, im wondering if this is because of the Divs which the content is in...

Thanks all,
Dan

**Kirtan** · 05-03-2007, 10:50 AM

Code:

.menu {
z-index:-1;
}
.menu table {
z-index:0;
}
.menu li {
z-index:1;
}

Use this z-index order and it will be fine.

**dansgalaxy** · 05-03-2007, 12:49 PM

this is what i currently have:

Code:

.menu
{
float:left;
margin-left: 0px;
margin-right: 20px;
margin-top: 1px;
width: 150px;
z-index:1000;
font-size:90%;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
width:150px;     /******************************************************************* Width of navigation */
}
/* hack for IE5.5 */
* html .menu ul {margin-left:-16px; margin-left:0;}
/* position relative so that you can position the sub levels */
.menu li {
position:relative;
background:#d4d8bd; /**************************************************************** BG colour of boxes norm */
height:26px; /***********************************************************************************************/
}
/* get rid of the table */
.menu table {
position:absolute; 
border-collapse:collapse; 
top:0; 
left:0; 
z-index:100; 
font-size:1em;}

And why would it work for every other page eccept this events.php....

Could it not be that the div the text is in is making it float above everthign or something?...

Dan

**Kirtan** · 05-03-2007, 01:03 PM

Dan

Other pages doesn't contain content. so i can't see whether it works well or not. But change the z-index as i mentioned. It works well with me after changing that.

**Kirtan** · 05-03-2007, 01:06 PM

Increase margin-left of .eventcurlycontainer class. It overlaps menu. It creates the problem some menu's doesn't work well with FF.

**LadynRed** · 05-03-2007, 03:44 PM

Z-index ONLY works on elements that are set to position:absolute or position: relative, so the z-index:1000 is pointless the way you have it now.

http://www.aplus.co.yu/lab/z-pos/
http://24ways.org/2005/zs-not-dead-baby-zs-not-dead

**dansgalaxy** · 07:38 PM

Ok firstly, http://calm.dansgalaxy.co.uk/about.php has PLENTY of content and the menu still works fine...

Which is why im thinking thats its the Divs whcih do the bent back corner thingy ... and if its how that works... im not sure im gonna have to study my CSS for clues....

Thanks all...

Dan

EDIT:

Right, i looked at it and if i remove the position: relative; which is in:

Code:

.eventcurlycontainer .innerdiv{
background: transparent url(images/brcorner.gif) bottom right no-repeat;
 position: relative;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
}

the menu works fine and covers the text jsut like all the other pages the only differance is that the text within the curlydiv things ****s diagionally up to the left... only by like a couple of px, so is there anyway to either get around this or to compensate for the amount it shifts when the position: relative is removed?

Thanks,
Dan