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) */
}