Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

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

Consultant

Consultant

macrumors G5
Original poster
Jun 27, 2007
13,314
34
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
 

Attachments

  • shadow-box-problem.jpg
    shadow-box-problem.jpg
    147.5 KB · Views: 112
Consultant

Consultant

macrumors G5
Original poster
Jun 27, 2007
13,314
34
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;
}
 
ergdegdeg

ergdegdeg

Moderator emeritus
Oct 13, 2007
1,628
0
The problem is the z-index of class ".sqsbchart". Can you change that to a 0?
 
Consultant

Consultant

macrumors G5
Original poster
Jun 27, 2007
13,314
34
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;
}
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom