[solved] Help with CSS Formatting - text above image bug

Discussion in 'Web Design and Development' started by Consultant, Feb 6, 2010.

  1. Consultant macrumors G5

    Consultant

    Joined:
    Jun 27, 2007
    #1
    Sorry, completely clueless on CSS. Just installed this new plugin and part of the text produced by it are displaying above the shadowbox image. CSS code next post.

    Note the image below has 2 parts.
    - Upper part is the text before expanding the image
    - Bottom part shows the images above the image, ugh...

    The plugin is: stock-quote-sidebar
    http://wordpress.org/extend/plugins/stock-quote-sidebar/

    Example of where it's broken
    http://obamapacman.com/2010/02/five-million-dollars-expensive-h264-license-myth/

    Would be greatful for any help. Thanks
     

    Attached Files:

  2. Consultant thread starter macrumors G5

    Consultant

    Joined:
    Jun 27, 2007
    #2
    Code:
    .sqsbchart {
      position:relative;
      text-decoration: none;
      z-index:200001;
    }
    
    .sqsbchart:hover {
      z-index:210000;
    
    }
    
    .sqsbchart img {
      display: none;
    }
    
    .sqsbchart:hover img {
      display: block;
      position: absolute;
      border: 1px solid #000;
      background-color: #ffe;
      color: #000;
      font-family: Arial, "Arial MT", "MS Sans Serif", sans-serif;
      font-size: 10px;
      font-weight: normal;
      line-height: 1.3em;
      text-align: center;
      padding: 3px;
      margin: 20px;
      top: 0px;
      left: -125px;
      z-index: 250000;
    
    }
    
    hr#sqsbhr {
    	display: block;
    }
    
    tr#sqsbevenrow {
    	background-color: #eeeeee; 
    }
    
    /* For K2 Compatibility 
       - Prevents Overflowed tooltips from being hidden
       - sb-php line prevents tooltips from being hidden by other sidebar elements
    */
    
    .columns-three .secondary {
      overflow: visible;
    }
    
    #stock-quotes {
      z-index: 250000;
    }
    
     
  3. ergdegdeg Moderator emeritus

    ergdegdeg

    Joined:
    Oct 13, 2007
    #3
    The problem is the z-index of class ".sqsbchart". Can you change that to a 0?
     
  4. Consultant thread starter macrumors G5

    Consultant

    Joined:
    Jun 27, 2007
    #4
    Now works! Thanks!!!

    Code:
    .sqsbchart {
      position:relative;
      text-decoration: none;
      z-index:0;
    }
    
    .sqsbchart:hover {
      z-index:20000;
    
    }
    
    .sqsbchart img {
      display: none;
    }
    
    .sqsbchart:hover img {
      display: block;
      position: absolute;
      border: 1px solid #000;
      background-color: #ffe;
      color: #000;
      font-family: Arial, "Arial MT", "MS Sans Serif", sans-serif;
      font-size: 10px;
      font-weight: normal;
      line-height: 1.3em;
      text-align: center;
      padding: 3px;
      margin: 20px;
      top: 0px;
      left: -125px;
      z-index: 0;
    
    }
    
    hr#sqsbhr {
    	display: block;
    }
    
    tr#sqsbevenrow {
    	background-color: #eeeeee; 
    }
    
    /* For K2 Compatibility 
       - Prevents Overflowed tooltips from being hidden
       - sb-php line prevents tooltips from being hidden by other sidebar elements
    */
    
    .columns-three .secondary {
      overflow: visible;
    }
    
    #stock-quotes {
      z-index: 250000;
    }
    
     
  5. ergdegdeg Moderator emeritus

    ergdegdeg

    Joined:
    Oct 13, 2007

Share This Page