Css z-index / overflow problem beautytip tooltip.... head scratcher (for me)

Hello everyone,

css newbie here…ready to bang head into wall with a z-index issue, so any help would be greatly appreciated.

I am developing a new drupal 7 site that needs a 3 column css layout and beautyips tooltips.

The problem that I having is that in Drupal 7, I can not seem to get the beautytips tooltips to display correctly inside the 3-column css layout. Outside the 3-column css layout the beautytips tooltips seem to work fine, just inside my highly necessary 3-column lay, I can’t get them to display correctly.

I have tried every trick that I know to get the tooltips to appear properly, like changing z-index and overflow attributes inside the 3-column css layout, but nothing has worked.

You can see the issue that I having at this url:

http://demo.povertysdemise.org/drupal/test_page

If anyone knows a quick fix or can point out what I am doing wrong, I’d greatly appreciate it. The problem is consistent across all browsers…

This is my 3-column css layout: (If I should post my full style.css just let me know)

Thanks folks

body {
	margin:0;
	padding:0;
	border:0;			/* This removes the border around the viewport in old versions of IE */
	width:100%;
	background:#e8e8e8;
	min-width:600px;		/* Minimum width of layout - remove line if not required */
					/* The min-width property does not work in old versions of Internet Explorer */
	font-size:90%;

}

a {
	color:#369;
}
a:hover {
	color:#de6a00;
	text-decoration:underline;
}

}
h1, h2, h3 {
	margin:.8em 0 .2em 0;
	padding:0;
}
p {
	margin:.4em 0 .8em 0;
	padding:0;
}
img {
	margin:10px 0 5px;
}
/* 'widths' sub menu */
#layoutdims {
	clear:both;
	background:#e8e8e8;
	border-top:4px solid #000;
	margin:0;
	padding:6px 15px !important;
	text-align:right;
}


/* column container */
.colmask  {
	position:relative;	/* This fixes the IE7 overflow hidden bug */
	clear:both;
	float:left;
	width:100%;			/* width of whole page */
	overflow:hidden;		/* This chops off any overhanging divs */

}

/* common column settings */
.colright,
.colmid,
.colleft  {
	float:left;
	width:100%;			/* width of page */
	position:relative;
}
.col1,
.col2,
.col3  {
	float:left;
	position:relative;
	padding:0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead
	   		        only padding top and bottom is included here, make it whatever value you need */
               overflow:hidden;
}
/* 3 Column settings */
.threecol {
	background:#e8e8e8;		/* right column background colour */
}
.threecol .colmid {
	right:30%;			/* width of the right column */
	background:#e8e8e8;		/* center column background colour */
}
.threecol .colleft {
	right:35%;			/* width of the middle column */
	background:#e8e8e8;	/* left column background colour */
}
.threecol .col1 {
	width:31%;			/* width of center column content (column width minus padding on either side) */
	left:102%;			/* 100% plus left padding of center column */
}
.threecol .col2 {
	width:27%;			/* Width of left column content (column width minus padding on either side) */
	left:41%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
	width:26%;			/* Width of right column content (column width minus padding on either side) */
	left:80%;			/* Please make note of the brackets here:
					(100% - left column width) plus (center column left and right padding) plus
                                                                       (left column left and right padding) plus (right column left padding) */
}

Give the following a try:

Delete the following two lines of overflow:hidden and your tips should appear intact. You may need to apply clearfix to .colmask if any problems with uncontained floats appear.

css_injector_1.css (line 45)


.colmask {
    [color=red][s]overflow:hidden;[/s][/color]
}

css_injector_1.css (line 64)


.col1, col2, col3 {
    [color=red][s]overflow:hidden;[/s][/color]
}

HI,

The problem is that you have overflow:hidden on all your columns and on the wrapper which means the tooltip can never show outside.

If you remove the overflow then the tooltip will show but I’m not sure if it will mess up your complicated column arrangement. Why didn’t you go for something more straight forward?


.col1,.col2,.col3,.colmask{overflow:visible}

It looks like sidebar-first will need position:relative and a z-index.


sidebar-first{
position:relative;
z-index:2;
}

Edit:

Beaten by Ron :slight_smile:

Hey Fellas,

Your tips worked like a charm… very much appreciated… I had tried changing the overflow settings before, but it didn’t work… I think I probably should’ve cleared my cash more often… that sidebar-first would’ve killed me to figure out…

thanks,
again…

excellent site you guys have

I never have any cash :slight_smile:

I think you meant cache :wink: