SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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

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

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,541
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    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)
    Code:
    .colmask {
        overflow:hidden;
    }
    css_injector_1.css (line 64)
    Code:
    .col1, col2, col3 {
        overflow:hidden;
    }

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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?

    Code:
    .col1,.col2,.col3,.colmask{overflow:visible}
    It looks like sidebar-first will need position:relative and a z-index.

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


    Beaten by Ron

  4. #4
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by shuaiheige View Post
    Hey Fellas,
    I think I probably should've cleared my cash more often...
    I never have any cash

    I think you meant cache


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •