Background image showing through text at bottom of spines

  • Problem
  • Updated 4 years ago
  • Solved
This behaviour is only being exhibited in IE8. The bottom section of the text on the spines in our slidedeck is acting as transparent and showing the background image which is applied with CSS. I've attached a screenshot which shows the issue.

Example
Photo of bridgwatercollegeB

bridgwatercollege

  • 3 Posts
  • 0 Reply Likes
  • frustrated

Posted 4 years ago

  • 1
Photo of Brian Burkett

Brian Burkett

  • 951 Posts
  • 25 Reply Likes
Hey bridgwatercollege,

Are you including a IE conditonal stylesheet for your skin?

Here is a resource if you're unfamiliar as to how to do this:
http://www.quirksmode.org/css/condcom...

Thanks,
Brian
Photo of bridgwatercollegeB

bridgwatercollege

  • 3 Posts
  • 0 Reply Likes
Hi Brian

We are using a conditional stylesheet for our slidedeck but I don't know what is causing the issue. Could someone take a look at the example as I've been investigating this for a while but can't figure out what is causing it.
Photo of Brian Burkett

Brian Burkett

  • 951 Posts
  • 25 Reply Likes
Hey Bridgewatercollege,

Set the class of index in your css to have a display of none. For example:

.index {
display: none !important;
}


That should fix that. Check back with us after you've done this.

Thanks,
Brian
Photo of bridgwatercollegeB

bridgwatercollege

  • 3 Posts
  • 0 Reply Likes
Thanks that has resolved the issue.

The div that was created within the spine that has a class of .index, had inline styling and the problem attribute was the height which was set to 37px. By using the above fix, the display: none overwrites the height and other attributes and fixes the transparent text.

Am I right in thinking the index div is a container element for the numbers which you can set to display or not within the config? We currently have index: false set within our .slidedeck js so if this is the case why is the div still being created if it is effectively empty?

When index is set to false would it not be better to simply not insert the div?